21. Pusher & Laravel Echo - hpscript/laravel GitHub Wiki

Pusherとは？ -> WebSocketを介して、リアルタイムの双方向機能を統合し、迅速にするためのシンプルなホストされているAPI

参考: Laravel Broadcasting
https://readouble.com/laravel/6.x/ja/broadcasting.html
-> イベントをPusherチャンネルによりブロードキャストする
-> laravel echoとは、JavaScriptライブラリで、チャンネルの購読とLaravelによるイベントブロードキャストのリッスンを苦労なしに実現

1. Pusherにregister

https://pusher.com/

2 .env

pusherのapp keysからCredentialsを.envに追記

PUSHER_APP_ID=${}
PUSHER_APP_KEY=${}
PUSHER_APP_SECRET=${}
PUSHER_APP_CLUSTER=${}

BROADCAST_DRIVERをpusherに変更

BROADCAST_DRIVER=pusher
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

3. config/app.php

BroadcastServiceProviderのコメントアウト削除

        App\Providers\AppServiceProvider::class,
        App\Providers\AuthServiceProvider::class,
        // コメントアウト削除
        App\Providers\BroadcastServiceProvider::class,
        App\Providers\EventServiceProvider::class,
        App\Providers\RouteServiceProvider::class,

4. Pusher Channels HTTP PHP Library

Pusher用のパッケージインストール
https://github.com/pusher/pusher-http-php

$ php composer.phar require pusher/pusher-php-server

5. Laravel Eco パッケージインストール

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

6. resources/js/bootstrap.js

Laravel Echoに関するコードのコメント解除
forceTLSをfalseに変更

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,
    forceTLS: false
});

build
$ npm run dev

7. app.jsに差し替え

前)

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

後)

<script src="/js/app.js"></script>

8. イベント作成

$ php artisan make:event MessageCreated

app/Events/MessageCreated.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 MessageCreated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public $message;

    public function __construct(Message $message)
    {
        //
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('chat');
    }
}

9. Controller

event発火

public function create(Request $request)
    {
        //
        $message = Message::create([
            'body' => $request->message
        ]);
        event(new MessageCreated($message));
    }

10. config/broadcasting.php

'useTLS'をtrueからfalseに変更

'connections' => [

        'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'useTLS' => false,
            ],
        ],
⚠️ **GitHub.com Fallback** ⚠️