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

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

チャットメッセージの受信に関するコードを記述します。

解説

チャットメッセージの受信について、すべきことは以下です。

前提

06. チャットメッセージの送信」を実施していない場合は、実施します。

プライベートチャンネルの認可コールバックの定義

プライベートチャンネルは、認可されたユーザーのみがチャンネルをリッスンできます。
プライベートチャンネルをリッスンする場合は、「ユーザーが認可されているか」の判定ロジックを記述した認可コールバックを定義する必要があります。
チャンネルの認可コールバックは、「routes/channels.php」ファイルで定義します。

以下のコマンドを実行し、認可コールバック定義用ファイルを開きます。



内容を以下のようにします。



解説)

「ctrl + o」を押下し、ファイルを上書き保存します。
「ctrl + x」を押下し、ファイルを閉じます。

チャットページ用のテンプレートファイルの編集

以下のコマンドを実行し、チャットページ用のテンプレートファイルを開きます。



内容を以下のようにします。



解説)

「ctrl + o」を押下し、ファイルを上書き保存します。
「ctrl + x」を押下し、ファイルを閉じます。

動作確認

テスト用のWebサーバーの起動

以下のコマンドを実行し、テスト用のWebサーバーを起動します。

チャットページにアクセス

ブラウザで、以下のURLにアクセスします。
http://[テスト用のWebサーバーを起動したデバイスのIPアドレス]:8000/chat



「メッセージ入力フォーム」が表示されます。メッセージリストは、メッセージがまだないので、表示されません。

「メッセージ」欄を入力し、「送信」ボタンをクリックします。



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

ブラウザをもう一つ立ち上げ、チャットページにアクセスします。
※「Laravelのユーザー認証機能」は、「一つのデバイスで、一つのブラウザアプリでの、同時に複数アカウントでログイン」をサポートしていないので、2つのアカウントのログインは、別のデバイスか、別のブラウザアプリ(ChromeとEdge)から、行う必要があります。下記画像は、ChromeとEdgeの2つのブラウザを立ち上げ、それぞれ別のユーザーでログインして、動作確認した際の画像です。)

一方のブラウザから「メッセージ」欄を入力し、「送信」ボタンを押します。



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

テスト用のWebサーバーの終了

動作を確認したら、「ctrl + c」を押下し、起動した開発用のWebサーバーを終了します。

参考

関連ページ

前項目:06. チャットメッセージの送信


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


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