リアルタイム通信のための React への WebSocket の統合

React での WebSocket の統合

WebSocket により、クライアントとサーバー間のリアルタイムの全二重通信が可能になります。リクエスト/レスポンスベースの従来の HTTP リクエストとは異なり、WebSocket を使用するとサーバーとクライアントの両方がいつでもメッセージを送信できるため、ライブ チャット、通知、ライブ データ更新などのリアルタイム機能が有効になります。

React アプリケーションでは、WebSocket 統合を使用して、メッセージング システム、ライブ アップデート、株価表示ツール、マルチプレイヤー ゲームなどの機能を構築できます。 React は、WebSocket 接続の管理に役立つフックとコンポーネントのライフサイクル メソッドを提供します。

---

1. WebSocket を使用する理由

• リアルタイム通信: WebSocket は、クライアントとサーバー間でメッセージを即座に送受信する機能を提供します。
• 遅延の削減: WebSocket 接続は永続的であるため、繰り返される HTTP リクエストのオーバーヘッドが削減されます。
• 効率的なデータ転送: WebSocket は 1 つの接続のみを開くため、帯域幅の使用量が削減され、通信速度が向上します。
• 対話型アプリケーション: WebSocket は、チャット アプリやライブ フィードなど、頻繁またはリアルタイムの更新を必要とするアプリケーションに最適です。

---

2. WebSocket の仕組み

WebSocket は、クライアント (ブラウザ) とサーバーの間に双方向の通信チャネルを確立します。最初のハンドシェイク (HTTP 経由) の後、WebSocket プロトコルが引き継ぎ、永続的な接続を作成します。

1. クライアントは、WebSocket ハンドシェイク リクエストをサーバーに送信します (HTTP リクエストと同様)。
2. サーバーはリクエストを受け入れ、WebSocket 接続を確立します。
3. 接続が開かれると、クライアントとサーバーの両方が WebSocket 接続を介してメッセージを送受信できるようになります。
4. 接続は開いたままになり、ハンドシェイクを繰り返す必要性が減ります。

---

3. React での WebSocket 統合のセットアップ

WebSocket を React アプリケーションに統合する方法を見てみましょう。最新のブラウザで利用できる WebSocket API を使用します。

ステップ 1: WebSocket 接続を作成する

まず、React コンポーネントで WebSocket 接続を作成します。 useEffect フックを使用して接続を確立し、useState を使用して受信メッセージを管理します。

import React, { useState, useEffect } from 'react';

const WebSocketExample = () => {
  const [message, setMessage] = useState('');
  const [socket, setSocket] = useState(null);

  // Establish WebSocket connection
  useEffect(() => {
    const ws = new WebSocket('wss://example.com/socket'); // Replace with your WebSocket server URL

    // Set WebSocket object in state
    setSocket(ws);

    // Set up event listener for receiving messages
    ws.onmessage = (event) => {
      console.log('Message from server:', event.data);
      setMessage(event.data); // Store the incoming message in state
    };

    // Clean up WebSocket on component unmount
    return () => {
      ws.close();
    };
  }, []);

  const sendMessage = () => {
    if (socket && socket.readyState === WebSocket.OPEN) {
      socket.send('Hello Server');
    }
  };

  return (
    <div>
      <h1>WebSocket Integration Example</h1>
      <p>Message from server: {message}</p>
      <button onClick={sendMessage}>Send Message</button>
    </div>
  );
};

export default WebSocketExample;

---

4.コードの説明

状態管理:

• message: サーバーから受信したメッセージを保持します。
• socket: WebSocket 接続オブジェクトを格納します。

useEffect フック:

• WebSocket 接続の確立: WebSocket 接続は、コンポーネントがマウントされる (useEffect が実行される) ときに作成されます。 「wss://example.com/socket」をサーバーの WebSocket URL に置き換えます。
• onmessage イベント リスナー: onmessage イベントは、WebSocket サーバーからの受信メッセージをリッスンし、新しいデータで状態を更新します。
• クリーンアップ: コンポーネントがアンマウントされるか、接続が不要になると、ws.close() は WebSocket 接続を閉じます。

メッセージの送信:

• sendMessage 関数: この関数は、接続が開いている場合 (socket.readyState === WebSocket.OPEN) に限り、WebSocket サーバーにメッセージを送信します。

---

5. WebSocket イベント リスナー

WebSocket は、対話するためのいくつかのイベントを提供します。

• onopen: 接続が確立されると起動されます。
• onmessage: サーバーからメッセージを受信したときに起動されます。
• onclose: WebSocket 接続が閉じられるときに発生します。
• onerror: WebSocket 接続でエラーが発生した場合に起動されます。

例:

const ws = new WebSocket('wss://example.com/socket');

ws.onopen = () => {
  console.log('WebSocket connection established');
};

ws.onerror = (error) => {
  console.error('WebSocket error:', error);
};

ws.onclose = () => {
  console.log('WebSocket connection closed');
};

---

6. React での WebSocket メッセージの処理

特に React アプリで WebSocket を操作する場合、受信したデータをリアルタイムで処理または表示する必要がある場合があります。新しいメッセージを受信するたびに状態を更新することで、これに対処できます。

たとえば、ライブ チャット アプリを構築することを想像してください。新しいメッセージで状態を更新し、動的にレンダリングします。

const [messages, setMessages] = useState([]);

ws.onmessage = (event) => {
  const newMessage = event.data;
  setMessages((prevMessages) => [...prevMessages, newMessage]); // Append new message to state
};

これにより、新しいメッセージがそれぞれチャット メッセージのリストに追加され、UI に表示されます。

---

7. WebSocket と再接続ロジック

WebSocket 接続は時々切断されることがありますが、再接続ロジックを処理することでアプリの堅牢性を確保できます。再接続ロジックは次のように実装できます:

useEffect(() => {
  const connectWebSocket = () => {
    const ws = new WebSocket('wss://example.com/socket');

    ws.onopen = () => console.log('WebSocket connected');
    ws.onclose = () => {
      console.log('WebSocket disconnected, reconnecting...');
      setTimeout(connectWebSocket, 1000); // Reconnect after 1 second
    };

    return ws;
  };

  const ws = connectWebSocket();

  // Clean up WebSocket on component unmount
  return () => {
    ws.close();
  };
}, []);

このコードは、接続が閉じられるたびに WebSocket サーバーへの再接続を試みます。

---

8.セキュリティに関する考慮事項

• wss:// を使用する: 特に機密データを送信する場合は、暗号化通信には常に wss:// プロトコル (WebSocket Secure) を使用します。
• 認証: 安全な WebSocket 接続の場合、WebSocket サーバーへの接続を許可する前に、トークンベースの認証 (JWT など) を使用してユーザーを認証します。

---

9. WebSocket ライブラリの使用

React での WebSocket 統合を簡素化できるサードパーティ ライブラリがいくつかあります。

• socket.io-client: WebSocket 接続を抽象化し、イベントベースのメッセージングなどの追加機能を提供する、リアルタイム通信用に広く使用されているライブラリです。
• ReconnectingWebSocket: 自動再接続を提供する WebSocket のラッパー。

---

10.結論

WebSocket を React アプリケーションに統合することは、ライブ データの更新やインタラクティブなユーザー エクスペリエンスなどのリアルタイム機能を有効にする強力な方法です。 useState や useEffect などのフックを使用すると、WebSocket 接続の管理、メッセージの送受信、UI とリアルタイム データの同期を簡単に行うことができます。

---

以上がリアルタイム通信のための React への WebSocket の統合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。