Laravel Echo vuejs 沒有聽到推送事件

Question

我正在使用 vuejs 和 laravel echo 來發送和接收事件，我可以看到我的客戶端代碼在推送器開發控制台中注冊。 但是當我通過控制台或 laravel 發送事件時。

客戶端代碼沒有聽到它。

Vuejs 組件

<template>
    <card class="flex flex-col items-center justify-center">
        <div class="px-3 py-3">
            <h1 class="text-center text-3xl text-80 font-light">Test Nova Card</h1>
        </div>
    </card>
</template>

<script>
export default {
    props: ['card'],

    mounted() {
        console.log('mounted');
        this.listen();

    },
    methods:
        {
            listen: function () {
                console.log('Listen Method')
                Echo.channel('test')
                    .listen('TestEvent', (e) => {
                        console.log(e);
                    });
            }
        }
}
</script>

事件被觸發

namespace Devtropolis\NovaEnvoyerStatus\events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Support\Facades\Log;

class TestEvent implements ShouldBroadcast
{
    use InteractsWithSockets, SerializesModels;

    public $chatMessage;


    /**
     * Create a new event instance.
     *
     * @param $chatMessage
     * @param $user
     */
    public function __construct($chatMessage)
    {
        Log::info('message fired');
        $this->chatMessage = $chatMessage;
    }

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

    }
}

在推送控制台中接收到的事件

客戶端在控制台注冊

這是觸發事件的代碼

 Route::get('/endpoint', function (Request $request) {

     Log::info('Starting event');
     $message = array([
         'user_id' => 1,
         'message' => 'message'
     ]);

     event(new TestEvent($message));

     return 'dave';
 });

Answer 1

好吧，我完全在同一個案例中，在這里我如何解決它：

1 - 首先在 app.js 中添加這一行，以便您可以在控制台中看到 Pusher 錯誤

Pusher.log = function (message) { window.console.log(message); }

2-然后（在我的情況下，您的可能會有所不同！）當收到事件時，我的控制台中有這條消息說

Pusher : Event recd : {"event":"Event_name","channel":"channel_name","data":[]} Pusher : No callbacks on channel_name for Event_name

所以現在很明顯問題出在我處理接收到的事件的方式上。 經過一番谷歌搜索后，我發現它與“Echo”有關，特別是與命名空間有關。 [可以在 Github 上的這個提要中找到更多信息]。

因此，解決方案只是在您的事件前加上“。” 在您的 Vue 組件中，它將成為一種魅力

 methods:
    {
        listen: function () {
            console.log('Listen Method')
            Echo.channel('test')
                .listen('.TestEvent', (e) => {
                    console.log(e);
                });
        }
    }

Answer 2

將此添加到 config/broadcasting.php

'options' => [
            'cluster' => env('PUSHER_APP_CLUSTER'),
            'encrypted' => true,
            'curl_options' => [
                CURLOPT_SSL_VERIFYHOST => 0,
                CURLOPT_SSL_VERIFYPEER => 0,]
             ],