07. チャットルームの人の入退室の情報受信

チャットルームの人の入退室の受信に関するコードを記述します。

解説

チャットルームの人の入退室の受信について、すべきことは以下です。

チャットルームの人の入退室の情報を受信し、画面に表示ができうように、テンプレートファイル編集します。

前提

「06. チャットルームへの入室の情報発信」を実施していない場合は、実施します。

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

チャットルームの人の入退室の情報を受信し、画面に表示ができうように、テンプレートファイルを編集します。

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

nano resources/views/chat.blade.php

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

<x-app-layout> （・・・略・・・） <h1 class="text-2xl">入室中のユーザーの一覧</h1> <ul class="list-disc" id="list_users_in_room"> </ul> （・・・略・・・） <script> {{-- 入室中ユーザーリスト --}} let g_users_in_room = []; {{-- 入室中のユーザーの一覧の再描画 --}} function redrawListUsersInRoom() { {{-- List要素の取得 --}} const elementListUsersInRoom = document.getElementById( "list_users_in_room" ); {{-- List要素内の子要素をすべて削除 --}} while(elementListUsersInRoom.firstChild){ elementListUsersInRoom.removeChild(elementListUsersInRoom.lastChild); } {{-- List要素に子要素として入室中のユーザーの情報を追加 --}} for( const user of g_users_in_room ){ let elementLi = document.createElement( "li" ); let elementUsername = document.createElement( "strong" ); let elementEmail = document.createElement( "div" ); elementUsername.textContent = user.name; elementEmail.textContent = user.email; elementLi.append( elementUsername ); elementLi.append( elementEmail ); elementListUsersInRoom.append( elementLi ); } } {{-- ページ読み込み後の処理 --}} window.addEventListener( "DOMContentLoaded", ()=> { {{-- 入室 --}} window.Echo.join('chatroom') .here( (users) => { {{-- 引数のusers : 今、この部屋にいるすべてのユーザーの情報 --}} {{-- 引数のusersを、入室中ユーザーリスト変数にセット --}} g_users_in_room = users; redrawListUsersInRoom(); } ) .joining( (user) => { {{-- 引数のuser : 今、この部屋に入室したユーザーの情報 --}} {{-- 入室したユーザーを、入室中ユーザーリスト変数に追加。 --}} g_users_in_room.push( user ); redrawListUsersInRoom(); } ) .leaving( (user) => { {{-- 引数のuser : 今、この部屋から退室したユーザーの情報 --}} {{-- 退室したユーザーを除外したユーザーのリストを、入室中ユーザーリスト変数にセット。 --}} g_users_in_room = g_users_in_room.filter( (u) => (u.id !== user.id) ); redrawListUsersInRoom(); } ); } ); </script> </x-app-layout>

解説）

ダミーの入室中のユーザーの一覧を削除します。（<ul class="list-disc" id="list_users_in_room">～</ul>の「～」部分の削除）
script部に、入室中のユーザーの一覧の再描画関数の定義を追加します。
Echoのjoin()関数を呼び出しに連結する形で、here()関数、joining()関数、leaving()関数の呼出しを追加します。
Echoのhere()関数の引数として、自身がこの部屋に入室した際のコールバック関数を定義します。
Echoのjoining()関数の引数として、他のユーザーがこの部屋に入室した際のコールバック関数を定義します。
Echoのleaving()関数の引数として、他のユーザーがこの部屋から退室した際のコールバック関数を定義します。

「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