ホーム > プログラミング > 他のユーザーがログイン中かどうかを表示するアプリを作る > 08. 他のユーザーが入室中かどうかを表示

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

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

解説

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

前提

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

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

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

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



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



解説)

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

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

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

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



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



解説)

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

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

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

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



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



解説)

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

動作確認

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

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

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

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



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

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



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

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

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

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

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

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

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



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



解説)

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

動作確認

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

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

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

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

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



「入室中のユーザーの一覧の表示」の表示が無くなりました。

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

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

参考

関連ページ

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


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


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