どうも、フリーランスプログラマのTakaです。
さてさて、前回LaravelのBroadcast機能（Redis+Socket.io）を使って基本的なブロードキャストのやり方を紹介しましたが、今回は前回のデータを改修していくかたちで単純なメッセージではなくDBのデータをブロードキャストしてみたいと思います。
前回の記事は下記を参照！
環境
なお、今回は以下の環境で試していきたいと思います。
今回の環境
- vagrant 2.2.6
- Homestead 8.0.1（ubuntu）
- Laravel 5.8系
- Redis
- Socket.io
- MySQL
基本的には前回と同じ環境になりますが、今回はデータベースとしてMySQLを使っていきたいと思います。
Formヘルパを利用できるように設定
今回は後半の方でFormヘルパを利用するので、まずFormヘルパを利用できるように環境を整えていきたいと思います。
環境の設定方法は下記の記事で詳しく紹介しているので、そちらを参照してパッケージのインストールや諸々の設定をしておいてください。
環境を既に構築されていたり、ブロードキャストの部分だけ知りたい方は、このステップは飛ばしても大丈夫です！
環境変数にDB情報を設定
続いて.envファイルに今回使用するDBの情報を下記のように設定します。
今回は上記の通り、データベース名は「broadcast」とし、ユーザー名やパスワード、またホストはHomesteadのデフォルトの情報で設定しています。
ユーザー名やパスワードはご自身の環境に合わせて設定してください！
新規マイグレーションの追加
続いて、利用したいDBのテーブルのマイグレーションファイルを追加します。今回は「messages」というテーブルを「2019_01_29_000001_create_messages_table.php」という名前のマイグレーションファイルを「database/migrations」ディレクトリに作成して下記の内容で作成したいと思います。
マイグレーションファイル名の日付の部分は任意の日付でも大丈夫です！
内容としては、上記の通り下記のカラムで構成されるかたちになります。
messagesテーブルのカラム
- id（オートインクリメント）
- username（ユーザー名）
- message（Null可）
マイグレーションの実行
では、マイグレーションを下記コマンドで実行してみます。
問題なく実行できたら、下記のようにテーブルが出来ているか確認しておきます。
問題なくできていますね。
ちなみに、messages以外のテーブルはLaravelでデフォルトマイグレーションで作られるテーブルになります
Modelの作成
DBの諸々の設定が終わりましたら、下記コマンドでMessageModelを作成しておきます。
生成が完了したら、「app」ディレクトリ配下に「Message.php」ファイルが出来ていると思います。
Controllerの作成
次に、下記コマンドでControllerも作成しておきます。
今回は「MessgeContoroller.php」という名称でControllerファイルを生成してみたいと思います。
これで、「app/Http/Controllers」ディレクトリ配下に「MessageController.php」というファイルが出来ていると思いますので確認しておいてください。
Eventの作成
続いて、イベントファイルを作成します。前回はSampleEventというイベントファイルを作成しましたが、これと同じ容量でMessageEventというイベントファイルを下記コマンドで作成します。
Eventファイルの編集
イベントファイルを生成したら、そのファイルを開き下記の通り編集します。
内容的には、「message-channel」というチャンネルを作成し、Controllerから送られてきたメッセージデータを受け取り、それをSub側に渡しています。
Controllerファイルの編集
MessageControllerファイルが生成できたら、そのファイルを開いて下記の通り編集します。
内容は、上記コードの通り、「showMessage」と「message」の２つの関数があり、それぞれでメッセージページの表示とメッセージの送信処理をしています。
送信処理では、入力されたメッセージをDBのインサートして問題なく保存された場合は、インサートされたデータを取得して、そのデータをブロードキャストしています。
なお、本来はバリデーションの処理が必要になるのですが、今回は便宜上省略しています。また、user_idについてもusersテーブルと本来はリレーション関係になっているべきですが、そちらに関しても今回は具体的な処理を省いております。
bootstrap.jsの編集
続いて、前回改修したbootstrap.jsのチャンネル名とイベント名を下記の通り編集します。
jsファイルんコンパイル
最後に、変更したbootstrap.jsの内容を反映させるために、下記コマンドでコンパイルしておきます。
laravel-echo-servrとqueueの起動
これで諸々の設定は完了になります。
ここまで設定したら、laravel-echo-serverとqueueを起動します。
それでは前回同様、トップページを開いてデベロッパーツールでコンソール画面を開いておいて、別タブ（or ウィンドウ）で「/message」ページにアクセスしてメッセージを入力して送信すると、トップページの方で非同期的にデータがブロードキャストされていることがコンソール上で確認できるかと思います。
まとめ
ということで、今回は前回に引き続き、LaravelのBroadcast（Redis + Socket.io）を使ってDBの情報を取得してブロードキャストする方法を紹介させていただきました。
てことで、今回はここまで！また！
