【Laravel】BroadcastとPusherを使って学ぶリアルタイム通信入門

$ composer require pusher/pusher-php-server

PUSHER_APP_ID=your-pusher-app-id
PUSHER_APP_KEY=your-pusher-key
PUSHER_APP_SECRET=your-pusher-secret
PUSHER_APP_CLUSTER=mt1

BROADCAST_DRIVER=pusher

$ npm install --save-dev laravel-echo pusher-js
$ npm run dev

$ php artisan make:event BroadcastEvent

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class BroadcastEvent implements ShouldBroadcast
{
    use Dispatchable, 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 \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('notification-channel, $this->message);
    }
}

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Database\Eloquent\Model;

// Models
use App\Models\User;

class BroadcastEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $model;
    public $user;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    // 第一引数は通知対象となるユーザー
    public function __construct(User $user, Model $model)
    {
        $this->user = $user;
        $this->model = $model;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('notification-channel.' . $this->user->id, $this->model);
    }
}

// config/app.php

'providers' => [

        /*
         * Laravel Framework Service Providers...
         */
        Illuminate\Auth\AuthServiceProvider::class,
        Illuminate\Broadcasting\BroadcastServiceProvider::class, // コメントアウト
        Illuminate\Bus\BusServiceProvider::class,
        Illuminate\Cache\CacheServiceProvider::class,

// Providers/BroadcastServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Support\Facades\Broadcast;
use Illuminate\Support\ServiceProvider;

class BroadcastServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Broadcast::routes(['middleware' => 'auth:api']);

        require base_path('routes/channels.php');
    }
}

// routes/channels.php

<?php

/*
|--------------------------------------------------------------------------
| Broadcast Channels
|--------------------------------------------------------------------------
|
| Here you may register all of the event broadcasting channels that your
| application supports. The given channel authorization callbacks are
| used to check if an authenticated user can listen to the channel.
|
*/

Broadcast::channel('notification-channel.{id}', function ($user, $id) {
    return ((int) $user->id === (int) $id) && auth()->check();
});

// app/Services/ExternalApi/ReceptionOnPage.php

use App\Events\BroadcastEvent;

foreach ($users as $user) {
      if (isset($user)) {
　　　　　　 // 第一引数は通知対象のユーザー
           event(new BroadcastEvent($user, $tasks));
       }
 }

// Laravel Echoを初期化
window.Pusher = require("pusher-js");
window.Echo = new Echo({
   broadcaster: "pusher",
   key: process.env.pusher.key,
   cluster: process.env.pusher.cluster,
   encrypted: true,
   authEndpoint: process.env.pusher.authUrl,
   auth: {
     headers: {
       authorization: this.getCookieValue("auth._token.local1"),
     },
    },
  });

const userId = this.$store.state.auth.user.id;

// ブロードキャスト通知
 window.Echo.private(`notification-channel.${userId}`).listen(
   "BroadcastEvent",
    (data) => {
      console.log(data);
      this.broadcastNotifications.push(data.model);
    }
 );