17. チャットルームに分かれてチャット

前項までで作成したビデオチャットは、サイトにアクセスした人全員が同じチャットに参加しました。
本項では、チャットルームに分かれてチャットができるようにします。

解説

Socket.IO を利用すると「チャットルームに分かれてチャット」を簡単に実現することができます。

指定したルーム名のルームに入室済みの人とシグナリングを行い、ルーム外の人とはシグナリングを行わないようにします。
Socket.IO のルーム機能を活用します。
チャットに参加するときに、シグナリングサーバーでの処理として、指定したルーム名のルームに入室し、"join"を同じルームに入室済みの人に送信するようにします。

準備

「16. 複数人でのビデオチャット」を実施していない場合は、実施します。

サーバー側の処理

「server.js」ファイルを編集します。

チャット参加時の処理として、「ルームへの入室の処理」を追加し、「"join"を送信元以外の全員に送信」していた処理を、「"join"を同じルームの送信元以外の全員に送信」する処理に変更します。
チャット離脱の処理を追加します。処理としては、「ルームから退室」処理を記述します。

// ビデオチャット参加時の処理 socket.on( "join", ( objData ) => { console.log( "join : ", socket.id ); // ルーム名 let strRoomName = objData.roomname; if( !strRoomName ) { strRoomName = "**********NoName**********" } console.log( "- Room name = ", strRoomName ); // ルームへの入室 socket.join( strRoomName ); // ルーム名をsocketオブジェクトのメンバーに追加 socket.strRoomName = strRoomName; // 「join」を同じルームの送信元以外の全員に送信 // 送信元SocketIDを送信データに付与し、同じルームの送信元以外の全員に送信 socket.broadcast.to( strRoomName ).emit( "signaling", { from: socket.id, type: "join" } ); } ); // ビデオチャット離脱時の処理 socket.on( "leave", ( objData ) => { console.log( "leave : ", socket.id ); if( "strRoomName" in socket ) { console.log( "- Room name = ", socket.strRoomName ); // ルームからの退室 socket.leave( socket.strRoomName ); // socketオブジェクトのルーム名のクリア socket.strRoomName = ""; } } );

ウェブページ

「public/index.html」ファイルを編集します。

参加画面のユーザー名入力ボックスの下に、ルーム名入力テキストボックスを追加します。
チャット画面のマイクのOn/Offのチェックボックスの下に、ルーム名表示テキストボックスを追加します。
前項でコメントアウトした「リモートのユーザー名、映像、音声のHTML要素」を削除します。

「public/index.html」の内容を以下のようにします。
<!DOCTYPE html> （・・・略・・・） <body style="display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0;"> （・・・略・・・） <div style="flex: 1;"> <div id="div_join_screen">  <form action="" onsubmit="onsubmitButton_Join(); return false;" style="text-align: center; width: 100%;"> User name ( Nick name )<br /> <input type="text" id="input_username" placeholder="Enter User name" autofocus><br /><br /> Room name - optional<br /> <input type="text" id="input_roomname" placeholder="Enter Room name"><br /><br /> <input type="submit" value="Join" /> </form> </div> <div id="div_chat_screen" style="margin: 8px; display: none;"> <input type="checkbox" id="checkbox_camera" onclick="onclickCheckbox_CameraMicrophone()">Camera <input type="checkbox" id="checkbox_microphone" onclick="onclickCheckbox_CameraMicrophone()">Microphone <br /> Room Name : <input type="text" id="text_roomname" readonly="readonly"> <br /> <div id="div_userinfo" style="display: flex; flex-wrap: wrap"> <div border="1px solid black"><input type="text" id="text_username" readonly="readonly"><br /><video id="video_local" width="320" height="240" style="border: 1px solid black;" autoplay></video></div> </div> （・・・略・・・） </body> </html>

クライアント側の処理

「public/client.js」ファイルを編集します。

グローバル変数

「グローバル変数」コード部に、以下のグローバル変数の定義を追加します。

「ルーム名を入力」するためのテキストボックス
「ルーム名を表示」するためのテキストボックス

// ↓↓↓グローバル変数↓↓↓ const g_elementDivJoinScreen = document.getElementById( "div_join_screen" ); const g_elementDivChatScreen = document.getElementById( "div_chat_screen" ); const g_elementInputUserName = document.getElementById( "input_username" ); const g_elementInputRoomName = document.getElementById( "input_roomname" ); const g_elementCheckboxCamera = document.getElementById( "checkbox_camera" ); const g_elementCheckboxMicrophone = document.getElementById( "checkbox_microphone" ); const g_elementTextRoomName = document.getElementById( "text_roomname" ); （・・・略・・・）

「Join」ボタンを押すと呼ばれる関数

「UIから呼ばれる関数」部の「「Join」ボタンを押すと呼ばれる関数」の処理を変更します。

入力されたルーム名を取得します。
ルーム名表示用のテキストボックスにルーム名を設定します。
送信データにルーム名を追加します。

// 「Join」ボタンを押すと呼ばれる関数 function onsubmitButton_Join() { （・・・略・・・） // ユーザー名（・・・略・・・） g_elementTextUserName.value = strInputUserName; // ルーム名 let strRoomName = g_elementInputRoomName.value; console.log( "- Room name :", strRoomName ); g_elementTextRoomName.value = strRoomName; // サーバーに"join"を送信 console.log( "- Send 'Join' to server" ); g_socket.emit( "join", { roomname: strRoomName } ); // 画面の切り替え（・・・略・・・） }

「Leave Chat.」ボタンを押すと呼ばれる関数

チャットからの離脱のときには、ルームからの退室を行うために、サーバーにチャットの離脱の通知を送ります。

「UIから呼ばれる関数」部の「「Leave Chat.」ボタンを押すと呼ばれる関数」の処理を変更します。

「サーバーに"leave"を送信」の処理を追加します。

// 「Leave Chat.」ボタンを押すと呼ばれる関数 function onclickButton_LeaveChat() { （・・・略・・・） // サーバーに"leave"を送信 console.log( "- Send 'Leave' to server" ); g_socket.emit( "leave", "" ); // ユーザー名のクリア（・・・略・・・） }

コメントアウトの削除

前項でコメントアウトしたコードを削除します。

動作確認

node でサーバーを起動します。

ブラウザを２つ立ち上げ、それぞれのブラウザで「localhost:1337」にアクセスします。

ユーザー名とルーム名を入力する参加画面が表示されます。

同じルーム名を入力した２つのブラウザ間でビデオチャット

インターネットに公開されたサーバーでプログラムを動作させ、同じルーム名を入力した２つの端末間でビデオチャット