LaravelのBroadcastでDBのデータ(メッセージ)をブロードキャストする

 どうも、フリーランスプログラマの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」の2つの関数があり、それぞれでメッセージページの表示とメッセージの送信処理をしています。

 送信処理では、入力されたメッセージを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の情報を取得してブロードキャストする方法を紹介させていただきました。

 てことで、今回はここまで!また!

お仕事のご相談・ご依頼
お気軽にお問い合わせください!

お仕事の依頼はこちら

シェアありがとうございます!

タグ
laravel PHP

著者プロフィール

Takanori Hashi

東京、奄美大島、宮崎の拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです!

人気記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です