現在の位置: ホーム> 最新記事一覧> WebSocketを使用してWebアプリケーションにリアルタイムチャット機能を実装する方法

WebSocketを使用してWebアプリケーションにリアルタイムチャット機能を実装する方法

M66 2025-07-14

概要

最新のWebアプリケーションでは、リアルタイムチャット機能が一般的な要件になりました。リアルタイムの要件を満たすために、従来のHTTPプロトコルは悪意がないようであり、WebSockingは全二重通信プロトコルとして、低遅延で高効率のリアルタイム通信ソリューションを提供できます。

WebSocketはHTML5に追加された新しいテクノロジーであり、クライアントとサーバー間の永続的な接続を可能にします。従来のHTTPプロトコルと比較して、リアルタイムのパフォーマンスが高いだけでなく、帯域幅の消費も削減するため、リアルタイムのチャットやその他のシナリオで広く使用されています。

フロントエンドコードの実装

まず、フロントエンドにWebSocketオブジェクトを作成し、サーバーを介して接続を確立する必要があります。これが簡単なフロントエンドコードの例です。

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

// 接続の確立が成功した後のコールバック関数
socket.onopen = function() {
    console.log('WebSocket接続が確立されています');
};

// メッセージを受信するときのコールバック関数
socket.onmessage = function(event) {
    const message = JSON.parse(event.data);
    console.log('メッセージを受け取りました：', message);
};

// 接続を閉じるときのコールバック関数
socket.onclose = function() {
    console.log('WebSocket接続が閉じられています');
};

// メッセージを送信するための関数
function sendMessage(message) {
    socket.send(JSON.stringify(message));
}

このコードは、WebSocketを介してサーバーとの通信を実装します。接続が成功すると、「Onopen」イベントがトリガーされます。サーバーメッセージが受信されると、「onmessage」イベントがトリガーされます。接続が閉じられると、「onclose」イベントがトリガーされます。

バックエンドコードの実装

次に、サーバー側のWebSocket処理ロジックを実装します。 node.jsの `ws`ライブラリを使用して、websocketサーバーを作成します。これがバックエンドコードの例です。

 const WebSocket = require('ws');

// 作成するWebSocketサーバ
const wss = new WebSocket.Server({ port: 8000 });

// 保存所有连接到サーバ的客户端
const clients = new Set();

// クライアント接続イベントを処理します
wss.on('connection', function(ws) {
    console.log('クライアントが接続されています');
    // クライアントをコレクションに追加します
    clients.add(ws);

    // 处理メッセージを受け取りました的事件
    ws.on('message', function(message) {
        console.log('メッセージを受け取りました：', message);
        // 接続されたすべてのクライアントにメッセージを送信します
        clients.forEach(function(client) {
            client.send(message);
        });
    });

    // 接続クロージングイベントを処理します
    ws.on('close', function() {
        console.log('クライアントは閉じられています');
        // クライアントをコレクションから削除します
        clients.delete(ws);
    });
});

サーバー側のコードは、「WS」ライブラリを介してWebSocketサーバーを作成し、ポート8000を聴きます。クライアント接続があるときはいつでも、クライアントがコレクションに追加され、メッセージが受信されると接続されたすべてのクライアントに転送されます。

開始とテスト

フロントエンドコードをindex.htmlファイルとして保存し、バックエンドコードをserver.jsファイルとして保存します。次のコマンドを実行して、WebSocketサーバーを起動します。

 node server.js

次に、ブラウザで `index.html`ファイルを開くと、ライブチャット関数の実装を確認できます。ブラウザの開発者ツールを使用して、接続とメッセージの送信と受信を観察できます。

要約します

上記の例を使用して、WebSocketプロトコルを使用してWebアプリケーションにリアルタイムチャット機能を実装する方法を示します。これは基本的な例ですが、リアルタイムアプリケーションでのWebSocketの利点を示しています。実際のニーズに応じて、開発者はメッセージストレージ、セキュリティ、ユーザー認証などの機能をさらに拡張できます。

WebSocketは、リアルタイムのビルドアプリケーションをより効率的かつ便利にし、チャットやコラボレーションツールなどのさまざまなシナリオに適しています。新しい機能を継続的に最適化して追加することにより、より複雑で完全に機能するライブチャットアプリケーションを構築できます。

関連内容