07．ユーザーの入室、退室を表示する。ユーザー数を表示する

ユーザーの入室/退室に際して、以下の機能を追加します。
・参加しているユーザーに対して、入室/退室ユーザーのニックネームの通知、表示。
・参加しているユーザーに対して、ユーザーの数の通知・表示。

解説

ユーザーの入室、退室の表示、および、ユーザー数の表示に関する処理は、以下です。

1. サーバー側で動作するプログラムの、入室時の処理で、ユーザー数を更新し、入室ユーザー名とユーザーの数をシステムユーザーからのメッセージとして全員に送信する。( socket.on('join',・・・) )
2. サーバー側で動作するプログラムの、退室時の処理で、ユーザー数を更新し、退室ユーザー名とユーザーの数をシステムユーザーからのメッセージとして全員に送信する。( socket.on('disconnect',・・・) )

準備

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

サーバー側の処理

「server.js」 の定数の定義部に、「システムユーザーのニックネーム」定数を追加します。
const SYSTEMNICKNAME = '**system**'

「server.js」 の「接続時の処理」の上部に、「ユーザー数」変数を追加します。
// グローバル変数 let iCountUser = 0; // ユーザー数

「server.js」 の「接続時の処理」の中の「切断時の処理」に、「接続ユーザー数の更新」処理、「退室ユーザー名」と「ユーザーの数」を、システムユーザーからのメッセージとして全員に送信する処理を追加します。
// 切断時の処理 // ・クライアントが切断したら、サーバー側では'disconnect'イベントが発生する socket.on( 'disconnect', () => { console.log( 'disconnect' ); if( strNickname ) { // ユーザー数の更新 iCountUser--; // メッセージオブジェクトに現在時刻を追加 const strNow = makeTimeString( new Date() ); // システムメッセージの作成 const objMessage = { strNickname: SYSTEMNICKNAME, strMessage: strNickname + ' left.' + " there are " + iCountUser + " participants", strDate: strNow } // 送信元含む全員に送信 io.emit( 'spread message', objMessage ); } } );

「server.js」 の「接続時の処理」の中の「入室時の処理」に、「接続ユーザー数の更新」処理、「入室ユーザー名」と「ユーザームの数」を、システムユーザーからのメッセージとして全員に送信する処理を追加します。
// 入室時の処理 // ・クライアント側のメッセージ送信時の「socket.emit( 'join', strNickname );」に対する処理 socket.on( 'join', ( strNickname_ ) => { console.log( 'joined :', strNickname_ ); // コネクションごとで固有のニックネームに設定 strNickname = strNickname_; // ユーザー数の更新 iCountUser++; // メッセージオブジェクトに現在時刻を追加 const strNow = makeTimeString( new Date() ); // システムメッセージの作成 const objMessage = { strNickname: SYSTEMNICKNAME, strMessage: strNickname + ' joined.' + " there are " + iCountUser + " participants", strDate: strNow } // 送信元含む全員に送信 io.emit( 'spread message', objMessage ); } );

「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; const SYSTEMNICKNAME = '**system**' // 関数 // 数字を２桁の文字列に変換 const toDoubleDigitString = ( num ) => { return ( "0" + num ).slice( -2 ); // slice( -2 )で後ろから２文字取り出す。 }; // 時刻文字列の作成（書式は「YY/DD/MM hh:mm ss」） const makeTimeString = ( time ) => { return toDoubleDigitString( time.getFullYear() ) + '/' + toDoubleDigitString( time.getMonth() + 1 ) + '/' + toDoubleDigitString( time.getDate() ) + ' ' + toDoubleDigitString( time.getHours() ) + ':' + toDoubleDigitString( time.getMinutes() ) + ' ' + toDoubleDigitString( time.getSeconds() ); } // グローバル変数 let iCountUser = 0; // ユーザー数 // 接続時の処理 // ・サーバーとクライアントの接続が確立すると、 // 　サーバー側で、'connection'イベント // 　クライアント側で、'connect'イベントが発生する io.on( 'connection', ( socket ) => { console.log( 'connection' ); let strNickname = ''; // コネクションごとで固有のニックネーム。イベントをまたいで使用される。 // 切断時の処理 // ・クライアントが切断したら、サーバー側では'disconnect'イベントが発生する socket.on( 'disconnect', () => { console.log( 'disconnect' ); if( strNickname ) { // ユーザー数の更新 iCountUser--; // メッセージオブジェクトに現在時刻を追加 const strNow = makeTimeString( new Date() ); // システムメッセージの作成 const objMessage = { strNickname: SYSTEMNICKNAME, strMessage: strNickname + ' left.' + " there are " + iCountUser + " participants", strDate: strNow } // 送信元含む全員に送信 io.emit( 'spread message', objMessage ); } } ); // 入室時の処理 // ・クライアント側のメッセージ送信時の「socket.emit( 'join', strNickname );」に対する処理 socket.on( 'join', ( strNickname_ ) => { console.log( 'joined :', strNickname_ ); // コネクションごとで固有のニックネームに設定 strNickname = strNickname_; // ユーザー数の更新 iCountUser++; // メッセージオブジェクトに現在時刻を追加 const strNow = makeTimeString( new Date() ); // システムメッセージの作成 const objMessage = { strNickname: SYSTEMNICKNAME, strMessage: strNickname + ' joined.' + " there are " + iCountUser + " participants", strDate: strNow } // 送信元含む全員に送信 io.emit( 'spread message', objMessage ); } ); // 新しいメッセージ受信時の処理 // ・クライアント側のメッセージ送信時の「socket.emit( 'new message', $( '#input_message' ).val() );」に対する処理 socket.on( 'new message', ( strMessage ) => { console.log( 'new message', strMessage ); // 現在時刻の文字列の作成 const strNow = makeTimeString( new Date() ); // メッセージオブジェクトの作成 const objMessage = { strNickname: strNickname, strMessage: strMessage, strDate: strNow } // 送信元含む全員に送信 //io.emit( 'spread message', strMessage ); io.emit( 'spread message', objMessage ); } ); } ); // 公開フォルダの指定 app.use( express.static( __dirname + '/public' ) ); // サーバーの起動 server.listen( PORT, () => { console.log( 'Server on port %d', PORT ); } );

動作確認

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

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


メッセージを送信すると、送信したメッセージが、両方のブラウザに、即座に、リスト表示されます。
入室、退室に際して、システムメッセージとして、入退室者ニックネーム、現在のユーザー数が表示されます。

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

ダウンロード

サンプルプログラム

デモ

デモ（Google App Engine）：https://my-chat-225715.appspot.com/
デモ（Render.com）：https://my-chat-hi4t.onrender.com/

関連ページ

前項目：06．メッセージに、発信者名を表示する