php - Laravel Echo 不听

Question

我设置了一个事件和新 channel :

class TaskCreated implements shouldBroadcast
 {
use Dispatchable, InteractsWithSockets, SerializesModels;
public $task;

public function __construct(Task $task)
{
    $this->task = $task;
}

}

并安装 Echo 并进行设置

 import Echo from "laravel-echo"
window.Pusher = require('pusher-js');
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'pusher-key',
    cluster: 'ap2',
    encrypted: true
});

然后我在发布任务时调用 TaskCreated 事件

event(new TaskCreated($task));

然而，问题是 Echo 不听推送日志或任何东西。即使在 laravel-websockets 中，事件是作为 api 消息创建的。

这是 vue js Echo 实现:

 mounted () {
        axios.get('/tasks').then(response => (this.tasks = response.data));

       Echo.channel('taskCreated').listen('TaskCreated', (e) => {
            console.log(e);
            this.tasks.push(task.body)
        });

在仪表板中:
api-message Channel: taskCreated, Event: App\Events\TaskCreated 19:01:55
更新

现在，当我尝试与 WS 连接时，连接状态处于挂起状态 10 秒，然后完成并出现错误 WebSocket 在建立连接之前关闭。 AND 连接建立错误:net::ERR_CERT_AUTHORITY_INVALID。

请求地址:wss://127.0.0.1/app/local?protocol=7&client=js&version=6.0.2&flash=false

import Echo from "laravel-echo"
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
 key: process.env.MIX_PUSHER_APP_KEY,
 wsHost: window.location.hostname,
 wssPort: 6001,
 disableStats: true,
 enabledTransports: ['ws', 'wss']

Answer 1

我没看到 broadcastOn TaskCreated 事件中的方法，如果您的代码中有它，只需使用 broadcastAs 方法，如下所示:

public function broadcastAs()
{
    return 'task.created';
}

在 vue 组件中监听这样的事件:

Echo.channel('taskCreated').listen('.task.created', (e) => {
            this.tasks.push(task.body)
        });

更多信息: https://laravel.com/docs/broadcasting
但是关于 laravel-websockets 我最近使用它并且有类似的问题并检查他们的 github repo 结果他们有一些他们没有修复的错误的 Unresolved 问题。我喜欢 spatie 包，但对于这个 tlaverdure/laravel-echo-server 是我的第一个选择，而且更容易使用。