ホーム > プログラミング > Webチャットアプリを作る > 07.ユーザーの入室、退室を表示する。ユーザー数を表示する

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



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

解説

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

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

準備

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

サーバー側の処理

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


「server.js」 の「接続時の処理」の上部に、「ユーザー数」変数を追加します。


「server.js」 の「接続時の処理」の中の「切断時の処理」に、「接続ユーザー数の更新」処理、「退室ユーザー名」と「ユーザーの数」を、システムユーザーからのメッセージとして全員に送信する処理を追加します。


「server.js」 の「接続時の処理」の中の「入室時の処理」に、「接続ユーザー数の更新」処理、「入室ユーザー名」と「ユーザームの数」を、システムユーザーからのメッセージとして全員に送信する処理を追加します。


「server.js」 全体としては、以下のようにします。

動作確認

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


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

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

ダウンロード

サンプルプログラム

デモ

デモ(Google App Engine):https://my-chat-225715.appspot.com/
デモ(Heroku):https://mychat1234.herokuapp.com/

関連ページ

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


ご意見、ご感想、ご質問、ご要望等は、「コメントを投稿する」もしくは「ホーム > コンタクト」よりお願いいたします。
内容の誤り、誤字脱字、リンクミスなどの問題点を発見された場合には「コメントを投稿する」もしくは「ホーム > コンタクト」より連絡していただけると幸いです。


Copyright (c) 2005-2018 Nobuki HIRAMINE All rights reserved.