7

我设置了一个活动和新频道：

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 is closed。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']
4

6 回答 6

5

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 是我的第一选择并且更容易使用。

于 2020-05-09T22:46:57.263 回答
3

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

于 2020-05-09T18:09:17.910 回答
1

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

于 2021-02-16T19:43:56.153 回答
1

也许你可以试试：

在您的TaskCreated活动中：

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

在你的 Vue 中：

Echo.channel('task.created').listen('TaskCreated', (e) => {
            this.tasks.push(task.body)
        });
于 2020-05-16T11:11:57.960 回答
0

净::ERR_CERT_AUTHORITY_INVALID。

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

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

补充提示：

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

于 2020-05-15T20:10:41.743 回答
0

As Kabelbaan said, remove the dot but go to the debug console and just refresh your app to start with. You should see connection and subscription for your tasks channel. If you don't, you can start debugging the connection rather than pushing dispatching the event. Also, I gather the copy & paste is just incomplete but your window.Echo statement is incomplete.

于 2020-05-07T04:07:07.237 回答