WebSocket is closed before the connection is established. - Laravel Pusher

2k views Asked by At

I'm trying to use Laravel Pusher in my React Native project and by far it's working well. But the problem is with my live chat, it works but not live because I keep getting this error:

WebSocket connection to 'ws://mydomain:6001/app/mykey?protocol=7&client=js&version=4.4.0&flash=false' failed: WebSocket is closed before the connection is established.

and after a minute:

WebSocket connection to 'ws://mydomain:6001/app/mykey?protocol=7&client=js&version=4.4.0&flash=false' failed: 

I've tried some solutions I found online, but nothing seems to work.

Here are my codes:

websockets.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,
        ],
    ],

boradcasting.php

     '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' => false,
                'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'http'
            ],
        ],

bootstrap.js

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

and finally, my front-end:

static _createNewEcho(){
    return new Echo({
      //Public or Private
      broadcaster: "pusher",
      key: "mykey",
      wsHost: window.location.hostname,
      wsPort: 6001,
      forceTLS: false,
      encrypted: false,
      enabledTransports:['ws'],
      auth: {
        headers: {
          Authorization: `Bearer ${API.accessToken}`,
        },
      },
      authEndpoint: "http://myurl:8000/broadcasting/auth",
    });
  }

Do you have any idea of what I can do?

0

There are 0 answers