Laravel+Pusherでリアルタイム処理のためのイベント発生を試してみた

アプリケーションを作成していく中で、

各種の処理状況を、

リアルタイムで表示したいなど、

アプリケーションの用途によってはあります。

そんな中で、

Laravelの構成の中で、

実際にリアルタイムの状況表示をするために、

公式ドキュメントでも記載のあった、

「Pusher」というサービスを使って、

リアルタイムの表示を試した時のメモを、

この記事に残しておきます。

Laravelのバージョン

Laravelのバージョン

実行環境のLaravelのバージョンとしては、

php artisan --version

のコマンドで確認したところ、

Laravel Framework 8.83.26

というバージョン。

Pusherとは？

Pusherは、

リアルタイムのデータの送受信に関して、

容易に使うことができるようにするために、

設計されたWebサービスであり、APIを提供しています。

Pusherを使用することで、

ウェブやモバイルアプリケーション、チャットアプリなどで、

リアルタイミングの表示機能などを実現することができます。

PusherのAPIは、

WebSocket、HTTPなどのプロトコルをサポートしているので、

自分の環境に合った使い方ができるので、

最新の対応プロトコルなどについては、

公式サイトをチェックしながら、

実際に使ってみることをお勧めします。

「https://pusher.com/」を開く

Pusherの準備（アカウント作成など）

Pusherに関しては、

先ほどの説明のように、

リアルタイムのデータ送受信をできる限り、

簡単に使えるようにするためのサービスなので、

「https://pusher.com/」を開く

こちらのリンクから、

実際にアカウントを使って準備を進めます。

アカウント作成

アカウントの作成に関しては、

トップページから、

「Sign up」

のボタンが右上にあるので、

そちらから、

アカウントの作成を進めます。

アカウント作成は、

上記赤枠で、

メールまたは、Github・Googleのアカウントを用いて、

アカウント作成できるので、

自分の都合の良いもので作成してください。

Puhserチャンネルの準備

アカウントの作成を進めると、

次にチャンネルの作成が表示されます。

ちなみに、アカウントだけ作成で終わったら、

「Create app」のボタンなどでも、

同じように以下の表示で、

チャンネル作成が表示されます。

表示としては、

こちらのような表示になり、

項目としては、

• チャンネル名
• 地域
• オプション（作成時のフロントエンド）
• オプション（作成時のバックエンド）

を設定していくことになるので、

自分の用途に合った設定をすると良いですね。

作成したPusherチャンネルの情報確認

実際に作成したPusherのチャンネルは、

ログインした画面で、

「channel」

を押して、

その中で、

「Apps」

を選択してもらうと、

このように、

自分が作成したチャンネル（App）が確認できます。

LaravelにPusherの設定コードを確認

Pusherのアカウント登録やチャンネルの作成が終わったら、

LaravelにPusherの設定を追加していきます。

この時、

追加するためのコードについては、

Pusherの管理画面の中で、

この部分を見てもらうと、

実際の参考コードが見れるので、

そちらで自分に合った環境のコードを見てもらえると、

参考にしやすいと思うのでお勧めです

実際に設定したコード

実際に設定したコードを、

こちらの記事にもメモを残しておきます。

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側でログを確認するために、

こちらの

「Debug Console」

の画面を開きます。

最初は、上記のように何も表示されていませんが、

Laravelの方で処理を実行すると、

このように、

イベント処理が発生しいます。

さらに、

ログの詳細を確認すると、

上記の画像のように、

取得した値として、

{
  "message": "hello world"
}

という値が、

処理で発生して、

Pusher側で受け取っていることがわかります。

ここまでうまく動けば、

Laravel+Pusherで、

リアルタイム処理のための、

イベント発生を試してみることはうまくいきました。

実際のクライアント側（表示側）については、

自分の環境では、

Vue.jsを使用しましたが、

そちらの設定や表示などについては、

また別の記事で機会があればメモを残します。