laravel websocket client cant stablish connection but connection is possible in site/laravel-websockets;

Question

I am using beyondcode/laravel-websockets package.

followings are my config files.

boroadcasting.php:

'connections' => [

        'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'encrypted' => true,
                'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'http'
            ],
        ],



websocket.php:
    'apps' => [
        [
            'id' => env('PUSHER_APP_ID'),
            'name' => env('APP_NAME'),
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'path' => env('PUSHER_APP_PATH'),
            'capacity' => null,
            'enable_client_messages' => false,
            'enable_statistics' => true,
        ],
    ],

.env
PUSHER_APP_ID=123456789
PUSHER_APP_KEY=appkey
PUSHER_APP_SECRET=dfghfgjhhjkghkhjdfasrwetrtyuuipjmgh
PUSHER_APP_CLUSTER=mt1

and I am using the following in my app.js:

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}


import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
});

then I run npm run watch . I have not yet tried to listen to anything because this code do not work properly. and says could not establish connection in the console. this is while site/laravel-websockets works fine and connect without problem.

and this is the error showing in the google chrome console.

app.js?id=4c7e619c826e5fe97c8b:15800 WebSocket connection to 'wss://mysite.test/app/appkey?protocol=7&client=js&version=6.0.3&flash=false' failed: WebSocket is closed before the connection is established.

Answer 1

Add this to app.js under echo() enabledTransports: ['ws', 'wss']

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    enabledTransports: ['ws', 'wss'] // <- add this param

Answer 2

I found the reason. I was testing the app in local machine and therefore I couldn't use TLS. The default behavior of echo forces TLS. so the following config will fix the problem.

if you are using insecure websocket or testing on local set forceTLS: false

    window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    forceTLS: false
});