08. 他のユーザーが入室中かどうかを表示

ユーザーの一覧を表示し、個々のユーザーが入室中かそうでないかを表示するためのコードを記述します。

解説

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

• 登録済みのすべてのユーザーの情報を取得するための関数を、コントローラーに追加します。
• 登録済みのすべてのユーザーの情報を取得できうように、ルーティングファイルを編集します。
• 登録済みのすべてのユーザーの入室状態の表示ができうように、テンプレートファイルを編集します。
• 「入室中のユーザーの一覧の表示」に関するコードを削除します。

前提

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

チャットページ用のコントローラーの編集

登録済みのすべてのユーザーの情報を取得するための関数を、コントローラーに追加します。

以下のコマンドを実行し、「ChatController.php」ファイルを開きます。

nano app/Http/Controllers/ChatController.php

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

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\User; class ChatController extends Controller { public function __construct() { // 認証されたユーザーだけが、このコントローラのページにアクセスすることができる。 $this->middleware('auth'); } public function index() { return view('chat'); } public function getAllUsers() { return response()->json( User::all() ); } }

解説）

• useの宣言に、「use App\Models\User;」を追加します。
• ChatControllerクラスに、メンバー関数 getAllUsers() を追加します。
• getAllUsers() 関数は、登録済みのすべてのユーザーの情報の配列をJson化して返すようにします。

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

登録済みのすべてのユーザーの情報を取得するためのルーティングの編集

登録済みのすべてのユーザーの情報を取得できうように、ルーティングファイルを編集します。

以下のコマンドを実行し、「routes/web.php」ファイルを開きます。

nano routes/web.php

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

<?php use Illuminate\Support\Facades\Route; /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/', function () { return view('welcome'); }); Route::get('/dashboard', function () { return view('dashboard'); })->middleware(['auth'])->name('dashboard'); require __DIR__.'/auth.php'; Route::get('/chat', [App\Http\Controllers\ChatController::class, 'index']); Route::get('/get-all-users', [App\Http\Controllers\ChatController::class, 'getAllUsers']);

解説）

• ファイルの末尾に、登録済みのすべてのユーザーの情報を取得するためのルーティング情報を追記します。

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

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

登録済みのすべてのユーザーの入室状態の表示ができうように、テンプレートファイルを編集します。

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

nano resources/views/chat.blade.php

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

<x-app-layout> （・・・略・・・） <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_all_users"> </ul> <h1 class="text-2xl">入室中のユーザーの一覧</h1> <ul class="list-disc" id="list_users_in_room"> </ul> </div> </div> </div> </div> <script> {{-- すべてのユーザーリスト --}} let g_all_users = []; {{-- すべてのユーザーの一覧の再描画 --}} function redrawListAllUsers() { {{-- List要素の取得 --}} const elementListAllUsers = document.getElementById( "list_all_users" ); {{-- List要素内の子要素をすべて削除 --}} while(elementListAllUsers.firstChild){ elementListAllUsers.removeChild(elementListAllUsers.lastChild); } {{-- List要素に子要素としてユーザーの情報を追加 --}} Object.keys( g_all_users ).forEach( (key) => { {{-- 連想配列用のループ記法（g_all_usersは配列ではなくidをキーとする連想配列） --}} user = g_all_users[key]; let elementLi = document.createElement( "li" ); let elementUsername = document.createElement( "strong" ); let elementInThisRoom = document.createElement( "span" ); elementUsername.textContent = user.name; if( user.in_this_room ){ elementInThisRoom.textContent = ' is in this room'; elementInThisRoom.style.color = 'green'; } else{ {{-- user.in_this_roomが、undefinedもしくはfalseの場合 --}} elementInThisRoom.textContent = ' is not in this room'; elementInThisRoom.style.color = 'red'; } elementLi.append( elementUsername ); elementLi.append( elementInThisRoom ); elementListAllUsers.append( elementLi ); } ); } {{-- ページ読み込み後の処理 --}} window.addEventListener( "DOMContentLoaded", ()=> { {{-- すべてのユーザーの取得 --}} axios.get('/get-all-users') .then( (res) => { {{-- 配列を、idをキーとする連想配列化（ユーザーの入退室時に対象ユーザーのデータをidで取得できるようにする） --}} g_all_users = res.data.reduce( (map, obj) => { map[obj.id] = obj; return map; }, {} ); redrawListAllUsers(); } ) .catch( (error) => { console.log(error); } ); } ); {{-- 入室中ユーザーリスト --}} let g_users_in_room = []; {{-- 入室中のユーザーの一覧の再描画 --}} function redrawListUsersInRoom() { （・・・略・・・） } {{-- ページ読み込み後の処理 --}} window.addEventListener( "DOMContentLoaded", ()=> { {{-- 入室 --}} window.Echo.join('chatroom') .here( (users) => { {{-- 引数のusers : 今、この部屋にいるすべてのユーザーの情報 --}} {{-- 引数のusersを、入室中ユーザーリスト変数にセット --}} g_users_in_room = users; redrawListUsersInRoom(); for( const user of users ){ g_all_users[user.id].in_this_room = true; } redrawListAllUsers(); } ) .joining( (user) => { {{-- 引数のuser : 今、この部屋に入室したユーザーの情報 --}} {{-- 入室したユーザーを、入室中ユーザーリスト変数に追加。 --}} g_users_in_room.push( user ); redrawListUsersInRoom(); g_all_users[user.id].in_this_room = true; redrawListAllUsers(); } ) .leaving( (user) => { {{-- 引数のuser : 今、この部屋から退室したユーザーの情報 --}} {{-- 退室したユーザーを除外したユーザーのリストを、入室中ユーザーリスト変数にセット。 --}} g_users_in_room = g_users_in_room.filter( (u) => (u.id !== user.id) ); redrawListUsersInRoom(); g_all_users[user.id].in_this_room = false; redrawListAllUsers(); } ); } ); </script> </x-app-layout>

解説）

• 「入室中のユーザーの一覧」の表示のすぐ上に「すべてのユーザーの一覧」の表示を追加します。（「<h1 class="text-2xl">すべてのユーザーの一覧</h1><ul>～</ul>」の追加）
• script部の冒頭に、「すべてのユーザーの一覧」の表示に関するコードを追加します。（「すべてのユーザーリスト」変数、「すべてのユーザーの一覧の再描画」関数、「ページ読み込み後の、すべてのユーザーの取得」処理の追加）
• 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



ユーザーの一覧が表示されます。個々のユーザーが入室中かそうでないかも表示されます。
（上記画像は、自分自身(Leora Lemke)のみが入室中のときのブラウザ画面です）

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



ユーザーの一覧が表示されます。新たに入室したユーザーの「入室中かの表示」の内容が、即座に、「入室中」に変更されます。
（上記画像は、「Dr. Burley Green II」が、新たに入室した後のブラウザ画面です。
　奥側の画像は、「Leora Lemke」のブラウザ画面。手前の画像は、「Dr. Burley Green II」のブラウザ画面）

片方のブラウザにて、チャットページから離脱すると、即座に、もう一方のブラウザの、離脱したユーザーの「入室中かの表示」の内容が、即座に、「入室中ではない」に変更されます。

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

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

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

「入室中のユーザーの一覧の表示」に関するコードを削除します。

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

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_all_users"> </ul> </div> </div> </div> </div> <script> {{-- すべてのユーザーリスト --}} let g_all_users = []; {{-- すべてのユーザーの一覧の再描画 --}} function redrawListAllUsers() { {{-- List要素の取得 --}} const elementListAllUsers = document.getElementById( "list_all_users" ); {{-- List要素内の子要素をすべて削除 --}} while(elementListAllUsers.firstChild){ elementListAllUsers.removeChild(elementListAllUsers.lastChild); } {{-- List要素に子要素としてユーザーの情報を追加 --}} Object.keys( g_all_users ).forEach( (key) => { {{-- 連想配列用のループ記法（g_all_usersは配列ではなくidをキーとする連想配列） --}} user = g_all_users[key]; let elementLi = document.createElement( "li" ); let elementUsername = document.createElement( "strong" ); let elementInThisRoom = document.createElement( "span" ); elementUsername.textContent = user.name; if( user.in_this_room ){ elementInThisRoom.textContent = ' is in this room'; elementInThisRoom.style.color = 'green'; } else{ {{-- user.in_this_roomが、undefinedもしくはfalseの場合 --}} elementInThisRoom.textContent = ' is not in this room'; elementInThisRoom.style.color = 'red'; } elementLi.append( elementUsername ); elementLi.append( elementInThisRoom ); elementListAllUsers.append( elementLi ); } ); } {{-- ページ読み込み後の処理 --}} window.addEventListener( "DOMContentLoaded", ()=> { {{-- すべてのユーザーの取得 --}} axios.get('/get-all-users') .then( (res) => { {{-- 配列を、idをキーとする連想配列化（ユーザーの入退室時に対象ユーザーのデータをidで取得できるようにする） --}} g_all_users = res.data.reduce( (map, obj) => { map[obj.id] = obj; return map; }, {} ); redrawListAllUsers(); } ) .catch( (error) => { console.log(error); } ); } ); {{-- ページ読み込み後の処理 --}} window.addEventListener( "DOMContentLoaded", ()=> { {{-- 入室 --}} window.Echo.join('chatroom') .here( (users) => { {{-- 引数のusers : 今、この部屋にいるすべてのユーザーの情報 --}} for( const user of users ){ g_all_users[user.id].in_this_room = true; } redrawListAllUsers(); } ) .joining( (user) => { {{-- 引数のuser : 今、この部屋に入室したユーザーの情報 --}} g_all_users[user.id].in_this_room = true; redrawListAllUsers(); } ) .leaving( (user) => { {{-- 引数のuser : 今、この部屋から退室したユーザーの情報 --}} g_all_users[user.id].in_this_room = false; redrawListAllUsers(); } ); } ); </script> </x-app-layout>

解説）

• 「入室中のユーザーの一覧」の表示を削除します。（「<h1 class="text-2xl">入室中のユーザーの一覧</h1><ul>～</ul>」の削除）
• 「入室中ユーザーリスト」変数を削除します。
• 「入室中のユーザーの一覧の再描画」関数を削除します。
• 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

関連ページ

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