ホーム > プログラミング > Webチャットアプリを作る > 08. チャットルームに分かれてチャット

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



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

解説

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

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

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

準備

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

仮想環境への切り替え

仮想環境に切り替えていない場合は、「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」にアクセスします。

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

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」で終了します。

ダウンロード

サンプルプログラム

関連ページ

前項目:07. メッセージに発言者名の追記

次項目:09. 入退室ユーザー名、参加人数の表示


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


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