electron-vue 应用程序中的 Laravel 回声 - 加入()不起作用

Question

我正在使用 electron-vue 和 laravel 后端构建一个桌面应用程序。我在项目中设置 Laravel Echo 并使用 Echo.channel()工作得很好。现在我尝试使用带有 Echo.join() 的在线状态 channel 。它似乎根本没有做任何事情。我可以在推送器调试控制台中看到连接，但它从未加入 channel 。最奇怪的是，它从来没有向我的服务器请求授权。
在我的 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
}

然后在我的组件中，我有以下代码来加入出席 channel 。显示来自 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() 说“加入存在 channel ”会触发，但是 here() 方法中的 console.log()s 永远不会触发。查看 chrome 中的网络选项卡，我可以看到它从未向 /broadcasting/auth 发出请求.
我确实有后端所有设置来授权 channel 。实际上，我在 laravel 项目中有我的惯性应用程序，使用相同的存在 channel ，使用相同的代码，它只是 find 加入。我似乎无法让 Electron 应用程序工作。
谁能指出我正确的方向？

Answer 1

看起来我终于明白了这一点。在进行了更多调查后，我发现 Electron 开发工具显然没有显示对授权路由的请求，因为我在 access_log 上做了一个尾部，发现它实际上是在命中那个路由。在访问日志中，我还可以看到我收到了 403 响应。
由于我需要 Electron 应用程序和惯性网络应用程序才能对这些 channel 进行身份验证，因此我更改了 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 .
进行这些更改后，看起来我可以很好地加入状态 channel 。