问题描述
我使用Laravel作为服务器部件,使用Vue Cli作为客户端.我也使用 https://docs.beyondco.de/laravel-websockets/但是,当我尝试将vue客户端连接到laravel websockets时,控制台日志中出现错误.
I use Laravel as a server part and Vue Cli as a client.Also I use https://docs.beyondco.de/laravel-websockets/But I have a errors in console log when i try connect vue client to laravel websockets.
WebSocket connection to 'ws://http//websockets.test:6001/app/myKey?protocol=7&client=js&version=5.1.1&flash=false' failed: Connection closed before receiving a handshake response
WebSocket connection to 'wss://http//websockets.test:443/app/myKey?protocol=7&client=js&version=5.1.1&flash=false' failed: Error in connection establishment: net::ERR_CONNECTION_CLOSED
Access to XMLHttpRequest at 'http://sockjs-mt1.pusher.com/pusher/app/myKey/659/6nenb2dd/xhr_streaming?protocol=7&client=js&version=5.1.1&t=1583092642805&n=1' from origin 'http://app.vuesocks.test:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这是我在Vue Cli index.js回显选项中的代码
Here is my code in Vue Cli index.js Echo options
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'myKey',
cluster: 'mt1',
authEndpoint: 'http://websockets.test/broadcasting/auth',
wsHost: 'http://websockets.test',
wsPort: 6001,
disableStats: true,
auth: {
headers: {
Authorization: 'Bearer myToken...',
},
},
});
BroadcastServiceProvider.php
BroadcastServiceProvider.php
Broadcast::routes(['middleware' => 'auth:api']);
channel.php
channel.php
Broadcast::channel('chat', function () {
return 'Hello!';
});
如果删除wsHost
和wsPort
,则没有错误,但没有任何反应,服务器没有响应.
if remove wsHost
and wsPort
then there are no errors, but nothing happens, there is no response from the server.
推荐答案
这可能已经解决,但是对于仍然无法让前端监听事件的任何人,对我有用的是将pusher-js恢复为版本5.1.1,在存储库中找到了有关此问题的答案: https://github .com/beyondcode/laravel-websockets/issues/365
This has probably already been solved but to anyone who is still having trouble getting their frontend to listen for events, what worked for me was reverting pusher-js back to version 5.1.1, found the answer on this issue on the repo: https://github.com/beyondcode/laravel-websockets/issues/365
这篇关于Laravel Echo与Pusher和Vue的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!