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

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

解説

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

プライベートチャンネルの認可コールバックを定義する。
チャットページ用のテンプレートファイルを編集し、Pusherチャンネルのリッスン処理、MessageSentイベント発生時の処理を追加する。

前提

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

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

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

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

nano routes/channels.php

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

<?php use Illuminate\Support\Facades\Broadcast; /* |-------------------------------------------------------------------------- | Broadcast Channels |-------------------------------------------------------------------------- | | Here you may register all of the event broadcasting channels that your | application supports. The given channel authorization callbacks are | used to check if an authenticated user can listen to the channel. | */ Broadcast::channel('App.Models.User.{id}', function ($user, $id) { return (int) $user->id === (int) $id; }); Broadcast::channel('chat', function ($user) { return auth()->check(); });

解説）

ファイルの末尾に、「chat」チャンネルの認可コールバックの定義を追加します。
認可コールバックは、リッスンを認可する場合は、trueを返し、リッスンを許可しない場合は、falseを返すように認可ロジックを記述します。
今回は、「ログインしている場合は認可し、ログインしていない場合は認可しない」という認可ロジックとして、「return auth()->check();」を認可ロジックとして記述します。

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

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

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

nano resources/views/chat.blade.php

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

<x-app-layout> （・・・略・・・） <ul class="list-disc" id="list_message"> </ul> （・・・略・・・） <script> const elementInputMessage = document.getElementById( "input_message" ); {{-- formのsubmit処理 --}} function onsubmit_Form() { （・・・略・・・） } {{-- ページ読み込み後の処理 --}} window.addEventListener( "DOMContentLoaded", ()=> { const elementListMessage = document.getElementById( "list_message" ); {{-- Listen開始と、イベント発生時の処理の定義 --}} window.Echo.private('chat').listen( 'MessageSent', (e) => { console.log(e); {{-- メッセージの整形 --}} let strUsername = e.message.username; let strMessage = e.message.body; {{-- 拡散されたメッセージをメッセージリストに追加 --}} let elementLi = document.createElement( "li" ); let elementUsername = document.createElement( "strong" ); let elementMessage = document.createElement( "div" ); elementUsername.textContent = strUsername; elementMessage.textContent = strMessage; elementLi.append( elementUsername ); elementLi.append( elementMessage ); elementListMessage.prepend( elementLi ); // リストの一番上に追加 //elementListMessage.append( elementLi ); // リストの一番下に追加 }); } ); </script> </x-app-layout>

解説）

ダミーのメッセージリストを削除します。（<ul class="list-disc" id="list_message">～</ul>の「～」部分の削除）
script部の末尾に、ページ読み込み後の処理を追加します。
処理としては、Pusherチャンネルをリッスンをします。
Pusherチャンネルのリッスン処理の書式は以下です。
window.Echo.private(チャンネル名).listen(イベント名, イベント発生時の処理);
「chat」チャンネルはプライベートチャンネルなので、上記書式。パブリックチェンネルの場合の書式は以下です。
window.Echo.channel(チャンネル名).listen(イベント名, イベント発生時の処理);
MessageSentイベント発生時の処理を定義します。

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

動作確認

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

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

php artisan serve --host 0.0.0.0

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

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

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

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

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

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

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

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

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

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

参考

ブロードキャスト 9.x Laravel