Laravel-echo无法收听私人频道和在线状态频道

Question

我正在使用带有vuejs和laravel-echo的laravel-websockets包来创建实时聊天应用程序。一切都很好，但是专用和状态通道不能在前端工作（后端可以），并且在控制台中没有错误。

我正在使用laravel 5.8并与工匠服务一起运行。当我将私人频道改为公开频道时，效果很好。

// in bootstrap.js

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '*********',
    cluster: 'ap2',
    'wsHost': window.location.hostname,
    'wsPort': 6001,
    disableStats: true
});

// in private vue component

Echo.private('privatechat.'+this.user.id)
   .listen('PrivateMessageSent',(e)=>{
       console.log('private message');      
    });

})

// in PrivateMessageSent.php

namespace App\Events;

use App\Http\Models\Chat;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class PrivateMessageSent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Chat $message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('privatechat.'.$this->message->receiver_id);
    }
}

//在channels.php中

Broadcast::channel('privatechat.{receiverid}', function($user,$receiverid) {
    return auth()->check();
});

Answer 1

您应该在日志中出现此错误

  

Symfony \ Component \ Debug \ Exception \ FatalThrowableError   传递给App \ Events \ PrivateMessageSent :: __ construct（）的参数1必须是App \ Http \ Models \ Chat的实例，是App \ Models \ Chat的实例

因为您可能在调度事件时传递了模型App\Models\Chat的实例，但在事件类中使用了App\Http\Models\Chat

导入正确的课程

// in PrivateMessageSent.php

namespace App\Events;

use App\Models\Chat; // <--- HERE
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class PrivateMessageSent implements ShouldBroadcast
{

此外，删除wsHost参数以使其能够连接，然后确保使用已认证的用户ID广播私人频道

这对我有用

bootstrap.js

import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '*********',
    cluster: 'eu',
    'wsPort': 6001,
    disableStats: true
});

调度事件示例

use App\Events\PrivateMessageSent;
use App\Models\Chat;

Route::get('/', function () {
    $message = Chat::create([
        'receiver_id' => auth()->id()
    ]);
    event(new PrivateMessageSent($message));
    return view('welcome');
});

还有这样的Vue组件侦听器

<template>
    <div></div>
</template>

<script>
export default {
    props: {
        user: {
            type: Object,
            required: true
        }
    },
    mounted() {
        Echo.private(`privatechat.${this.user.id}`).listen(
            "PrivateMessageSent",
            e => {
                console.log("private message");
            }
        );
    }
};
</script>

别忘了将用户对象作为prop传递或使用ajax来获取

<example-component :user="{{ auth()->user() }}"></example-component>

Result

希望这会有所帮助