Laravel+Pusherでリアルタイム処理のためのイベント発生を試してみた
アプリケーションを作成していく中で、
各種の処理状況を、
リアルタイムで表示したいなど、
アプリケーションの用途によってはあります。
そんな中で、
Laravelの構成の中で、
実際にリアルタイムの状況表示をするために、
公式ドキュメントでも記載のあった、
「Pusher」というサービスを使って、
リアルタイムの表示を試した時のメモを、
この記事に残しておきます。
Laravelのバージョン
Laravelのバージョン
実行環境のLaravelのバージョンとしては、
php artisan --version
のコマンドで確認したところ、
Laravel Framework 8.83.26
というバージョン。
Pusherとは?
![](https://manabupanda.net/wp-content/uploads/2023/03/pusher-site-top-1024x757.png)
Pusherは、
リアルタイムのデータの送受信に関して、
容易に使うことができるようにするために、
設計されたWebサービスであり、APIを提供しています。
Pusherを使用することで、
ウェブやモバイルアプリケーション、チャットアプリなどで、
リアルタイミングの表示機能などを実現することができます。
PusherのAPIは、
WebSocket、HTTPなどのプロトコルをサポートしているので、
自分の環境に合った使い方ができるので、
最新の対応プロトコルなどについては、
公式サイトをチェックしながら、
実際に使ってみることをお勧めします。
Pusherの準備(アカウント作成など)
Pusherに関しては、
先ほどの説明のように、
リアルタイムのデータ送受信をできる限り、
簡単に使えるようにするためのサービスなので、
こちらのリンクから、
実際にアカウントを使って準備を進めます。
アカウント作成
アカウントの作成に関しては、
トップページから、
「Sign up」
![](https://manabupanda.net/wp-content/uploads/2023/03/pusher-site-top-sign-up-1024x757.png)
のボタンが右上にあるので、
そちらから、
アカウントの作成を進めます。
アカウント作成は、
![](https://manabupanda.net/wp-content/uploads/2023/03/input-user-info-for-pusher-service-1024x743.png)
上記赤枠で、
メールまたは、Github・Googleのアカウントを用いて、
アカウント作成できるので、
自分の都合の良いもので作成してください。
Puhserチャンネルの準備
アカウントの作成を進めると、
次にチャンネルの作成が表示されます。
ちなみに、アカウントだけ作成で終わったら、
「Create app」のボタンなどでも、
同じように以下の表示で、
チャンネル作成が表示されます。
表示としては、
![](https://manabupanda.net/wp-content/uploads/2023/03/pusher-create-app-popup-905x1024.png)
こちらのような表示になり、
項目としては、
- チャンネル名
- 地域
- オプション(作成時のフロントエンド)
- オプション(作成時のバックエンド)
を設定していくことになるので、
自分の用途に合った設定をすると良いですね。
作成したPusherチャンネルの情報確認
実際に作成したPusherのチャンネルは、
ログインした画面で、
「channel」
を押して、
その中で、
「Apps」
を選択してもらうと、
![](https://manabupanda.net/wp-content/uploads/2023/03/pusher-list-of-create-apps-1024x312.png)
このように、
自分が作成したチャンネル(App)が確認できます。
LaravelにPusherの設定コードを確認
Pusherのアカウント登録やチャンネルの作成が終わったら、
LaravelにPusherの設定を追加していきます。
この時、
追加するためのコードについては、
Pusherの管理画面の中で、
![](https://manabupanda.net/wp-content/uploads/2023/03/pusher-sample-code-for-application-1024x654.jpg)
この部分を見てもらうと、
実際の参考コードが見れるので、
そちらで自分に合った環境のコードを見てもらえると、
参考にしやすいと思うのでお勧めです
実際に設定したコード
実際に設定したコードを、
こちらの記事にもメモを残しておきます。
Composerでライブラリを追加
composerのコマンドを使って、
ライブラリを追加します。
composer require pusher/pusher-php-server
環境ファイルにPusherの情報を追加
環境ファイルとして、
.env
というファイルに、
Pusherの情報を追加します。
PUSHER_APP_ID=ここの設定はPusherで確認
PUSHER_APP_KEY=ここの設定はPusherで確認
PUSHER_APP_SECRET=ここの設定はPusherで確認
設定ファイルのオプションを変更
Laravelの設定情報のconfigフォルダ内で、
config/broadcasting.php
のファイルを調整します。
調整としては、
'options' => [
'cluster' => 'ap3',
'useTLS' => true
],
この部分を調整を実施。
クラスファイルの設定
クラスファイルの設定としては、
公式サイトの参考コードは、
<?php
use Illuminate\Queue\SerializesModels;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class MyEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
public function __construct($message)
{
$this->message = $message;
}
public function broadcastOn()
{
return ['my-channel'];
}
public function broadcastAs()
{
return 'my-event';
}
}
このようになっているので、
Laravelのネームスペースの環境に合わせて、
app/Pusher/MyEvent.php
というファイルを作成して、
以下のコードに調整
<?php
namespace App\Pusher;
use Illuminate\Queue\SerializesModels;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class MyEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
public function __construct($message)
{
$this->message = $message;
}
public function broadcastOn()
{
return ['my-channel'];
}
public function broadcastAs()
{
return 'my-event';
}
}
上記でLaravel内の設定は完了しています。
コード内の
- my-channel
- my-event
などは、
ご自身のPusherの環境に合わせて、
調整をしてみてください。
実行してPusherでログ確認
実際に上記の設定で、
処理を試しに動かして、
Pusherでログを確認してみます。
Laravelでの実行コード
実際にPusherへのイベント通知として、
公式サイトの参考コードを流用して、
以下のように処理を行います。
event(new MyEvent('hello world'));
Pusherでのログ確認
上記の処理を実行したときに、
Pusher側でログを確認するために、
![](https://manabupanda.net/wp-content/uploads/2023/03/sample-pusher-debug-console-1024x574.jpg)
こちらの
「Debug Console」
の画面を開きます。
最初は、上記のように何も表示されていませんが、
Laravelの方で処理を実行すると、
![](https://manabupanda.net/wp-content/uploads/2023/03/sample-pusher-debug-console-add-event-1024x455.png)
このように、
イベント処理が発生しいます。
さらに、
ログの詳細を確認すると、
![](https://manabupanda.net/wp-content/uploads/2023/03/sample-pusher-debug-console-add-event-values-1024x591.png)
上記の画像のように、
取得した値として、
{
"message": "hello world"
}
という値が、
処理で発生して、
Pusher側で受け取っていることがわかります。
ここまでうまく動けば、
Laravel+Pusherで、
リアルタイム処理のための、
イベント発生を試してみることはうまくいきました。
実際のクライアント側(表示側)については、
自分の環境では、
Vue.jsを使用しましたが、
そちらの設定や表示などについては、
また別の記事で機会があればメモを残します。
スキルを使って、就職/転職/副業する時のサイト
プログラミングのスキルなどを、自分なりに高めた上で、
自分のスキルをアピールして就職や転職を行い、年収をあげるか、
副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。
まずはできる範囲で取り組むことで、
少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。