拉勒维尔回声没在听

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不听推杆日志之类的。尽管在中，事件是作为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。连接建立中的错误: 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方法，如果您在代码中使用了它，那么也可以使用像下面这样的广播方法：

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，我最近使用它，并有类似的问题，并检查他们的github回购发现，他们有一些未解决的错误，他们没有解决问题。我喜欢空间软件包，但是对于这个包，tlaverdure/laravel-echo服务器是我的第一个选择，而且更容易使用。

Answer 2

对任何一个人来说，经过多次尝试，我发现.你肯定在你的环境中设置了推送证书。和broadcast.js。我用Laravel 7做了很多尝试，在没有凭据(没有运气)的情况下设置它，否则来自Google和网络请求的许多问题都会崩溃。这是给我的，希望这对你有用

Answer 3

也许你可以试试：

在您的TaskCreated事件中：

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

在你的Vue中：

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