06. チャットルームへの入室の情報発信

チャットルームへの入室の情報発信に関するコードを記述します。

解説

チャットルームへの入室の情報発信について、すべきことは以下です。

チャットページ用のテンプレートファイルを編集し、Echoのjoin()関数の呼出しを処理を追加する。
プレゼンスチャンネルの認可コールバックを定義する。

前提

「05. Pusherチャンネルへの接続」を実施していない場合は、実施します。

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

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

nano resources/views/chat.blade.php

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

<x-app-layout> <x-slot name="header"> <h2 class="font-semibold text-xl text-gray-800 leading-tight"> Chat </h2> </x-slot> <div class="py-12"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg"> <div class="p-6 bg-white border-b border-gray-200"> <h1 class="text-2xl">入室中のユーザーの一覧</h1> <ul class="list-disc" id="list_users_in_room"> <li><strong>太郎</strong><div>taro@example.com</div></li> <li><strong>次郎</strong><div>jiro@example.net</div></li> <li><strong>三郎</strong><div>saburo@example.org</div></li> </ul> </div> </div> </div> </div> <script> {{-- ページ読み込み後の処理 --}} window.addEventListener( "DOMContentLoaded", ()=> { {{-- 入室 --}} window.Echo.join('chatroom'); } ); </script> </x-app-layout>

解説）

「x-app-layout」部の末尾に<script>～</script>を追加します。
script部で、ページ読み込み後の処理を定義します。
処理としては、Echoのjoin()関数を呼び出します。
Echoのjoin()関数の引数は、適当なチャンネル名を指定します。
ここで指定したチャンネル名は、後ほど作成する「プレゼンスチャンネルの認可コールバックの定義」と「Pusherチャンネルのリッスン」で使用します。

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

プレゼンスチャンネルの認可コールバックの定義

ユーザーの入室退室の通知をプレゼンスチャンネルを利用して実現します。
プレゼンスチャンネルは、認可されたユーザーのみがチャンネルを利用できます。
プレゼンスチャンネルを利用する場合は、「ユーザーが認可されているか」の判定ロジックを記述した認可コールバックを定義する必要があります。
チャンネルの認可コールバックは、「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('chatroom', function ($user) { // ログインしている場合は認可とする。 if( auth()->check() ){ // 「room」チャンネルは、「プレゼンスチャンネル」。 // プレゼンスチャンネルの認可コールバックは、 // 認可する場合は、ユーザーに関するデータの配列を返す。 return [ 'id'=>$user->id, 'name'=>$user->name, 'email'=>$user->email, ]; } });

解説）

ファイルの末尾に、「chatroom」チャンネルの認可コールバックの定義を追加します。
プレゼンスチャンネルの認可コールバックは、認可する場合は、ユーザーに関するデータの配列を返すように認可ロジックを記述します。
今回は、「ログインしている場合は認可し、ログインしていない場合は認可しない」「認可する場合に返すユーザーに関するデータの配列は、id、name、emailの配列」となるように認可ロジックを記述します。

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

動作確認

Pusher.comの「Debug console」にアクセス

Pusher.comにアクセス。Sign inし、作成したチャンネルのページに移動します。
画面左のナビゲーションメニューの「Debug console」をクリックします。
「Debug console」画面を表示しておきます。

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

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

php artisan serve --host 0.0.0.0

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

「Debu console」画面を表示しているブラウザとは別に、ブラウザをもう一つ立ち上げ、以下のURLにアクセスします。
http://[テスト用のWebサーバーを起動したデバイスのIPアドレス]:8000/chat

ダミーの入室中のユーザーの一覧が表示されます。

Pusher.comの「Debug console」の確認

表示していた「Debug console」画面を確認します。

チャットページへのアクセスの結果として、「Debug console」に、「Presence event」が表示されます。
「Presence event」の内容として、チャットページにアクセスしたユーザーの情報（id、name、email）が表示されます。

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

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