バージョンは
laravel 6
react 16.14. 0
npm 7.5.3
laravelの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 に変更
/*全てコメントアウト*/
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で
PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=
ここにコピー
ターミナルで
$ php artisan make:event 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));
}
/*追記*/
Broadcast::channel('new-post', function ($user) {
return Auth::check();
});
reactで
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