Trigger an event to private channel in react app

Question

I want to trigger an event to pusher private channel and my server side language is laravel I reviewed a lot of resources, but I did not find a comprehensive approach which covers both the server side and the front side Finally I got this solution in the first step :

 export const SendChat = () => {
    try {
        var pusher = new Pusher('YOUR_APP_KEY', {
            cluster: 'ap2',
            forceTLS: true,
            authTransport: 'jsonp',
            authEndpoint: `${baseUrl}pusher/auth`,
        });
        var channel = pusher.subscribe('private-channel');
        channel.bind('pusher:subscription_succeeded', function() {
            var triggered = channel.trigger('client-EVENT_NAME', { 'message': 'Hi ....' });
            console.log(triggered)
        });

    } catch (error) {
        console.error(error);
    }
}

and call it somewhere

<Button onClick={this.props.SendChat}  waves='light' >Send</Button>

you must Enable client events in pusher account setting

login to your pusher account -> select the channel ->App Settings -> select Enable client events -> update

add your app key, channel name and event name after that we need authorization in server side this is sample laravel code first add this route in web.php

Route::get('pusher/auth', 'PusherController@pusherAuth');

make PusherController.php like this :

public function pusherAuth()
{
    $user = auth()->user();

    if ($user) {
        $pusher = new Pusher('auth_key', 'secret', 'app_id');
        $auth= $pusher->socket_auth(Input::get('channel_name'), Input::get('socket_id'));
        $callback = str_replace('\\', '', $_GET['callback']);
        header('Content-Type: application/javascript');
        echo($callback . '(' . $auth . ');');
        return;
    }else {
        header('', true, 403);
        echo "Forbidden";
        return;
    }
}

test it you should see something like this

 Pusher : State changed : connecting -> connected with new socket ID 3953.****556
Pusher : Event sent : {"event":"pusher:subscribe","data":{"auth":"83045ed1350e63c912f5:328fb78165d01f7d6ef3bb6d4a30e07c9c0ad0283751fc2c34d484d4fd744be2","channel":"private-chat"}}
Pusher : Event sent : {"event":"client-MessageSent","data":{"message":"Hi ...."},"channel":"private-chat"}
true

thank you, I want to know can I use this code for react-native too? — Moein Hosseini, Mar 04 '19 at 14:05
Can you edit your question to provide information on hat the issue is that you are facing, including errors. — doydoy, Mar 04 '19 at 14:05
Yes, of course, reactjs and react native are not very different, and you can implement it like this. — Bakhtiar, Mar 04 '19 at 14:34
can we use authTransport: 'json' instead of authTransport: 'jsonp' ? — Moein Hosseini, Mar 05 '19 at 14:01
no pusher use JSONP for authentication channel .you can refer to https://stackoverflow.com/questions/2887209/what-are-the-differences-between-json-and-jsonp — Bakhtiar, Mar 05 '19 at 14:04

score -1 · Answer 1 · answered Aug 16 '21 at 22:07

For work with WebSockets via Pusher on Laravel, I recommended using the package Laravel Echo for React part. And on the backend side in config/broadcasting.php setup configuration for Pusher. See more detail on official documentation Laravel how to use Pusher on the backend side and frontend side. https://laravel.com/docs/8.x/broadcasting#pusher-channels

Trigger an event to private channel in react app

1 Answers1