ホーム > プログラミング > Webチャットアプリを作る > 07. メッセージに発言者名の追記

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



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

解説

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

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

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

準備

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

仮想環境への切り替え

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


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


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

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

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

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

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

ChatConsumerクラスの変更

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

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

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

動作確認

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

ブラウザを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」で終了します。

ダウンロード

サンプルプログラム

関連ページ

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

次項目:08. チャットルームに分かれてチャット


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


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