Laravel Echo 没有收到更多事件

Posted 2023-02-21

【中文标题】Laravel Echo 没有收到更多事件

【英文标题】：Laravel Echo not receiving puher events

【发布时间】：2021-03-30 14:23:50

【问题描述】：

我的事件正在像推送器一样接收-

事件 - API 消息

详情 - 频道：私人聊天，事件：App\Events\MessageSent

但在我的 Vue 前端，Echo 没有收到来自推送器的任何事件。

MessageSent.php

class MessageSent implements ShouldBroadcast

    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;
    public $user;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(User $user, Message $message)
    
        $this->user = $user;
        $this->message = $message;
    

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    
        return new PrivateChannel('chat');
    

聊天.vue

  mounted() 
    Echo.private("chat").listen("MessageSent", (e) => 
      console.log("Received");
      this.allMessages.push(e.message);
      this.fetchMessages();
    );
  ,

bootstrap.js

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo(
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true,
);

routes/channels.php

Broadcast::channel('chat', function ($user) 
    return auth()->check();
);

我还在我的 .env 文件中设置了广播驱动程序 = pusher 和所有推送器凭据

【问题讨论】：

你在routes\channels.php中添加了授权逻辑吗？

您的开发工具中是否发现任何错误？

没有错误。

【参考方案1】：

在 MessageSent 事件中执行此操作

public function broadcastOn()

    Broadcast::routes(['middleware' => ['auth:api']]);
    return new PrivateChannel('chat');

并在 BroadcastServiceProvider 中添加以下行：

Broadcast::routes(['middleware' => ['auth:api']]);

【讨论】：

但是 vue 前端不是一个单独的应用程序。它在 laravel 里面。所以我这里没有使用任何 api 路由。

如果你使用 Laravel Auth 将它包含在你的私人频道中。否则包括您用于用户身份验证的其他中间件。私有频道需要中间件，否则将无法正常工作。

【参考方案2】：

我通过将以下代码从 bootstrap.js 放到 app.js 中解决了这个问题。所以，在我的 app.js -

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo(
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true,
);

但我不知道为什么相同的代码在 bootstrap.js 中不起作用