Question

我正在使用vuejs和laravel echo发送和接收事件，我可以看到我的客户端代码已在pusher开发控制台中注册。但是当我通过控制台或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上的feed上找到。

因此解决方案是在事件前添加一个“”。在您的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,]
             ],

Laravel Echo Vuejs没有听到推送事件

2 个答案: