04．サーバーからクライアントへメッセージの拡散の処理を作る

1人のクライアントからサーバーへ送信されたメッセージを、サーバーに接続しているすべてのクライアントへ、拡散する処理を作成します。

解説

サーバーからクライアントへメッセージの拡散に関する処理は、以下です。

サーバー側で動作するプログラムに、メッセージを全員に送信する処理を追加する。( io.emit( 'spread message',・・・) )
クライアント側で動作するプログラムに、メッセージを受信する処理を追加する。( socket.on('spread message',・・・) )
クライアント側で表示させるウェブページに、受信メッセージを表示するリストを追加する。（ <ul id="message_list"></ul> )

準備

03．を実施していない場合は、まず、03．を実施します。

サーバー側の処理

「server.js」の「接続時の処理」の中に、「送信元含む全員に送信」処理を追加します。
// 送信元含む全員に送信 io.emit( 'spread message', strMessage );

「server.js」全体としては、以下のようにします。
'use strict'; // モジュール const express = require( 'express' ); const http = require( 'http' ); const socketIO = require( 'socket.io' ); // オブジェクト const app = express(); const server = http.Server( app ); const io = socketIO( server ); // 定数 const PORT = process.env.PORT || 1337; // 接続時の処理 // ・サーバーとクライアントの接続が確立すると、 // 　サーバー側で、'connection'イベント // 　クライアント側で、'connect'イベントが発生する io.on( 'connection', ( socket ) => { console.log( 'connection' ); // 切断時の処理 // ・クライアントが切断したら、サーバー側では'disconnect'イベントが発生する socket.on( 'disconnect', () => { console.log( 'disconnect' ); } ); // 新しいメッセージ受信時の処理 // ・クライアント側のメッセージ送信時の「socket.emit( 'new message', $( '#input_message' ).val() );」に対する処理 socket.on( 'new message', ( strMessage ) => { console.log( 'new message', strMessage ); // 送信元含む全員に送信 io.emit( 'spread message', strMessage ); } ); } ); // 公開フォルダの指定 app.use( express.static( __dirname + '/public' ) ); // サーバーの起動 server.listen( PORT, () => { console.log( 'Server on port %d', PORT ); } );

クライアント側の処理

「public/client.js」の末尾に、以下の「サーバーからのメッセージ拡散に対する処理」を追加します。
// サーバーからのメッセージ拡散に対する処理 // ・サーバー側のメッセージ拡散時の「io.emit( 'spread message', strMessage );」に対する処理 socket.on( 'spread message', ( strMessage ) => { console.log( 'spread message :', strMessage ); // 拡散されたメッセージをメッセージリストに追加 const li_element = $( '<li>' ).text( strMessage ); $( '#message_list' ).prepend( li_element ); // リストの一番上に追加 //$( '#message_list' ).append( li_element ); // リストの一番下に追加 } );

「public/client.html」全体としては、以下のようにします。
// クライアントからサーバーへの接続要求 const socket = io.connect(); // 接続時の処理 // ・サーバーとクライアントの接続が確立すると、 // 　サーバー側で、'connection'イベント // 　クライアント側で、'connect'イベントが発生する socket.on( 'connect', () => { console.log( 'connect' ); } ); // 「Send」ボタンを押したときの処理 $( 'form' ).submit( () => { console.log( '#input_message :', $( '#input_message' ).val() ); if( $( '#input_message' ).val() ) { // サーバーに、イベント名'new message' で入力テキストを送信 socket.emit( 'new message', $( '#input_message' ).val() ); $( '#input_message' ).val( '' ); // テキストボックスを空に。 } return false; // フォーム送信はしない } ); // サーバーからのメッセージ拡散に対する処理 // ・サーバー側のメッセージ拡散時の「io.emit( 'spread message', strMessage );」に対する処理 socket.on( 'spread message', ( strMessage ) => { console.log( 'spread message :', strMessage ); // 拡散されたメッセージをメッセージリストに追加 const li_element = $( '<li>' ).text( strMessage ); $( '#message_list' ).prepend( li_element ); // リストの一番上に追加 //$( '#message_list' ).append( li_element ); // リストの一番下に追加 } );

拡散メッセージのリスト表示

「public/index.html」の、「body」部のメッセージ入力フォームの下に、以下のメッセージリストを追加します。
<ul id="message_list"></ul>

「public/index.html」全体としては、以下のようにします。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>My Chat</title> </head> <body> <h1>My Chat</h1> <form action=""> <input type="text" id="input_message" autocomplete="off" /><button type="submit">Send</button> </form> <ul id="message_list"></ul> <script src="/socket.io/socket.io.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="client.js"></script> </body> </html>

動作確認

サーバーを起動します。
「MyChat」フォルダで、下記コマンドを実行します。
node server.js

ブラウザから、「localhost:1337」にアクセスします。

例えば、「aiueo」と「あいうえお」というメッセージをフォームに入力し、「Send」ボタンを押します。

送信したメッセージが、リスト表示されます。

Chrome のデベロッパーツールの「Console」に、
「connect」
に続いて、
「#input_message : aiueo」
「spread message : aiueo」
「#input_message : あいうえお」
「spread message : あいうえお」
と表示されます。

サーバー側では、
「connection」
に続いて、
「new message aiueo」
「new message あいうえお」
と表示されます。

動作確認（２つの目のクライアントから接続）

ブラウザを別に立ち上げ、「localhost:1337」にアクセスします。

別に立ち上げたブラウザから、例えば、「abc」と「xyz」というメッセージをフォームに入力し、「Send」ボタンを押します。

送信したメッセージが、両方のブラウザに、即座に、リスト表示されます。

サーバー側では、
「connection」
「new message aiueo」
「new message あいうえお」
に続いて、
「connection」
「new message abc」
「new message xyz」
と表示されます。

起動したサーバーは、「Ctrl + C」で終了します。

ダウンロード

サンプルプログラム