laravel - 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 加入。我似乎无法让电子应用程序工作。
谁能指出我正确的方向?
解决方案
看起来我终于明白了这一点。在进行了更多调查后,我发现电子开发工具显然没有显示对授权路由的请求,因为我在 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
。
进行这些更改后,看起来我可以很好地加入状态频道。