0

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 Answers0