フロントエンドでnodejsを呼び出す方法

フロントエンド開発者として、バックエンド インターフェイスを呼び出す必要がある状況によく遭遇します。 Node.js は高速でスケーラブルな JavaScript ランタイムとして、I/O 集中型の操作を処理できるため、Node.js のバックエンド インターフェイスを呼び出すことは適切な選択です。この記事では、フロントエンドが Node.js メソッドを呼び出す方法を紹介します。

1. Ajax テクノロジを使用して Node.js を呼び出す

Ajax は、フロントエンドがサーバー側インターフェイスを呼び出すための最も一般的なメソッドの 1 つです。コードの実装は比較的シンプルで、一方向の情報送信に適しており、ページ全体を更新する必要がないため、部分更新と同様の効果が得られ、サーバーの負荷が軽減されます。以下は、Ajax を使用して Node.js を呼び出すコード例です:

1. 準備

まず、Node.js でバックエンド サービスを記述する必要があります。フロントエンドから送信されたリクエストに対して、適切なレスポンスを返します。次のサンプル コードは、Node.js バックエンド サービスの実装方法を示しています:

const http = require('http');
const server = http.createServer((req, res) =>

res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World

');
});
server.listen(3000, '127.0.0.1');
console.log('http://127.0.0.1 で実行されているサーバー:3000/');

2. リクエストの送信

フロントエンド コードでは、Ajax テクノロジを通じて Node.js のバックエンド サービスを呼び出すことができます。以下は簡単なサンプル コードです。

function ajaxCall() {

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("myDiv").innerHTML = this.responseText;
    }
};
xmlhttp.open("GET", "http://localhost:3000", true);
xmlhttp.send();

}

ここでは、XMLHttpRequest オブジェクトを使用して、open 経由でサーバーとの接続を開きます。 () 関数 Connection、send() 関数はサーバーにリクエストを送信できます。ここでのリクエストは GET リクエストであり、サーバーの応答を取得するために使用されます。

2. WebSocket を使用して Node.js を呼び出す

WebSocket は全二重通信プロトコルであり、主にリアルタイム データの送信を実現するために使用されます。 WebSocket を介して、フロントエンドはサーバーとリアルタイムで双方向通信を行うことができます。以下は、WebSocket を使用して Node.js を呼び出すコード例です:

1. 準備

まず、Node.js で WebSocket バックエンド サービスを記述する必要があります。フロントエンド WebSocket 応答との接続。以下は簡単なデモ コードです:

const http = require('http');
const WebSocket = require('ws');
const server = http.createServer();
const wss = new WebSocket.Server({ サーバー });
wss.on('接続', (ws) => {

console.log('A new client connected!');
ws.on('message', (message) => {
    console.log(`Received message => ${message}`);
    ws.send(`Hello, you sent => ${message}`);
});
ws.send('Welcome to the WebSocket server!');

});
server.listen( 3000, () => {

console.log('Server started on port 3000 :)');

});

2. リクエストの送信

フロントエンド コードでは、Node との接続を確立できます。 js を介して WebSocket Connect を介して Node.js にリクエストを送信し、レスポンスを受信します。以下は簡単なデモ コードです:

constソケット = new WebSocket('ws://localhost:3000');

socket.onopen = () => {

console.log('Connection established!');
socket.send('I am a new client!');

};

socket.onmessage = (event) => {

console.log(`Received message => ${event.data}`);

};

3. Fetch を使用して Node.js

を呼び出します

Fetch API は Promise をベースとした新しいネットワークリクエスト API であり、Ajax に比べてシンプルな API とより便利な操作を提供します。以下は、Fetch を使用して Node.js を呼び出すコード例です:

1. 準備

まず、リクエストに基づいて Node.js でバックエンド サービスを記述する必要があります。フロントエンドによって送信され、適切な応答を返します。次のサンプル コードは、Node.js バックエンド サービスの実装方法を示しています:

const http = require('http');
const server = http.createServer((req, res) =>

res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World

');
});
server.listen(3000, '127.0.0.1');
console.log('http://127.0.0.1 で実行されているサーバー:3000/');

2. リクエストの送信

フロントエンド コードでは、Fetch API を通じて Node.js のバックエンド サービスを呼び出すことができます。以下は簡単なデモ コードです:

fetch('http://localhost:3000')

.then(response => response.text())
.then(data => console.log(data))
.catch(err => console.error(err));

ここでは、Fetch API を使用してリクエストを送信し、then() を渡します。関数と catch() 関数を使用して応答を処理します。 Fetch API は Promise オブジェクトを返すため、then() 関数と catch() 関数を使用して成功または失敗を処理できます。

概要:

この記事では、フロントエンドが Node.js を呼び出す方法を紹介します。Ajax、WebSocket、Fetch API の 3 つのメソッドを通じて、フロントエンドは Node.js と簡単に対話できます。 。もちろん、実際の開発においては、フロントエンドとバックエンドの間でさまざまなやり取りがあり、実情に応じて適切な開発方法を選択する必要があります。

以上がフロントエンドでnodejsを呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。