How to implement laravel websockets to React Native? #1083

sherlah · 2023-01-10T04:41:38Z

sherlah
Jan 10, 2023

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 · 2023-05-30T09:28:43Z

rambavd
May 30, 2023

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.

2 replies

SantiSnow Jan 27, 2024

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 Feb 1, 2024

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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to implement laravel websockets to React Native? #1083

{{title}}

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{title}}

Select a reply

How to implement laravel websockets to React Native? #1083

sherlah Jan 10, 2023

Replies: 1 comment · 2 replies

rambavd May 30, 2023

SantiSnow Jan 27, 2024

SantiSnow Feb 1, 2024

sherlah
Jan 10, 2023

Replies: 1 comment 2 replies

rambavd
May 30, 2023