WebSocket と Socket.IO: Node.js とのリアルタイム通信

チャット アプリ、オンライン ゲーム、ライブ コラボレーション ツールなどの最新のアプリケーションでは、リアルタイム コミュニケーションが不可欠です。 WebSocket は、単一の TCP 接続上で全二重通信チャネルを提供し、クライアントとサーバーの間でリアルタイムでデータを交換できるようにします。この記事では、WebSocket とその使用例、および WebSocket を Node.js に実装する方法について説明します。さらに、WebSocket 通信を簡素化する人気のあるライブラリである Socket.IO について、実際の例とともに詳しく説明します。

この記事では以下について説明します:

1. WebSocket とは何ですか?
2. WebSocket と HTTP: 主な違い。
3. Node.js で WebSocket サーバーをセットアップします。
4. Socket.IO とは何ですか?なぜそれを使用する必要がありますか?
5. Socket.IO を使用したリアルタイム チャット アプリケーションのセットアップ
6. WebSocket と Socket.IO の使用例。
7. WebSocket 接続の保護。

WebSocket とは何ですか?

WebSocket は、サーバーとクライアントがいつでもデータを送信できるようにする双方向通信プロトコルを提供します。クライアントがすべての通信を開始し、サーバーにデータを要求する HTTP とは異なり、WebSocket では永続的な接続が可能になり、接続を再確立することなく双方が継続的にデータを交換できます。

主な特徴:

• 低レイテンシ: WebSocket は、接続が開いたままになるため、HTTP に比べてオーバーヘッドが低く、レイテンシが短縮されます。
• 全二重: サーバーとクライアントの両方が同時にデータを送受信できます。
• 永続的な接続: WebSocket 接続は、一度確立されると、リクエストごとに新しい接続を開く HTTP とは異なり、開いたままになります。

WebSocket と HTTP: 主な違い

どちらのプロトコルも TCP 上で実行されますが、次のような大きな違いがあります。

Feature	WebSockets	HTTP
Connection	Persistent, full-duplex	Stateless, new connection for each request
Directionality	Bi-directional (server and client communicate)	Client to server only (server responds)
Overhead	Low after connection establishment	Higher due to headers with every request
Use Case	Real-time applications (chats, games)	Traditional websites, API requests

機能 WebSocket HTTP 接続 永続的、全二重 ステートレス、リクエストごとに新しい接続 方向性 双方向 (サーバーとクライアントの通信) クライアントからサーバーのみ (サーバーは応答します) オーバーヘッド 接続確立後のロー すべてのリクエストのヘッダーにより高くなる 使用例 リアルタイム アプリケーション (チャット、ゲーム) 従来のウェブサイト、API リクエスト テーブル>

Node.js での WebSocket サーバーのセットアップ

WebSocket サーバーを作成するために、Node.js は WebSocket サーバーを作成してクライアントとの通信を確立できる組み込みの ws ライブラリを提供します。

インストール:

npm install ws

WebSocket サーバーの例:

const WebSocket = require('ws');

// Create a WebSocket server on port 8080
const wss = new WebSocket.Server({ port: 8080 });

