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?