Pusher & Laravel Echo

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/vue@2.5.17/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 App\Message;

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,
            ],
        ],

### 11. view

<div id="chat">
		<textarea v-model="message"></textarea>
		<br>
		<button type="button" @click="send()">送信</button>

		<div v-for="m in messages">
			<span v-text="m.created_at"></span>:&nbsp;
			<span v-text="m.body"></span>
		</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
	<script src="/js/app.js"></script>
    <script>
    	new Vue({
    		el: '#chat',
    		data: {
    			message: '',
    			messages: []
    		},
    		methods: {
    			getMessages(){
    				const url = '/ajax/chat';
    				axios.get(url)
    					.then((response) => {
    						this.messages = response.data;
    					});
    			},
    			send(){
                    const axiosPost = axios.create({
                        xsrfHeaderName: "X-XSRF-TOKEN",
                        withCredentials: true
                    })
    				const url = '/ajax/chat';
    				const params = { message: this.message };
    				axiosPost.post(url, params)
    					.then((response) => {
    						this.message = '';
    					});
    			},
    		},
    		mounted(){
    			this.getMessages();
    			Echo.channel('chat')
    				.listen('MessageCreated', (e) =>{
    					this.getMessages();
    				});
    		} 
    	});
    </script>

※送信前

※送信後

JSコンソールと、storage/logs/laravel.logでエラー内容を確認しながら、修正していきます。
axiosのPOSTは、xsrfHeaderNameにX-XSRF-TOKENを指定してcsrf対策を施すようにします。