Laravel+React でpusherを使う

バージョンは
laravel 6
react 16.14. 0
npm 7.5.3

laravelのconfig\app.phpの

config\app.php

App\Providers\AppServiceProvider::class,
App\Providers\AuthServiceProvider::class,
App\Providers\BroadcastServiceProvider::class, <- コメントアウト解除
App\Providers\EventServiceProvider::class,
App\Providers\RouteServiceProvider::class,

.envの

BROADCAST_DRIVER=pusher に変更

resources/js/bootstrap.js

/*全てコメントアウト*/
import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
});

自分のlaravelのフォルダ直下で以下のコマンドを実行
ターミナル

$ composer require pusher/pusher-php-server

pusherに登録してください
https://pusher.com/

create-appを押してアプリを作成

この画面になったら
・アプリ名
・フロントまたはバックエンドの使用している言語を選択してCreate appを押す

作成したアプリのApp Keysを見る
app_id
key
secret
clusterをコピー

.envで

/.env

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=
ここにコピー

ターミナルで

$ php artisan make:event PostCreated

ここから個人の開発によって違いますがなるべくわかりやすく説明します

app/Events/PostCreated.

<?php

namespace App\Events;

use App\Post; <-自分はここを追記
use App\User; <-自分はここを追記
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 PostCreated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $post;
    public $user;

    public function __construct(Post $post, User $user)
    {
        $this->post = $post;
        $this->user = $user;
    }

    public function broadcastOn()
    {
        return [
            new PrivateChannel('new-post'),
            new PrivateChannel('App.User.'.$this->post->user->id),
        ];
    }

    public function broadcastWith() {
        return [
            'post' => array_merge($this->post->toArray(), [
                'user' => $this->post->user,
            ]),
            'user' => $this->user,
        ];
    }
}

use App\Postで自分が欲しい情報をとってきています
broadcastOnにPrivateChannel('new-post')があると思います
これはreact側で呼び出すための鍵です

使用しているControllerに飛びます
app\Http\Controllers

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;
use App\Events\PostCreated; <-追記

public function create(Request $request,Post $post) {
  $createdPost = $request->user()->posts()->create([
     'body' => $request->body,
  ]);

  broadcast(new PostCreated($createdPost, $request->user()))->toOthers(); <-これを追記 

  return response()->json($post->with('user')->find($createdPost->id));
}

routes/channels.php

/*追記*/
Broadcast::channel('new-post', function ($user) {
    return Auth::check();
});

reactで

resources/js/app.js

useEffect(() => {
    window.Echo.private('new-post').listen('PostCreated', e => {
      if (window.Laravel.user.following.includes(e.post.user_id)) {
        setPosts([e.post, ...posts])
      }
    })
  }, [])

自分はtwitterアプリを作ったのでメッセージが届いたら表示するために
setPosts()で更新をかけています

pusherはかなりハマりやすいと思います
公式ドキュメントhttps://readouble.com/laravel/5.8/ja/broadcasting.html