// Listen for incoming connections
wss.on('connection', (ws) => {
    console.log('Client connected');

    // Send a message to the client
    ws.send('Welcome to the WebSocket server!');

    // Listen for messages from the client
    ws.on('message', (message) => {
        console.log(`Received: ${message}`);
        ws.send(`Echo: ${message}`);
    });

    // Handle connection closure
    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

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

この例では:

• ポート 8080 をリッスンする WebSocket サーバーが作成されます。
• クライアントが接続すると、サーバーはウェルカム メッセージを送信し、クライアントからのメッセージを待機します。
• サーバーは、クライアントから受信したメッセージのエコーで応答します。

クライアント側 WebSocket:

クライアント側では、JavaScript を使用して WebSocket サーバーに接続できます。

const socket = new WebSocket('ws://localhost:8080');

// Event listener for when the connection is established
socket.addEventListener('open', (event) => {
    socket.send('Hello Server!');
});

// Listen for messages from the server
socket.addEventListener('message', (event) => {
    console.log(`Message from server: ${event.data}`);
});

Socket.IO とは何ですか? なぜそれを使用する必要があるのですか?

Socket.IO は、以下を提供することで WebSocket 通信を容易にするライブラリです。

• WebSocket がサポートされていない場合は、ロングポーリングに自動的にフォールバックします。
• 組み込みの再接続およびエラー処理メカニズム。
• ルームとネームスペースのサポート。これにより、セグメント化されたコミュニケーション チャネルが可能になります。

インストール:

npm install socket.io

Socket.IO サーバーのセットアップ:

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

// Listen for incoming connections
io.on('connection', (socket) => {
    console.log('New client connected');

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

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

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

このコード内:

• 基本的な Express サーバーが作成され、リアルタイム通信を処理するために Socket.IO が統合されます。
• サーバーはクライアント接続をリッスンし、送信されたメッセージに応答します。

Socket.IO を使用したリアルタイム チャット アプリケーションのセットアップ

Socket.IO を使用してシンプルなリアルタイム チャット アプリケーションを構築して、その能力を実証してみましょう。

サーバーコード:

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

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

    // Broadcast when a user sends a message
    socket.on('chat message', (msg) => {
        io.emit('chat message', msg);
    });

    socket.on('disconnect', () => {
        console.log('User disconnected');
    });
});

server.listen(3000, () => {
    console.log('Listening on *:3000');
});

クライアント コード (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Socket.IO Chat</title>
    <script src="/socket.io/socket.io.js"></script>
</head>
<body>
    <h1>Real-time Chat</h1>
    <ul id="messages"></ul>
    <form id="chatForm">
        <input id="message" autocomplete="off" /><button>Send</button>
    </form>

    <script>
        const socket = io();

        // Listen for incoming chat messages
        socket.on('chat message', (msg) => {
            const li = document.createElement('li');
            li.textContent = msg;
            document.getElementById('messages').appendChild(li);
        });

        // Send chat message
        const form = document.getElementById('chatForm');
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            const message = document.getElementById('message').value;
            socket.emit('chat message', message);
            document.getElementById('message').value = '';
        });
    </script>
</body>
</html>

このシンプルなチャット アプリケーションでは、複数のユーザーが接続してリアルタイムでメッセージを交換できます。 1 人のユーザーが送信したメッセージは、サーバーに接続している他のすべてのユーザーにブロードキャストされます。

WebSocket と Socket.IO の使用例

WebSocket と Socket.IO は、次のようなリアルタイム通信を必要とするシナリオに最適です。

• チャット アプリケーション: WebSocket または Socket.IO によってリアルタイム メッセージングが可能になります。
• オンライン ゲーム: プレーヤーがリアルタイムで更新を確認する必要があるマルチプレイヤー オンライン ゲーム。
• 共同編集: Google ドキュメントなどのアプリケーションは WebSocket を使用して、複数のユーザーがドキュメントを同時に編集できるようにします。
• ライブ ダッシュボード: 株式市場、スポーツのスコアなどのダッシュボードのリアルタイム更新

WebSocket接続の保護

HTTP と同様に、WebSocket 接続も機密データを保護するためにセキュリティで保護される必要があります。これは、wss:// (WebSocket Secure) を使用して実行できます。これは、基本的に TLS (Transport Layer Security) 上の WebSocket です。

TLS を使用して WebSocket を保護する手順:

1. 認証局 (CA) から SSL 証明書を取得します。
2. WebSocket サーバーを更新して、ws:// ではなく wss:// でリッスンするようにします。
3. NGINX または別のリバース プロキシを構成して、SSL を終了し、トラフィックを WebSocket サーバーに転送します。

NGINX 構成の例:

server {
    listen 443 ssl;
    server_name yourdomain.com;

    ssl_certificate /etc/ssl/certs/yourdomain.crt;
    ssl_certificate_key /etc/ssl/private/yourdomain.key;

    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

これにより、すべての WebSocket トラフィックが確実に暗号化され、盗聴や改ざんから保護されます。

結論

WebSocket と Socket.IO により、クライアントとサーバー間のリアルタイム通信が可能になります。これは、即時更新を必要とする最新のアプリケーションにとって不可欠です。 WebSocket または Socket.IO ベースのソリューションを実装すると、チャット システム、共同作業ツール、ライブ ダッシュボードなど、応答性が高く効率的なアプリケーションを構築できます。

この記事では、WebSocket の基本、Socket.IO を使用する利点、Node.js でリアルタイム アプリケーションを作成する方法について説明しました。さらに、WebSocket 接続を保護して送信中のデータの安全性を確保する方法も検討しました。

これらのテクノロジーをマスターすると、強力でインタラクティブでスケーラブルな Web アプリケーションを構築するためのさまざまな可能性が開かれます。

以上がWebSocket と Socket.IO: Node.js とのリアルタイム通信の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。