ホーム > プログラミング > Webチャットアプリを作る > 05. チャットメッセージの送受信

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



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

解説

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

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

準備

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

仮想環境への切り替え

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


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


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

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

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

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

「mysite/chat/templates/chat/chat.html」の内容を以下のようにします。

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

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

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

「mysite/chat/consumers.py」の内容を以下のようにします。

マイグレート

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

動作確認

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

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

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

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

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

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

ダウンロード

サンプルプログラム

関連ページ

前項目:04. Redisの有効化

次項目:06. WebSocket Consumer の処理の非同期処理化


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


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