【Laravel】Pusherを使ってみる

13379 ワード
Pusher PHP7 Laravel Pusher テキストリンク

環境

PHP: 7.2.5
Laravel: 7.0
pusher-php-server: 4.1

PusherでAppを作成する

まずはPusherにアカウントを作成しましょう。

ログインすると新規にChannels Appを作成する画面へと遷移します。

  • アプリ名の入力欄の下のcreate apps for multiple environmentsを選択すると、development, staging, productionの三つの環境のアプリを同時に作成することができます。
  • clusterは特に理由がなければap3(東京リージョン)を選択しましょう。
  • front-end techとback-end techはどれでも大丈夫です。
    • チュートリアルで表示される言語が選択したものになるだけです。
    • 今回はback-end techにLaravelを選択しました。

LaravelでPublic Channelを試してみる

アプリを作成したら最初に遷移するページにあるGetting StartedをLaravelのみを使用して試してみます。

Step1 イベント受信ページの作成。

まずはmy-channelのmy-eventというイベントを受け取るページを作成します。

Getting StartedにあるStep1でJavascriptを選択します。

そこに書いてあるindex.htmlをLaravelのviewに作成します。

resources/views/pusher-index.blade.php
<!DOCTYPE html>
<head>
    <title>Pusher Test</title>
    <script src="https://js.pusher.com/6.0/pusher.min.js"></script>
    <script>

        // Enable pusher logging - don't include this in production
        Pusher.logToConsole = true;

        var pusher = new Pusher("{{ config('const.pusher.app_key') }}", {
            cluster: "{{ config('const.pusher.cluster') }}"
        });

        var channel = pusher.subscribe('my-channel');
        channel.bind('my-event', function(data) {
            alert(JSON.stringify(data));
        });
    </script>
</head>
<body>
<h1>Pusher Test</h1>
<p>
    Try publishing an event to channel <code>my-channel</code>
    with event name <code>my-event</code>.
</p>
</body>

この時app_keyの情報やclusterの情報をそのまま書き込むのは危険なので、定数として抜き出しましょう。

config/const.php
return [
    'pusher' => [
        'app_key' => env('PUSHER_APP_KEY'),
        'cluster' => env('PUSHER_APP_CLUSTER'),
    ]
];

bladeを作成したらルーティングを設定します。

routes/web.php
Route::group(['prefix' => '/pusher'], function () {
    Route::get('/index', function () {
        return view('pusher-index');
    });
});

これでイベントを受け取るページが完成しました。
http://localhost:10080/pusher/index

Step2 イベント送信用エンドポイントの作成

次はイベントを発行するエンドポイントを作成します。

まずはpusherのライブラリを追加しましょう。

composer require pusher/pusher-php-server

.envに先ほど作成したPusherアプリの設定を記載します。
アプリのキーはGetting Startedのサンプル内、またはApp Keysタブに記載されているのでそちらを参照してください。

.env
PUSHER_APP_ID=12345
PUSHER_APP_KEY=hoge-app-key
PUSHER_APP_SECRET=hoge-app-secret
PUSHER_APP_CLUSTER=hoge-cluster

broadcasting.phpを書き換えます。（Laravel7では既に設定されているため必要ありません。）

config/broadcasting.php
return [
    ...
    'connections' => [
        'pusher' => [
            ...
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'useTLS' => true,
            ],
        ],
    ]
];

そうしたらイベントを発行するクラスを作成します。

app/Events/MyEvent.php
namespace App\Events;

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';
    }
}

最後にこのイベントを呼び出すエンドポイントを設定しましょう。

routes/web.php
Route::group(['prefix' => '/pusher'], function () {
    Route::get('/index', function () {
        return view('pusher-index');
    });

    // 追加
    Route::get('/hello-world', function () {
        event(new App\Events\MyEvent('hello world'));
        return ['message' => 'send to message : hello world'];
    });
});

動作確認

実際に動作するか確認してみます。

  1. イベントを受信するページを開きます。（http://localhost:10080/pusher/index）
  2. ブラウザの別のタブでイベントを発行するページを開きます。（http://localhost:10080/pusher/hello-world）

  1. 受信ページにメッセージが表示されれば成功です。

参考資料

Pusher公式ドキュメント
Pusher で WebSocket 通信を試してみる