How to implement laravel websockets to React Native?

[sherlah]

Hi, does everyone can help me to implementation laravel websocket to react native?
the new SDK of Pusher for react native does not have option to set ws host.
please help me 🙏

[rambavd]

You can set the host using Echo; it works even in React Native. I managed to make it work by passing the Pusher instance in the Echo config object.

import Pusher from 'pusher-js'
import Echo from 'laravel-echo'

export default const EchoInstance = new Echo({
  broadcaster: 'pusher',
  Pusher,
  // your configurations
  wsHost: 'your-host.local',
  wssHost: 'your-host.local',
  wsPort: 6001, // default by laravel-websockets
  wssPort: 6001,
  key: 'your-env-key',
  // ...
})

Then, you can use the instance to subscribe to your channel as you would normally.

[SantiSnow]

Thanks for the solution provided. I was able to create the Echo instance with it, but I don't seem to be able to hear any events from the channels. This is my code:

const EchoInstance = new Echo({
        broadcaster: 'pusher',
        Pusher,
        wsHost: 'my host',
        wssHost: 'my host',
        wsPort: 6001,
        wssPort: 6001,
        key: 'my key',
        cluster: 'us2',
});

const channel = EchoInstance.private("private.messages.1");

channel.subscribed(() => {
        console.log("subscribed to channel")
}).listen('.message', (e) => {
        console.log("event fired", e);
})

I got no errors or warnings
Any suggestions?

[SantiSnow]

After a lot of errors and tries, I was able to connect to public channels in React Native. This is the code I used:

    useEffect(() => {
        const echo = new Echo({
            broadcaster: 'pusher',
            key: 'pusher-app-key',
            cluster: 'mt1',
            wsHost: 'my-domain.com',
            wsPort: 6001,
            wssPort: 6001,
            encrypted: true,
            forceTLS: false,
            enabledTransports: ['ws', 'wss'],
            authEndpoint: 'https://my-domain.com/broadcasting/auth',
            auth: {
                headers: {
                    Authorization: authToken,
                },
            },
        });

        const channel = echo.private(channelUri);
        channel.subscribed(() => {
            console.log("connected");
        }).listen(eventName, (event) => {
            console.log(event);
        }).error((error) => {
            console.log(error);
        });
    }, []);

My problem is that I cant connect to Private channels. I constantly get the error:

{"error": "Unable to retrieve auth string from channel-authorization endpoint - received status: 403 from https://my-domain.com/broadcasting/auth. Clients must be authorized to join private or presence channels. See: https://pusher.com/docs/channels/server_api/authorizing-users/", "status": 403, "type": "AuthError"}

Any help is apreciated.