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

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

解説

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

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

前提

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

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

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

nano resources/views/chat.blade.php

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

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

解説）

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

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

動作確認

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

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

php artisan serve --host 0.0.0.0

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

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

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

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

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

ブラウザをもう一つ立ち上げ、チャットページにアクセスします。
一方のブラウザから「ニックネーム」欄と「メッセージ」欄を入力し、「送信」ボタンを押します。

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

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

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