Laravel Echo 不听

Question

我设置了一个事件和新频道：

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 结果他们有一些他们没有修复的错误的未解决的问题。我喜欢 spatie 包，但对于这个 tlaverdure/laravel-echo-server 是我的第一个选择并且更容易使用。

Answer 2

正如 Kabelbaan 所说，删除点但转到调试控制台并刷新您的应用程序即可开始。您应该会看到任务频道的连接和订阅。如果不这样做，您可以开始调试连接，而不是推动分派事件。另外，我认为复制和粘贴不完整，但您的 window.Echo 语句不完整。