Laravel+Vue集成Pusher报No callbacks on channel for an event如何解决

问题原因 #

你触发事件时使用的名称和前端绑定的事件名称不一致，是报错的核心原因：

• 路由中手动调用$pusher->trigger()时传入的事件名是my_event（下划线格式）
• 前端JS通过channel.bind()绑定的事件名、事件类中broadcastAs()定义的事件名都是my-event（中划线格式）
  事件名不匹配导致Pusher接收到推送后找不到对应的回调函数，就抛出了该报错。

修复方案 #

根据你的使用场景二选一即可：

方案1：保持手动调用Pusher实例的写法 #

直接修改路由中trigger方法的第二个参数，和全局定义的事件名统一：

$pusher->trigger(
    'my-channel',
    'my-event', // 把原来的my_event改为中划线格式的my-event
    'Welcome'
);

方案2：直接调用你定义的Laravel事件类（更符合Laravel规范） #

不需要手动初始化Pusher实例，直接用Laravel内置的事件调度方法即可，会自动读取你在事件类中定义的频道、事件名配置：

Route::get('event-test', function () {
    // 直接调度你定义的MyEvent事件
    \App\Events\MyEvent::dispatch('Welcome');
    return "Event has been sent";
});

修复完成后重新触发事件，即可正常触发前端回调，数据也会正常渲染到Vue列表中。

内容的提问来源于stack exchange，提问作者Toksti Dats Ready