05. チャットメッセージの送受信

チャットメッセージの送受信ができるようにします。

解説

チャットメッセージの送受信ができるようにするために、以下を行います。

チャットページHTMLファイルにチャットメッセージの送受信の処理を追加する。 ( chat.html の変更 )
WebSocket Consumerにチャットメッセージを受信し拡散する処理を追加する。 ( consumers.py の変更 )

準備

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

仮想環境への切り替え

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

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

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

チャットページHTMLファイルにチャットメッセージの送受信の処理の追加

チャットページHTMLファイルにチャットメッセージ送受信の処理を追加します。

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

「Send」ボタンを押した際のイベントハンドラに、onsubmitButton_Send()の呼び出しを追加します。 ( onsubmit="onsubmitButton_Send(); return false;" )
グローバルHTMLエレメント変数の定義を追加します。 ( const g_elementXXX = document.getElementById( "XXX" ); )
WebSocketオブジェクト変数の定義を追加します。 ( const g_socket = new WebSocket( ・・・ ); )
「Send」ボタンを押したときの処理を追加します。（ function onsubmitButton_Send(){ ・・・ } ）
WebSocketからメッセージ受信時の処理を追加します。（ g_socket.onmessage = ・・・）
WebSocketクローズ時の処理を追加します。 ( g_socket.onclose = ・・・ )

「mysite/chat/templates/chat/chat.html」の内容を以下のようにします。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My Chat</title> </head> <body> <h1>My Chat</h1>  <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> <script> 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/" ); // 「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 ) => { // テキストデータをJSONデータにデコード let data = JSON.parse( event.data ); // メッセージの整形 let strMessage = 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>

WebSocket Consumerにチャットメッセージを受信し拡散する処理の追加

前の項では、WebSocket Consumerの実装クラスの処理として、WebSocketの動作確認用のコードを記述しました。
WebSocketの動作確認用のコードを、チャットメッセージの送受信のコードに変更します。

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

async_to_syncクラスのimport文を追加します。 ( from asgiref.sync import async_to_sync )
WebSocket接続時の処理に、グループへの参加処理を追加します。
WebSocket切断時の処理に、グループからの離脱処理を追加します。
WebSocketからデータ受信時の処理に、受信データをJSONデータに復元し、メッセージの取り出し、グループ内にメッセージを拡散する処理を追加します。
拡散メッセージ受信時の処理を追加します。処理内容としては、WebSocketにメッセージを送信します。

「mysite/chat/consumers.py」の内容を以下のようにします。
import json from channels.generic.websocket import WebsocketConsumer from asgiref.sync import async_to_sync # async_to_sync() : 非同期関数を同期的に実行する際に使用する。 # ChatConsumerクラス: WebSocketからの受け取ったものを処理するクラス class ChatConsumer( WebsocketConsumer ): # WebSocket接続時の処理 def connect( self ): # グループに参加 self.strGroupName = 'chat' async_to_sync( self.channel_layer.group_add )( self.strGroupName, self.channel_name ) # WebSocket接続を受け入れます。 # ・connect()でaccept()を呼び出さないと、接続は拒否されて閉じられます。 # 　たとえば、要求しているユーザーが要求されたアクションを実行する権限を持っていないために、接続を拒否したい場合があります。 # 　接続を受け入れる場合は、connect()の最後のアクションとしてaccept()を呼び出します。 self.accept() # WebSocket切断時の処理 def disconnect( self, close_code ): # グループから離脱 async_to_sync( self.channel_layer.group_discard )( self.strGroupName, self.channel_name ) # WebSocketからのデータ受信時の処理 # （ブラウザ側のJavaScript関数のsocketChat.send()の結果、WebSocketを介してデータがChatConsumerに送信され、本関数で受信処理します） def receive( self, text_data ): # 受信データをJSONデータに復元 text_data_json = json.loads( text_data ) # メッセージの取り出し strMessage = text_data_json['message'] # グループ内の全コンシューマーにメッセージ拡散送信（受信関数を'type'で指定） data = { 'type': 'chat_message', # 受信処理関数名 'message': strMessage, # メッセージ } async_to_sync( self.channel_layer.group_send )( self.strGroupName, data ) # 拡散メッセージ受信時の処理 # （self.channel_layer.group_send()の結果、グループ内の全コンシューマーにメッセージ拡散され、各コンシューマーは本関数で受信処理します） def chat_message( self, data ): data_json = { 'message': data['message'], } # WebSocketにメッセージを送信します。 # （送信されたメッセージは、ブラウザ側のJavaScript関数のsocketChat.onmessage()で受信処理されます） # JSONデータをテキストデータにエンコードして送ります。 self.send( text_data=json.dumps( data_json ) )

マイグレート

「mysite」フォルダにて、下記コマンドを実行し、マイグレート（データベース設定変更の適用）します。python manage.py migrate

動作確認

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

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

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

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

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

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

ダウンロード

サンプルプログラム