Pusherによるwebsocket通信の利用

2019.02.05

Pusherとはwebsocketを提供するAPIで、アカウント登録することで無料である程度使えます。チャットやリアルタイム通知など実装するときに使えます。
LaravelでPusherを利用したときの手順を残しておきます。

  1. Pusherの公式サイト（https://dashboard.pusher.com/accounts/sign_in）でアカウントを作成。
  2. ログインし、”app”を作成。
    ※”app name”はアプリケーション名、”cluster”は”ap3″、”front-end”は”jquery”、”back-end”は”laravel”を選択
  3. ターミナルで以下コマンドを実行し、プロジェクトにpusherをインストール。
    1
    composer require pusher/pusher-php-server
  4. 以下コマンドでEventクラスを生成。
    1
    php artisan make:event "イベント名"
  5. 作成したイベントクラスを以下のように書き換える。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <?php
    namespace App\Events;
    use Illuminate\Broadcasting\Channel;
    use Illuminate\Queue\SerializesModels;
    use Illuminate\Broadcasting\InteractsWithSockets;
    use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
    use Illuminate\Console\Scheduling\Event;
    class PusherEvent extends Event implements ShouldBroadcast
    {
        use InteractsWithSockets, SerializesModels;
        
        public $message;
        
        /**
         * Create a new event instance.
         *
         * @return void
         */
        public function __construct($message)
        {
            $this->message = $message;
        }
        
        /**
         * Get the channels the event should broadcast on.
         *
         * @return Channel|array
         */
        public function broadcastOn()
        {
            return ['channel_name'];
        }
        
        /**
         *
         * @return string
         */
        public function broadcastAs()
        {
            return 'event_name';
        }
    }
  6. “/config/app.php”の”providers”の以下のコメントアウトを外す。
    1
    // App\Providers\BroadcastServiceProvider::class,
  7. Pusherの管理画面で確認した”app_id”, “key”, “secret”, “cluster”をそれぞれ.envファイルに設定。また、.envの”BROADCAST_DRIVER”を”pusher”に設定。
  8. この状態で、controllerなどでイベントをnewすれば、Pusherに通知が行くはず。
  9. Pusherからの通知はJavaScriptで受け取る。記述例は以下の通り。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // Pusherキー
    var pusher = new Pusher('{{ env('PUSHER_APP_KEY') }}', {
        cluster  : 'ap3',
        encrypted: true
    });
     
    // LaravelのEventクラスで設定したチャンネル名
    var pusherChannel = pusher.subscribe('cnannel_name');
     
    // イベントを受信したらコールバック関数を実行
    pusherChannel.bind('pusher_event', function(data) {
    //処理
    });

 

以上です。

コメント