Node.jsとReactを使用したWebSocketの実装方法

WebSocketは、クライアントとサーバー間で双方向の通信を可能にするプロトコルです。通常のHTTPリクエストとは異なり、WebSocketは接続を維持し、リアルタイムなデータの送受信ができます。

まず、Node.jsでWebSocketサーバーを作成する方法を見てみましょう。以下は、wsパッケージを使用してWebSocketサーバーを作成する簡単な例です。

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    console.log('Received: ' + message);
    ws.send('Server received: ' + message);
  });
  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

上記のコードでは、WebSocketサーバーをポート8080で起動し、クライアントからのメッセージを受信して返信します。

次に、ReactでWebSocketクライアントを実装する方法を見てみましょう。以下は、websocketパッケージを使用してWebSocketクライアントを作成する例です。

import React, { useEffect } from 'react';
import WebSocket from 'websocket';
const MyComponent = () => {
  useEffect(() => {
    const client = new WebSocket.client();
    client.connect('ws://localhost:8080');
    client.on('connect', () => {
      console.log('Connected to server');
      client.send('Hello Server!');
    });
    client.on('message', (message) => {
      console.log('Received: ' + message.utf8Data);
    });
    client.on('close', () => {
      console.log('Disconnected from server');
    });
    return () => {
      client.close();
    };
  }, []);
  return <div>WebSocket Example</div>;
};
export default MyComponent;

上記のコードでは、Reactコンポーネント内でWebSocketクライアントを作成し、サーバーに接続してデータを送受信します。コンポーネントがマウントされたときに接続が確立され、コンポーネントがアンマウントされると接続が閉じられます。

これらのコード例を参考にしながら、Node.jsとReactでWebSocketを実装する方法を理解できるはずです。また、WebSocketのオプションやセキュリティについても学ぶことをおすすめします。