独立Laravel API与Vue.js前端项目集成Pusher时回调函数不执行求助

问题修复方案 #

1. 在线通道（PresenceChannel）鉴权缺失修复

你当前使用的PresenceChannel属于需要鉴权的专属通道，前后端分离架构下未配置鉴权逻辑会导致订阅静默失败：

• 开启Laravel广播服务：打开config/app.php，取消App\Providers\BroadcastServiceProvider::class的注释
• 配置通道鉴权规则：在routes/channels.php添加以下逻辑

Broadcast::channel('comment-channel', function ($user) {
    return ['id' => $user->id, 'name' => $user->name];
});

• 前端Pusher初始化添加鉴权配置：修改main.js中Pusher实例化代码

let pusher = new Pusher(process.env.VUE_APP_PUSHER_APP_KEY,{
  cluster: process.env.VUE_APP_PUSHER_APP_CLUSTER,
  encrypted: true,
  authEndpoint: '你的Laravel后端域名/broadcasting/auth',
  auth: {
    headers: {
      'Authorization': 'Bearer ' + 登录用户的接口访问token,
      'Accept': 'application/json'
    }
  }
});

如果不需要在线成员统计功能，可先将CommentEvent.php中的PresenceChannel替换为Channel（公共通道），跳过鉴权步骤先验证事件收发链路

2. 回调函数this指向错误修复

App.vue中事件回调使用普通函数导致this指向丢失，无法调用vue实例方法，修改为箭头函数即可：

channel.bind("CommentEvent", (data) => {
    console.log(data);
    this.$store.commit("ADD_COMMENT", data.comment);
});

3. 依赖与配置校验

• 确保Laravel已安装Pusher依赖：执行composer require pusher/pusher-php-server
• 检查Laravel.env文件配置项：
  • BROADCAST_DRIVER=pusher
  • Pusher的app_id、key、secret、cluster配置和前端保持一致

内容的提问来源于stack exchange，提问作者Folorunso