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

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

Answer 2

对于那里的任何人，经过多次尝试后我发现...您必须在您的环境中设置推送器凭据。和广播.js。我在 Laravel 7 上做了很多尝试来设置它而没有凭据（运气不好），否则来自 Google Chrome 和网络请求的许多问题将会崩溃。这是给我的，希望这对你有用

Answer 3

如果您的代码中有 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 4

net::ERR_CERT_AUTHORITY_INVALID。

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

您的 ssl 认证可能有问题。您正在使用 wss，它仅在 https 上连接。您应该检查您的 ssl 证书或改用 ws。

加提示：

我会使用 socket.io + redis 组合而不是 pusher。

• 服务器端：https://github.com/tlaverdure/laravel-echo-server
• 客户端：https://laravel.com/docs/7.x/broadcasting有socket.io 部分

Answer 5

也许你可以试试：

在您的TaskCreated 活动中：

public function broadcastOn()
{
   return new Channel('task.created');     
}

在你的 Vue 中：

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

Answer 6

对于 Laravel 6.2 使用 socket.io-client@2.4.0