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

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

解説

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

前提

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

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

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

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



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



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



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

送信イベントの作成

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



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



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



解説)

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

ルーティングの編集

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

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

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



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



解説)

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

コントローラーの編集

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

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



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



解説)

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

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

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



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



解説)

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

動作確認

Pusher.comの「Debug console」にアクセス

Pusher.comにアクセス。Sign inし、作成したチャンネルのページに移動します。
画面左のナビゲーションメニューの「Debug console」をクリックします。
「Debug console」画面を表示しておきます。

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

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

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

「Debu console」画面を表示しているブラウザとは別に、ブラウザをもう一つ立ち上げ、以下のURLにアクセスします。
http://[テスト用のWebサーバーを起動したデバイスのIPアドレス]:8000/chat



「メッセージ入力フォーム」と「(ダミーの)メッセージリスト」が表示されます。

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

Pusher.comの「Debug console」の確認

表示していた「Debug console」画面を確認します。



チャットページの「送信」ボタンの押した結果として、「Debug console」に、「API message」イベントが表示されます。
「API message」イベントの内容として、チャットページから送信した「ニックネーム」と「メッセージ」のデータが表示されます。

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

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

関連ページ

前項目:04. Pusherチャンネルへの接続

次項目:06. チャットメッセージの受信