Question

我一直遵循tutorial来学习使用Laravel，Vue js，Laravel Echo和Pusher js构建实时聊天应用程序。

我已经在环境中设置了BROADCAST_DRIVER=pusher，并正确设置了推送程序ID，密钥，机密和群集。

在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
});

来自app/Events/NewMessage.php的摘录：

use App\Message;
class NewMessage implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;
    public function __construct(Message $message)
    {
        $this->message = $message;
    }
    public function broadcastOn()
    {
        return new PrivateChannel('messages.' . $this->message->to);
    }

    public function broadcastWith()
    {
        return ['message' => $this->message];
    }
   }

控制器的代码段

    public function send(Request $request)
    {
        $message = Message::create([
            'from' => auth()->id(),
            'to' => $request->contact_id,
            'message' => $request->text
        ]);

        broadcast(new NewMessage($message));

        return response()->json($message);
    }

处理事件的主要vue组件中的代码：

    methods: {
        saveNewMessage(text) {
            this.loadMessages.push(text);
        },
        handelIncoming(message) {
            if (
                this.selectedContact &&
                message.from == this.selectedContact.id
            ) {
                this.saveNewMessage(message);
                return;
            }
            alert(message.text);
        }
    },
    mounted() {
        Echo.private(`messages.${this.user.id}`).listen("NewMessage", e => {
            this.hanleIncoming(e.message);
        });
        axios.get("/contacts").then(response => {
            this.contacts = response.data;
        });
    }

channels.php中的代码

Broadcast::channel('messages.{id}', function ($user, $id) {
return (int) $user->id === (int) $id;
});

使用上面的代码，我可以发送和接收消息，但是不能实时发送，因此我必须重新加载页面或再次单击该组件。

我还检查了视频中的评论部分，很多人都遇到同样的问题。他们中有些人建议清除缓存。

我尝试卸载并重新安装软件包，清除了缓存，转储自动加载，但结果仍然相同。

该教程是2年前制作的，现在我在最新的laravel，pusher和echo版本上进行操作。不能在旧方法上运行的应用程序是否发生了巨大变化？

Answer 1

原因是此事件着火并添加到队列中，因此您必须运行命令 queue:work 跑步。最好使用ShouldBroadcastNow立即触发您的事件。

Pusher无法使用laravel echo，laravel和vue js聊天应用程序实时更新

1 个答案: