現代の Web アプリケーションでは、チャット システム、ライブ アップデート、共同編集、通知など、リアルタイムの通信が必要になることがよくあります。従来の HTTP 通信は、要求と応答のパターンに依存しているため、リアルタイム アプリケーションには不十分です。ここで WebSocket が登場し、サーバーとクライアント間の全二重通信が可能になります。

この記事では、次のことを検討します:

1. WebSocket とは何か、そしてなぜ WebSocket がリアルタイム アプリケーションに不可欠であるのか。
2. Node.js で WebSocket を実装する方法
3. Socket.IO を使用して WebSocket 実装を簡素化します。
4. 実際の使用例。

WebSocketとは何ですか?

WebSocket は、単一の TCP 接続上で全二重通信チャネルを提供するプロトコルです。リクエスト/レスポンスベースであり、新しい接続を継続的に確立する際にオーバーヘッドがある従来の HTTP リクエストとは異なり、WebSocket では 永続的 通信が可能です。

主な特徴:

• 全二重通信: クライアントとサーバーの両方は、お互いを待たずにいつでもメッセージを送信できます。
• 待ち時間の短縮: WebSocket により、接続を常に開閉する必要がなくなり、待ち時間が短縮され、リアルタイム アプリのパフォーマンスが向上します。
• イベントドリブン: 両側でデータをプッシュできるため、チャット、ゲーム、リアルタイム通知などの動的なアプリケーションに最適です。

Node.js での WebSocket の実装

ステップ 1: ws WebSocket ライブラリのインストール

Node.js には WebSocket が組み込まれていないため、ライブラリが必要です。 Node.js の最も人気のある WebSocket ライブラリの 1 つは、ws.
です。

npm install ws

ステップ 2: WebSocket サーバーの作成

これは、ws ライブラリを使用した単純な WebSocket サーバーです:

const WebSocket = require('ws');

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

wss.on('connection', (ws) => {
    console.log('Client connected');

    // Listen for messages from the client
    ws.on('message', (message) => {
        console.log('Received:', message);
        // Respond to the client
        ws.send(`Hello, you sent -> ${message}`);
    });

    // On client disconnect
    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

console.log('WebSocket server running on ws://localhost:8080');

この例では:

• ポート 8080 に WebSocket サーバーを作成します。
• クライアントが接続すると、接続イベントがトリガーされます。
• サーバーはクライアントからのメッセージをリッスンし、確認メッセージで応答します。
• クライアントが切断されると、メッセージが記録されます。

ステップ 3: WebSocket クライアントの作成

ブラウザで JavaScript を使用して WebSocket クライアントを作成できます:

    
WebSocket Example
    Send Message
    

• WebSocket 接続が開くと、クライアントは成功メッセージを記録します。
• ボタンをクリックするとサーバーにメッセージが送信され、サーバーの応答が表示されます。

出力：

1. クライアントログ:

   Connected to WebSocket server
   Message from server: Hello, you sent -> Hello from client

1. サーバーログ:

   Client connected
   Received: Hello from client

Socket.IO: 簡素化された WebSocket

WebSocket は強力ですが、再接続、ブロードキャスト、フォールバックの管理 (ロング ポーリングなど) などのイベントを処理するには、ある程度の手動作業が必要です。 Socket.IO は、次のような機能を提供することでリアルタイム通信を簡素化します。

• 自動再接続。
• 複数のクライアントにイベントをブロードキャストします。
• WebSocket がサポートされていない場合はポーリングにフォールバックします。

ステップ 1: Socket.IO のインストール

npm install socket.io

ステップ 2: Socket.IO サーバーの作成

const http = require('http');
const socketio = require('socket.io');

// Create an HTTP server
const server = http.createServer();
const io = socketio(server);

io.on('connection', (socket) => {
    console.log('Client connected');

    // Listen for messages from the client
    socket.on('message', (msg) => {
        console.log('Received message:', msg);
        socket.emit('message', `Server received: ${msg}`);
    });

    // On client disconnect
    socket.on('disconnect', () => {
        console.log('Client disconnected');
    });
});

server.listen(3000, () => {
    console.log('Socket.IO server running on http://localhost:3000');
});

ここ：

• Socket.IO を使用して、接続と受信メッセージをリッスンするサーバーを作成します。
• socket.emit は、クライアントにメッセージを送り返すために使用されます。

ステップ 3: Socket.IO クライアントの作成

    
Socket.IO Example
    Send Message
    

この例では、Socket.IO クライアントがサーバーへの接続を自動的に処理し、双方向通信を可能にします。

出力：

1. クライアントログ:

   Connected to server
   Message from server: Server received: Hello from client

1. サーバーログ:

   Client connected
   Received message: Hello from client

WebSocket と Socket.IO の使用例

4.1 リアルタイムチャットアプリケーション

問題: メッセージング プラットフォームでは、ユーザー間のリアルタイム通信を可能にする必要があります。

解決策: WebSocket (または Socket.IO) はイベント駆動型の永続的な接続を提供し、ユーザーが遅延なくリアルタイムでメッセージを送受信できるようにします。

4.2 リアルタイムの共同ドキュメント編集

問題: ドキュメントで共同作業しているユーザーは、他のユーザーが加えた変更を即座に確認する必要があります。

解決策: WebSocket を使用すると、変更がリアルタイムですべてのクライアントにプッシュされ、すべてのユーザー間でドキュメントの同期が確保されます。

4.3 Web アプリケーションでの通知

問題: Web アプリケーションは、新しいメッセージ、更新、アラートなどのイベントをユーザーに通知する必要があります。

解決策: WebSocket を使用すると、イベントが発生するとすぐにサーバーがクライアントに通知をプッシュできるようになり、ユーザー エンゲージメントが向上します。

WebSocket と Socket.IO のスケーリング

WebSocket と Socket.IO のスケーリングは、永続的な性質のため困難です。各 WebSocket 接続は存続期間の長い TCP 接続であり、接続数が増えるとリソースを大量に消費する可能性があります。

スケーリングのための一般的な戦略:

1. 水平スケーリング: 複数のサーバー間で WebSocket トラフィックの負荷を分散します。
2. スティッキー セッション: クライアントからのすべての WebSocket 接続が同じサーバーにルーティングされるようにします。
3. Redis for Pub/Sub: サーバー間でのイベントのパブリッシュとサブスクリプションに Redis を使用し、すべてのクライアントがリアルタイムの更新を受信できるようにします。

npm install socket.io-redis

Redis を使用するように Socket.IO を構成する例を次に示します:

const io = require('socket.io')(server);
const redisAdapter = require('socket.io-redis');
io.adapter(redisAdapter({ host: 'localhost', port: 6379 }));

結論

WebSocket と Socket.IO は、最新の Web アプリケーションのリアルタイム通信に不可欠なテクノロジです。 WebSocket は全二重通信用の低レベル プロトコルを提供しますが、Socket.IO は実装を簡素化し、自動再接続やブロードキャストなどの追加機能を提供します。どちらのテクノロジーも、チャット アプリケーションから共同作業ツールに至るまで、現実世界に重要なアプリケーションを持っています。

次の記事では、Node.js ストリームについて詳しく説明し、スケ​​ーラビリティとパフォーマンスに焦点を当てながら、大規模なデータを効率的に処理する方法を探っていきます。