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.
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
Broadcast::routes(['middleware' => 'auth:api']);
channel.php
Broadcast::channel('chat', function () {
return 'Hello!';
});
if remove wsHost
and wsPort
then there are no errors, but nothing happens, there is no response from the server.
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