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

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

解説

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

• 送信するデータ用のクラスを作成する。
• 送信イベントを作成する。
• ルーティングを編集する。
• コントローラーを編集する。
• チャットページ用のテンプレートファイルを編集し、POSTメソッドで、チャットメッセージをサーバーに送信する処理を追加する。

前提

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

送信するデータ用のクラスの作成

送信するデータ用のクラス「Message」を作成します。

以下のコマンドを実行し、「app」ディレクトリの下に「Library」という名前のディレクトリを作成します。

mkdir app/Library

以下のコマンドを実行し、送信するデータ用のクラス「Message」のファイルを新規作成し、開きます。

nano app/Library/Message.php

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

<?php namespace App\Library; class Message { public $username; public $body; }

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

送信イベントの作成

以下のコマンドを実行し、送信イベント「MessageSent」を作成します。

php artisan make:event MessageSent

以下のコマンドを実行し、送信イベント「MessageSent」のファイルを開きます。

nano app/Events/MessageSent.php

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

<?php namespace App\Events; use Illuminate\Broadcasting\Channel; use Illuminate\Broadcasting\InteractsWithSockets; use Illuminate\Broadcasting\PresenceChannel; use Illuminate\Broadcasting\PrivateChannel; use Illuminate\Contracts\Broadcasting\ShouldBroadcast; use Illuminate\Foundation\Events\Dispatchable; use Illuminate\Queue\SerializesModels; use App\Library\Message; class MessageSent implements ShouldBroadcast { use Dispatchable, InteractsWithSockets, SerializesModels; // ※イベントをブロードキャストすると、publicメンバーが送信される。 public $message; /** * Create a new event instance. * * @return void */ public function __construct( Message $message ) { $this->message = $message; } /** * Get the channels the event should broadcast on. * * @return \Illuminate\Broadcasting\Channel|array */ public function broadcastOn() { return new PrivateChannel('chat'); } }

解説）

• useの宣言に、「use App\Library\Message;」を追加します。
• 「class MessageSent」の後ろに「implements ShouldBroadcast」を追加します。
• クラスメンバーに、publicな変数「$message」を追加します。
• コンストラクタ関数の引数に「Message $message」を追加します。
• コンストラクタ関数の処理に「$this->message = $message;」を追加します。
• broadcastOn()関数は、プライベートチャンネルのオブジェクトを返します。（ return new PrivateChannel('チャンネル名') ）
• プライベートチャンネルのオブジェクト生成の引数は、適当なチャンネル名を指定します。ここで指定したチャンネル名は、後ほど作成する「Pusherチャンネルのリッスン処理」で、「リッスンするチャンネル名」として使用します。
• チャンネルには、パブリックチャンネルと、プライベートチャンネルの２種類あります。
  パブリックチャンネルは誰でもチャンネルをリッスンできます。
  プライベートチャンネルは、認可されたユーザーのみがチャンネルをリッスンできます。
  プライベートチャンネルをリッスンする場合は、「ユーザーが認可されているか」の判定ロジックを記述した認可コールバックを定義する必要があります。
  後ほど実施する「チャットメッセージの受信」において、「ユーザーが認可されているか」の判定ロジックを記述した認可コールバックを定義します。

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

ルーティングの編集

チャットページから送信するチャットメッセージは、まず、HTTPのPOSTメソッドを利用して、サーバーに送られます。
POSTメソッドを利用してサーバーに送られたチャットメッセージを処理するためのルーティングの設定をします。

チャットページが表示されるように、ルーティングファイルを編集します。

以下のコマンドを実行し、「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::post('/chat', [App\Http\Controllers\ChatController::class, 'sendMessage']);

解説）

• ファイルの末尾に、POSTメソッドで送られたデータを処理するためのルーティング情報を追記します。

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

コントローラーの編集

POSTメソッドで送られたデータを処理するコードをコントローラに追記します。

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

nano app/Http/Controllers/ChatController.php

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

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Library\Message; // for new Message; use App\Events\MessageSent; // for MessageSent::dispatch() class ChatController extends Controller { public function __construct() { // 認証されたユーザーだけが、このコントローラのページにアクセスすることができる。 $this->middleware('auth'); } public function index() { return view('chat'); } // メッセージ送信時の処理 public function sendMessage( Request $request ) { // auth()->user() : 現在認証しているユーザーを取得 $user = auth()->user(); $strUsername = $user->name; // リクエストからデータの取り出し $strMessage = $request->input('message'); // メッセージオブジェクトの作成と公開メンバー設定 $message = new Message; $message->username = $strUsername; $message->body = $strMessage; // 送信者を含めてメッセージを送信 //event( new MessageSent( $message ) ); // Laravel V7までの書き方 MessageSent::dispatch($message); // Laravel V8以降の書き方 // 送信者を除いて他者にメッセージを送信 // Note : toOthersメソッドを呼び出すには、 // イベントでIlluminate\Broadcasting\InteractsWithSocketsトレイトをuseする必要がある。 //broadcast( new MessageSent($message))->toOthers(); //return ['message' => $strMessage]; return $request; } }

解説）

• useの宣言に、「use App\Library\Message;」と「use App\Events\MessageSent;」を追加します。
• ChatControllerクラスに、メンバー関数 sendMessage() を追加します。
• sendMessage() 関数では、チャットページからPostメソッドで送られたチャットメッセージを、MessageSentイベントを通してPusherに送信します。

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

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

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

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"> {{-- エンターキーによるボタン押下を行うために、 <button type="button">ではなく、<form>と<button type="submit">を使用。 ボタン押下(=submit)時にページリロードが行われないように、 onsubmitの設定の最後に"return false;"を追加。 (return false;の結果として、submitが中断され、ページリロードは行われない。）--}} <form method="post" action="" onsubmit="onsubmit_Form(); return false;"> メッセージ : <input type="text" id="input_message" autocomplete="off" /> <button type="submit" class="text-white bg-blue-700 px-5 py-2">送信</button> </form> <ul class="list-disc" id="list_message"> <li><strong>太郎</strong><div>こんにちは</div></li> <li><strong>次郎</strong><div>ハロー</div></li> <li><strong>三郎</strong><div>こんばんわ</div></li> </ul> </div> </div> </div> </div> <script> const elementInputMessage = document.getElementById( "input_message" ); {{-- formのsubmit処理 --}} function onsubmit_Form() { {{-- 送信用テキストHTML要素からメッセージ文字列の取得 --}} let strMessage = elementInputMessage.value; if( !strMessage ) { return; } params = { 'message': strMessage }; {{-- POSTリクエスト送信処理とレスポンス取得処理 --}} axios .post( '', params ) .then( response => { console.log(response); } ) .catch(error => { console.log(error.response) } ); {{-- テキストHTML要素の中身のクリア --}} elementInputMessage.value = ""; } </script> </x-app-layout>

解説）

• 「x-app-layout」部の末尾に<script>～</script>を追加します。
• script部で、formのsubmit処理関数を定義します。
  処理としては、axiosを利用し、非同期通信にて、POSTメソッドで、チャットメッセージをサーバーに送信します。
• formのsubmit時の処理に onsubmit_Form()関数の呼出しを追加します。（onsubmit="onsubmit_Form(); return false;"）

「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」に、「API message」イベントが表示されます。
「API message」イベントの内容として、チャットページから送信した「ユーザーの名前」と「メッセージ」のデータが表示されます。

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

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

関連ページ

前項目：05. Pusherチャンネルへの接続

次項目：07. チャットメッセージの受信