Nodejs がフロントエンドと対話する方法

Node.js は、HTTP リクエスト/レスポンス、WebSocket、および Socket.IO を介してフロントエンドと対話します。Node.js サーバーをセットアップし、ルートを定義します。フロントエンドは、WebSocket または Socket.IO を使用して HTTP リクエストを送信するか、接続を確立します。 Node.js サーバーはリクエストを処理し、ライブ接続を介してレスポンスを返すか、データを送信します。

Node.js フロントエンドとの対話

Node.js はサーバーサイドを構築するためのメソッドですアプリケーションの JavaScript ランタイム環境。 HTML、CSS、JavaScript などのフロントエンド テクノロジと対話して、動的で対話型の Web アプリケーションを提供できます。

#対話メソッド

Node.js とフロントエンド間の対話は、次の方法で実行できます。

• HTTP リクエスト/レスポンス: Node.js サーバーは、ブラウザまたは他のクライアントからの HTTP リクエストを処理し、HTML、JSON、またはその他の種類のレスポンスを返すことができます。
• WebSocket: WebSocket は、Node.js サーバーがフロントエンドとの永続的な接続を確立してデータをリアルタイムに転送できるようにする双方向のリアルタイム通信プロトコルです。
• Socket.IO: Socket.IO は、Node.js とフロントエンド間のリアルタイム通信を簡素化する WebSocket ライブラリです。また、イベント処理やメッセージ名前空間などの高度な機能も提供します。

#実装手順

1. サーバーを作成します:

<code class="javascript">const express = require('express');
const app = express();
const server = app.listen(3000);</code>

2. ルートを定義します:

<code class="javascript">app.get('/', (req, res) => {
  res.send('Hello from Node.js!');
});</code>

3. フロントエンド リクエストの処理:

<code class="javascript">app.post('/submit-form', (req, res) => {
  const data = req.body;
  // 处理表单数据...
});</code>

4. WebSocket の使用:

<code class="javascript">const WebSocket = require('ws');
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
  // 与客户端建立 WebSocket 连接...
});</code>

5 . Socket.IO の使用:

<code class="javascript">const socketIO = require('socket.io');
const io = socketIO(server);

io.on('connection', (socket) => {
  // 与客户端建立 Socket.IO 连接...
});</code>

フロントエンド コード例:

<code class="javascript">// 发送 HTTP 请求
fetch('/submit-form', {
  method: 'POST',
  body: JSON.stringify({ name: 'John' }),
})
  .then((res) => res.json())
  .then((data) => console.log(data));

// 建立 WebSocket 连接
const socket = new WebSocket('ws://localhost:3000');
socket.onopen = () => console.log('Connected to WebSocket');

// 使用 Socket.IO
const socket = io();
socket.on('connect', () => console.log('Connected to Socket.IO'));</code>

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