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

チャットルームに分かれてチャットができるようにします。

解説

チャットルームに分かれてチャットができるように、以下を行います。

チャットページHTMLファイルにルームに関するコードを追加する。 ( chat.html の変更 )
ChatConsumerクラスにルームに関するコードを追加する。 ( consumers.py の変更 )

メッセージに発言時刻を追記する処理も加えます。

準備

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

仮想環境への切り替え

仮想環境に切り替えていない場合は、「MyChat」フォルダにて、下記コマンドを実行し、仮想環境に切り替えます。
.venv\Scripts\activate.bat

「mysite」フォルダに移動していない場合は移動します。
cd mysite

これ以降のコマンドの実行は、仮想環境にて実行します。

チャットページHTMLファイルの変更

チャットページHTMLファイルにルーム名に関するコードを追加します。

「mysite/chat/templates/chat/chat.html」に、以下の変更を加えます。

「参加画面」に「ルーム名入力フォーム」を追加します。
「チャット画面」に「ルーム名テキスト」を追加します。
グローバルHTMLエレメント変数の定義を追加します。 ( const g_elementXXX = document.getElementById( "XXX" ); )
「参加画面」の「Join」ボタンを押すと呼ばれる関数に、ルーム名を取得する処理を追加します。
「参加画面」の「Join」ボタンを押すと呼ばれる関数の、「サーバーに"join"を送信」の送信データに、ルーム名を追加します。

「mysite/chat/templates/chat/chat.html」の内容を以下のようにします。
（・・・略・・・） <body> <div id="div_container"> <div id="div_header"> <h1>My Chat</h1> </div> <div id="div_main"> <div id="div_join_screen">  <form action="" onsubmit="onsubmitButton_JoinChat(); return false;" style="text-align: center; width: 100%;"> User 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 /> Room name must be a string containing only ASCII alphanumerics, hyphens, or periods.<br /><br /> <input type="submit" value="Join Chat" /> </form> </div> <div id="div_chat_screen"> <button onclick="onclickButton_LeaveChat()">Leave Chat.</button><br /> User name : <input type="text" id="text_username" readonly="readonly"><br /> Room Name : <input type="text" id="text_roomname" readonly="readonly"><br />  <form action="" onsubmit="onsubmitButton_Send(); return false;"> Message : <input type="text" id="input_message" autocomplete="off" autofocus /><input type="submit" value="Send" /> </form> <ul id="list_message"></ul> </div> </div> </div> <script> 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_elementTextUserName = document.getElementById( "text_username" ); const g_elementTextRoomName = document.getElementById( "text_roomname" ); const g_elementInputMessage = document.getElementById( "input_message" ); const g_elementListMessage = document.getElementById( "list_message" ); // WebSocketオブジェクト let ws_scheme = window.location.protocol == "https:" ? "wss" : "ws"; const g_socket = new WebSocket( ws_scheme + "://" + window.location.host + "/ws/chat/" ); // 「Join」ボタンを押すと呼ばれる関数 function onsubmitButton_JoinChat() { // ユーザー名 let strInputUserName = g_elementInputUserName.value; if( !strInputUserName ) { return; } g_elementTextUserName.value = strInputUserName; // ルーム名 let strInputRoomName = g_elementInputRoomName.value; g_elementTextRoomName.value = strInputRoomName; // サーバーに"join"を送信 g_socket.send( JSON.stringify( { "data_type": "join", "username": strInputUserName, "roomname": strInputRoomName } ) ); // 画面の切り替え g_elementDivJoinScreen.style.display = "none"; // 参加画面の非表示 g_elementDivChatScreen.style.display = "block"; // チャット画面の表示 } （・・・略・・・）

ChatConsumerクラスの変更

ChatConsumerクラスにルーム名に関するコードを追加します。

「mysite/chat/consumers.py」に、以下の変更を加えます。

datetimeモジュールのimport文を追加します。 ( import datetime )
WebSocketからのデータ受信時の処理の、「チャットへの参加時の処理」に、ルーム名の取得処理を追加し、「チャットへの参加」関数の引数にルーム名を追加します。
「チャットへの参加」関数の定義の引数に、ルーム名を追加します。
「チャットへの参加」関数のグループ名にルーム名を付加します。

「mysite/chat/consumers.py」の内容を以下のようにします。
（・・・略・・・） # ChatConsumerクラス: WebSocketからの受け取ったものを処理するクラス class ChatConsumer( AsyncWebsocketConsumer ): （・・・略・・・） # WebSocketからのデータ受信時の処理 # （ブラウザ側のJavaScript関数のsocketChat.send()の結果、WebSocketを介してデータがChatConsumerに送信され、本関数で受信処理します） async def receive( self, text_data ): # 受信データをJSONデータに復元 text_data_json = json.loads( text_data ) # チャットへの参加時の処理 if( 'join' == text_data_json.get( 'data_type' ) ): # ユーザー名をクラスメンバー変数に設定 self.strUserName = text_data_json['username'] # ルーム名の取得 strRoomName = text_data_json['roomname']; # チャットへの参加 await self.join_chat( strRoomName ) （・・・略・・・） # チャットへの参加 async def join_chat( self, strRoomName ): # グループに参加 #self.strGroupName = 'chat' self.strGroupName = 'chat_%s' % strRoomName await self.channel_layer.group_add( self.strGroupName, self.channel_name ) （・・・略・・・）

動作確認

「mysite」フォルダにて、下記コマンドを実行し、サーバーを起動します。python manage.py runserver

ブラウザを1つ立ち上げ、「http://127.0.0.1:8000」にアクセスします。

「参加画面」が表示されます。
ユーザー名入力欄に加えてルーム名入力欄があります。

WebSocket Consumerのchannel_layer.group_add()関数の仕様により、部屋名は、ASCII英数字、ハイフン、またはピリオドのみを含む文字列である必要があります。

ユーザー名、ルーム名を入力し、「Join Chat」ボタンを押します。

「チャット画面」が表示されます。
入力した「ユーザー名」「ルーム名」が表示されます。

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

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

ブラウザをもう1つ立ち上げ、「http://127.0.0.1:8000」にアクセスします。
ユーザー名を入力し、1つ目のブラウザと同じルーム名を入力し、「Join Chat」ボタンを押します。
「abc」と「xyz」というメッセージをフォームに入力し、「Send」ボタンを押します。

送信したメッセージが、即座に、両方のブラウザのメッセージリストに追加されます。
メッセージには、発言時刻と発言者名が追記されます。

2つのブラウザで異なるルーム名を入力した場合は、メッセージをは相手に送信されません。

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

ダウンロード

サンプルプログラム