首页 > 解决方案 > electron-vue 应用程序中的 Laravel 回声 - 加入()不起作用

问题描述

我正在使用 electron-vue 和 laravel 后端构建一个桌面应用程序。我在项目中设置了 Laravel Echo 并且使用Echo.channel()效果很好。现在我尝试使用存在通道,Echo.join()但它似乎根本没有做任何事情。我可以在推送器调试控制台中看到连接,但它从未加入通道。最奇怪的是,它从来没有向我的服务器请求授权。

在我的renderer/main.js文件中,我创建了 Echo 实例:

window.Pusher = require('pusher-js')
window.Echo = new Echo({
  broadcaster: 'pusher',
  key: Keys.PUSHER_KEY,
  cluster: Keys.PUSHER_CLUSTER,
  forceTLS: true,
  authEndpoint: `${apiUrl}/broadcasting/auth`
})

if(localStorage.getItem('api_key')) {
  let key = localStorage.getItem('api_key')
  axios.defaults.headers.common['Authorization'] = 'Bearer ' + key
  window.Echo.connector.pusher.config.auth.headers['Authorization'] = 'Bearer ' + key
}

然后在我的组件中,我有以下代码来加入出席频道。显示来自 vuex,所以这就是我从观察者触发它的原因:

watch: {
  'display.id': {
    immediate: true,
    handler: function(newVal) {
      if(newVal) {
        this.joinPresenceChannel()
      }
    }
  }
},
methods: {
  joinPresenceChannel() {
    console.log(`joining presence channel: display.${this.display.id}`)
    Echo.join(`display.${this.display.id}`)
        .here((users) => {
          console.log('Users here: ')
          console.log(users)
        })
  }
}

console.log() 说“加入存在通道”会触发,但是 here() 方法中的 console.log()s 永远不会触发。并且查看 chrome 中的网络选项卡,我可以看到它从未向/broadcasting/auth.

我确实有后端所有设置来授权频道。实际上,我在 laravel 项目中有我的惯性应用程序,使用相同的存在通道,使用相同的代码,它只是 find 加入。我似乎无法让电子应用程序工作。

谁能指出我正确的方向?

标签: laravelvue.jselectronpusherlaravel-echo

解决方案


看起来我终于明白了这一点。在进行了更多调查后,我发现电子开发工具显然没有显示对授权路由的请求,因为我在 access_log 上做了一个尾巴,发现它实际上是在命中那个路由。在访问日志中,我还可以看到我收到了 403 响应。

由于我需要电子应用程序和惯性 Web 应用程序才能对这些通道进行身份验证,因此我将BroadcastServiceProvider引导方法更改为如下所示:

public function boot()
{
    Broadcast::routes(['middleware' => 'web']);
    Broadcast::routes(['prefix' => 'api', 'middleware' => ['api', 'auth:sanctum']]);

    require base_path('routes/channels.php');
}

我还发现除非您auth:sanctum在 API 路由上添加中间件,否则它不会起作用。您还必须确保更新客户端以使用/api/broadcasting/auth路由而不是默认路由/broadcasting/auth

进行这些更改后,看起来我可以很好地加入状态频道。


推荐阅读