JavaScript、Node.js、Socket.IO でチャットアプリケーションを作成する

JavaScript、Node.js、Socket.IO を用いた「送信者を除いたすべてのクライアントへ応答を送信する」プログラミング

必要なもの

• Node.js がインストールされているコンピュータ
• テキストエディタ

手順

1. プロジェクトの作成

   npm init -y
   

2. Socket.IO をインストールします。

   npm install socket.io
   

3. サーバーの作成

   server.js という名前のファイルを作成し、以下のコードを追加します。

   const io = require('socket.io')(3000);
   
   io.on('connection', (socket) => {
       socket.on('message', (message) => {
           console.log(`Received message: ${message}`);
   
           // 送信者を除いたすべてのクライアントへ応答を送信
           socket.broadcast.emit('message', `[Server]: ${message}`);
       });
   });
   

   このコードは、3000 番ポートで Socket.IO サーバーを起動します。クライアントが接続すると、connection イベントが発生し、message イベントリスナーが登録されます。message イベントが発生すると、受信したメッセージがコンソールに出力され、socket.broadcast.emit を使って送信者を除いたすべてのクライアントへ応答メッセージが送信されます。

4. クライアントの作成

   const io = require('socket.io')(3000);
   
   io.on('connect', () => {
       console.log('Connected to server');
   
       // メッセージを送信
       io.emit('message', 'Hello from client!');
   
       // 応答を受信
       io.on('message', (message) => {
           console.log(`Received message: ${message}`);
       });
   });
   

   このコードは、3000 番ポートで実行されている Socket.IO サーバーに接続します。接続が成功すると、コンソールにメッセージが出力され、io.emit を使ってサーバーへメッセージが送信されます。message イベントリスナーは、サーバーから送信された応答メッセージを受信してコンソールに出力します。

5. 実行

   以下のコマンドを実行してサーバーを起動します。

   node server.js
   

   別のターミナルで以下のコマンドを実行してクライアントを起動します。

   node client.js
   

   クライアントからメッセージを送信すると、サーバーがコンソールにメッセージを出力し、送信者を除いたすべてのクライアントへ応答メッセージを送信します。クライアントはサーバーからの応答メッセージを受信してコンソールに出力します。

このチュートリアルでは、JavaScript、Node.js、Socket.IO を使って、送信者を除いたすべてのクライアントへ応答を送信する方法を解説しました。この技術は、チャットアプリケーションやリアルタイムコラボレーションアプリケーションなどの開発に役立ちます。

送信者を除いたすべてのクライアントへ応答を送信する サンプルコード

server.js

const io = require('socket.io')(3000);

io.on('connection', (socket) => {
    socket.on('message', (message) => {
        console.log(`Received message: ${message}`);

        // 送信者を除いたすべてのクライアントへ応答を送信
        socket.broadcast.emit('message', `[Server]: ${message}`);
    });
});

client.js

const io = require('socket.io')(3000);

io.on('connect', () => {
    console.log('Connected to server');

    // メッセージを送信
    io.emit('message', 'Hello from client!');

    // 応答を受信
    io.on('message', (message) => {
        console.log(`Received message: ${message}`);
    });
});

解説

1. require('socket.io') で Socket.IO モジュールをインポートします。
2. io = require('socket.io')(3000); で 3000 番ポートで Socket.IO サーバーを起動します。
3. io.on('connection', (socket) => {...}) でクライアント接続イベントリスナーを登録します。
4. socket.on('message', (message) => {...}) で message イベントリスナーを登録します。
5. console.log(Received message: ${message}); で受信したメッセージをコンソールに出力します。
6. socket.broadcast.emit('message',[Server]: ${message}); で 送信者を除いたすべてのクライアントへ [Server]: ${message} というメッセージを送信します。

1. console.log('Connected to server'); でサーバー接続完了メッセージをコンソールに出力します。
2. io.emit('message', 'Hello from client!'); で Hello from client! というメッセージをサーバーへ送信します。

このコードを実行すると、以下のようになります。

1. クライアントが起動し、サーバーに接続します。
2. サーバーがコンソールに Connected to server と出力します。
3. クライアントが Hello from client! というメッセージをサーバーへ送信します。
4. サーバーがコンソールに Received message: Hello from client! と出力します。
5. サーバーが [Server]: Hello from client! というメッセージをすべてのクライアントへ送信します。

このコードは、基本的なチャットアプリケーションの例です。このコードを拡張して、もっと複雑なアプリケーションを作成することができます。

送信者を除いたすべてのクライアントへ応答を送信する 他の方法

io.volatile.emit は、socket.broadcast.emit と似ていますが、送信前にクライアントが接続を切断しているかどうかを確認します。接続が切断されているクライアントにはメッセージが送信されません。これは、メッセージの配信の信頼性を高めたい場合に役立ちます。

socket.on('message', (message) => {
    console.log(`Received message: ${message}`);

    // 送信者を除いたすべてのクライアントへ応答を送信
    io.volatile.emit('message', `[Server]: ${message}`);
});

ネームスペースとルームを使用すると、よりきめ細かな制御が可能になります。特定のネームスペースやルームに属するクライアントのみへメッセージを送信することができます。

例：ネームスペースを使用する

1. サーバー側で、ネームスペースを作成します。

const io = require('socket.io')(3000);

const chatNamespace = io.of('/chat');

chatNamespace.on('connection', (socket) => {
    // ...
});

const io = require('socket.io')(3000);

const chatNamespace = io.of('/chat');

chatNamespace.on('connect', () => {
    // ...
});

1. ネームスペース内のすべてのクライアントへメッセージを送信します。

chatNamespace.emit('message', `[Server]: Hello from server!`);

const io = require('socket.io')(3000);

io.on('connection', (socket) => {
    socket.join('chatroom');

    // ...
});

const io = require('socket.io')(3000);

io.on('connect', () => {
    socket.join('chatroom');

    // ...
});

io.to('chatroom').emit('message', `[Server]: Hello from server!`);

これらの方法は、より複雑なアプリケーションや、メッセージ配信のきめ細かな制御が必要な場合に役立ちます。

いずれの方法を選択する場合も、アプリケーションの要件とニーズを考慮することが重要です。