ReactとWebSocketを使ってリアルタイム通信機能を実装する方法

React と WebSocket を使用してリアルタイム通信機能を実装する方法

概要:
最新の Web アプリケーションでは、リアルタイム通信が非常に重要になっています。多くのアプリケーションは、ユーザーに最新の情報をタイムリーに表示するために、データをリアルタイムで取得および更新できる必要があります。この記事では、React と WebSocket を使用してリアルタイム通信機能を実装する方法を紹介します。 WebSocket を使用してリアルタイム チャット アプリケーションを構築する方法を示し、具体的なコード例を示します。

WebSocket とは何ですか?
WebSocket は、クライアントとサーバー間の双方向通信のためのシンプルかつ効率的な方法を提供する最新のネットワーク通信プロトコルです。 WebSocket プロトコルを使用すると、クライアントとサーバー間の長時間の接続が可能になり、データの更新に応じてこれらの更新をリアルタイムでクライアントにプッシュできます。 WebSocket は従来の HTTP リクエスト/レスポンス モデルよりも効率的で、リアルタイム アプリケーションでのプッシュ通知と即時通信が可能になります。

React を使用して簡単なチャット アプリケーションを作成する:
まず、React アプリケーションを作成する必要があります。 Create React App ツールを使用して、新しい React アプリケーションを作成できます。ターミナルで次のコマンドを実行して、新しい React アプリケーションを作成します:

npx create-react-app realtime-chat-app

作成したら、フォルダーに移動してアプリケーションを起動できます:

cd realtime-chat-app
npm start

これで、基本的な React が完成しました。応用。これをベースにWebSocketを追加してリアルタイム通信機能を実現します。

WebSocket 通信機能の実装:
まず、WebSocket ライブラリをインストールする必要があります。ターミナルで次のコマンドを実行して、WebSocket ライブラリをインストールします。

npm install --save websocket

React コンポーネントでは、useState フックを使用してチャット メッセージ リストを管理できます。また、useEffect フックを使用して WebSocket 接続を初期化し、受信したメッセージを処理します。以下は、単純なチャット ボックス コンポーネントのサンプル コードです。

import React, { useState, useEffect } from "react";
import WebSocket from "websocket";

const ChatBox = () => {
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState("");
  let ws;

  useEffect(() => {
    ws = new WebSocket("ws://localhost:8000/ws"); // WebSocket服务器地址

    ws.onopen = () => {
      console.log("WebSocket连接已建立");
    };

    ws.onmessage = (event) => {
      const message = JSON.parse(event.data);
      setMessages((messages) => [...messages, message]);
    };

    return () => {
      ws.close();
    };
  }, []);

  const sendMessage = () => {
    ws.send(JSON.stringify({ content: inputValue }));
    setInputValue("");
  };

  return (
    <div>
      <div>
        {messages.map((message, index) => (
          <p key={index}>{message.content}</p>
        ))}
      </div>
      <input
        type="text"
        value={inputValue}
        onChange={(event) => setInputValue(event.target.value)}
      />
      <button onClick={sendMessage}>发送</button>
    </div>
  );
};

export default ChatBox;

上記のコードでは、useState を使用してチャット メッセージ リスト (messages) と入力ボックスの値 (inputValue) を管理します。また、WebSocket 接続 (ws) を宣言し、コンポーネントのロード時に初期化します。新しいメッセージを受信すると、setMessages を使用してメッセージ リストを更新します。コンポーネントがアンロードされる直前に、WebSocket 接続を閉じます。

render 関数では、メッセージ リストと入力ボックスをレンダリングします。ユーザーが送信ボタンをクリックすると、入力ボックス内のテキストの内容が WebSocket サーバーに送信されます。

WebSocket サーバーを起動します:
WebSocket アプリケーションが適切に動作するためには、WebSocket サーバーも起動する必要があります。この例では、Node.js と ws ライブラリを使用して、単純な WebSocket サーバーを作成します。ターミナルで次のコマンドを実行して ws ライブラリをインストールします:

npm install --save ws

次に、server.js というファイルを作成し、次のコードを使用して WebSocket サーバーを作成します:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8000 });

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    // 处理接收到的消息
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

Now WebSocket サーバーは、次のコマンドを実行して起動できます。

node server.js

最後に、ChatBox コンポーネントを App.js に追加し、React アプリケーションを実行するだけです。入力ボックスにメッセージを入力して送信ボタンをクリックすると、メッセージは WebSocket 経由でサーバーに送信され、接続されているすべてのクライアントにリアルタイムで返されます。

まとめ:
今回は、ReactとWebSocketを使ってリアルタイム通信機能を実装する方法を紹介しました。 useState フックと useEffect フックを使用して、React コンポーネントの状態を管理および更新します。また、WebSocket 接続を作成し、新しいメッセージを受信したときに UI を更新します。最後に、メッセージを処理および転送するための単純な WebSocket サーバーを作成しました。この記事が、React アプリケーションにリアルタイム通信機能を実装する方法を理解するのに役立つことを願っています。

以上がReactとWebSocketを使ってリアルタイム通信機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。