07. メッセージに発言者名の追記

メッセージに発言者名が追記されるようにします。

解説

メッセージに発言者名が追記されるように、以下を行います。

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

メッセージに発言時刻も追記されるようにします。

準備

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

仮想環境への切り替え

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

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

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

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

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

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

「参加画面」(join-screen)と「チャット画面」を用意します。(chat-screen)
「参加画面」は、ウィンドウの高さの残り全部を灰色で覆い、灰色部分の中央に「ユーザー名入力フォーム」を配置します。(display:flex）
「チャット画面」は、初期状態は、非表示とします。(display:none)
「チャット画面」に「ユーザー名テキスト」を追加します。
グローバルHTMLエレメント変数の定義を追加します。 ( const g_elementXXX = document.getElementById( "XXX" ); )
「参加画面」の「Join」ボタンを押すと呼ばれる関数の定義を追加します。
「チャット画面」の「Leave Chat.」ボタンを押すと呼ばれる関数の定義を追加します。
「Send」ボタンを押したときの処理の、WebSocket
WebSocketからメッセージ受信時の処理に、表示するメッセージに発言者名を付加する処理を追加します。

「mysite/chat/templates/chat/chat.html」の内容を以下のようにします。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My Chat</title> <style type="text/css"> input:read-only, textarea:read-only { background-color: #CCC; } html { height: 100%; /* 画面全体を使用する場合のお約束 */ } body { margin: 0; /* 画面全体を使用する場合のお約束 */ padding: 0; /* 画面全体を使用する場合のお約束 */ min-height: 100%; /* 画面全体を使用する場合のお約束 */ height: 100%; /* 画面全体を使用する場合のお約束 */ } #div_container { min-height: 100vh; /* 画面全体を使用する場合のお約束 */ height: 100%; /* 画面全体を使用する場合のお約束 */ display: flex; /* 子要素をflex配置とする */ flex-direction: column; /* 子要素のflex配置の方向は列方向（縦方向）*/ } #div_header { margin: 0px 8px; /* bodyで「margin: 0」にしたのを戻す（ブラウザ領域境界に余白なしでHTML要素が表示されるのを余白ありに戻す） */ } #div_main { flex: 1; /*親要素の（縦方向の）残り全部を使う*/ } #div_join_screen { width: 100%; /*親要素(#div_main)の（縦方向の）全部を使う*/ height: 100%; /*親要素(#div_main)の（縦方向の）全部を使う*/ display: flex; /* 子要素をflex配置とする */ align-items: center; /*子要素を上下中央揃えとする。「display: flex」必要*/ z-index: 10; background-color: #888; } #div_chat_screen { margin: 0px 8px; /* bodyで「margin: 0」にしたのを戻す（ブラウザ領域境界に余白なしでHTML要素が表示されるのを余白ありに戻す） */ display: none; /* 初期状態非表示 */ } </style> </head> <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 /> <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 />  <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_elementTextUserName = document.getElementById( "text_username" ); 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; // サーバーに"join"を送信 g_socket.send( JSON.stringify( { "data_type": "join", "username": strInputUserName } ) ); // 画面の切り替え g_elementDivJoinScreen.style.display = "none"; // 参加画面の非表示 g_elementDivChatScreen.style.display = "block"; // チャット画面の表示 } // 「Leave Chat.」ボタンを押すと呼ばれる関数 function onclickButton_LeaveChat() { // メッセージリストのクリア while( g_elementListMessage.firstChild ) { g_elementListMessage.removeChild( g_elementListMessage.firstChild ); } // ユーザー名 g_elementTextUserName.value = ""; // サーバーに"leave"を送信 g_socket.send( JSON.stringify( { "data_type": "leave" } ) ); // 画面の切り替え g_elementDivChatScreen.style.display = "none"; // チャット画面の非表示 g_elementDivJoinScreen.style.display = "flex"; // 参加画面の表示 } // 「Send」ボタンを押したときの処理 function onsubmitButton_Send() { // 送信用テキストHTML要素からメッセージ文字列の取得 let strMessage = g_elementInputMessage.value; if( !strMessage ) { return; } // WebSocketを通したメッセージの送信 g_socket.send( JSON.stringify( { "message": strMessage } ) ); // 送信用テキストHTML要素の中身のクリア g_elementInputMessage.value = ""; } // WebSocketからメッセージ受信時の処理 g_socket.onmessage = ( event ) => { // 自身がまだ参加していないときは、無視。 if( !g_elementTextUserName.value ) { return; } // テキストデータをJSONデータにデコード let data = JSON.parse( event.data ); // メッセージの整形 //let strMessage = data["message"]; let strMessage = data["datetime"] + " - [" + data["username"] + "] " + data["message"]; // 拡散されたメッセージをメッセージリストに追加 let elementLi = document.createElement( "li" ); elementLi.textContent = strMessage; g_elementListMessage.prepend( elementLi ); // リストの一番上に追加 //g_elementListMessage.append( elementLi ); // リストの一番下に追加 }; // WebSocketクローズ時の処理 g_socket.onclose = ( event ) => { // ウェブページを閉じたとき以外のWebSocketクローズは想定外 console.error( "Unexpected : Chat socket closed." ); }; </script> </body> </html>

ChatConsumerクラスの変更

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

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

datetimeモジュールのimport文を追加します。 ( import datetime )
コンストラクタを追加し、グループ名メンバー変数の初期化とユーザー名メンバー変数の初期化を追加します。 ( def __init__() )
WebSocketからのデータ受信時の処理に、「チャットへの参加時の処理」と「チャットからの離脱時の処理」を追加します。
「チャットへの参加」関数と「チャットからの離脱」関数を追加します。
グループに参加する処理は、WebSocket接続時の処理ではなく、「チャットへの参加」関数で行うようにコードを変更します。
グループからの離脱する処理は、WebSocket切断時の処理ではなく、「チャットからの離脱」関数で行うようにコードを変更します。WebSocket切断時には、「チャットからの離脱」関数を呼び出すようにします。

「mysite/chat/consumers.py」の内容を以下のようにします。
import json #from channels.generic.websocket import WebsocketConsumer from channels.generic.websocket import AsyncWebsocketConsumer #from asgiref.sync import async_to_sync # async_to_sync() : 非同期関数を同期的に実行する際に使用する。 import datetime # ChatConsumerクラス: WebSocketからの受け取ったものを処理するクラス class ChatConsumer( AsyncWebsocketConsumer ): # コンストラクタ def __init__( self, *args, **kwargs ): super().__init__( *args, **kwargs ) self.strGroupName = '' self.strUserName = '' # WebSocket接続時の処理 async def connect( self ): # WebSocket接続を受け入れます。 # ・connect()でaccept()を呼び出さないと、接続は拒否されて閉じられます。 # 　たとえば、要求しているユーザーが要求されたアクションを実行する権限を持っていないために、接続を拒否したい場合があります。 # 　接続を受け入れる場合は、connect()の最後のアクションとしてaccept()を呼び出します。 await self.accept() # WebSocket切断時の処理 async def disconnect( self, close_code ): # チャットからの離脱 await self.leave_chat() # 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'] # チャットへの参加 await self.join_chat() # チャットからの離脱時の処理 elif( 'leave' == text_data_json.get( 'data_type' ) ): # チャットからの離脱 await self.leave_chat() # メッセージ受信時の処理 else: # メッセージの取り出し strMessage = text_data_json['message'] # グループ内の全コンシューマーにメッセージ拡散送信（受信関数を'type'で指定） data = { 'type': 'chat_message', # 受信処理関数名 'message': strMessage, # メッセージ 'username': self.strUserName, # ユーザー名 'datetime': datetime.datetime.now().strftime( '%Y/%m/%d %H:%M:%S' ), # 現在時刻 } await self.channel_layer.group_send( self.strGroupName, data ) # 拡散メッセージ受信時の処理 # （self.channel_layer.group_send()の結果、グループ内の全コンシューマーにメッセージ拡散され、各コンシューマーは本関数で受信処理します） async def chat_message( self, data ): data_json = { 'message': data['message'], 'username': data['username'], 'datetime': data['datetime'], } # WebSocketにメッセージを送信します。 # （送信されたメッセージは、ブラウザ側のJavaScript関数のsocketChat.onmessage()で受信処理されます） # JSONデータをテキストデータにエンコードして送ります。 await self.send( text_data=json.dumps( data_json ) ) # チャットへの参加 async def join_chat( self ): # グループに参加 self.strGroupName = 'chat' await self.channel_layer.group_add( self.strGroupName, self.channel_name ) # チャットからの離脱 async def leave_chat( self ): if( '' == self.strGroupName ): return # グループから離脱 await self.channel_layer.group_discard( self.strGroupName, self.channel_name ) # ルーム名を空に self.strGroupName = ''

動作確認

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

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

「参加画面」が表示されます。

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

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

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

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

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

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

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

ダウンロード

サンプルプログラム