在React应用程序中触发一个私有频道的事件。

13 浏览
0 Comments

在React应用程序中触发一个私有频道的事件。

我想要触发一个事件来推送到Pusher的私有频道，我的服务器端语言是laravel。我查阅了很多资源，但没有找到一个全面的方法，既涵盖了服务器端，又涵盖了前端。最终我找到了这个解决方案：\n第一步：\n

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);
    }
}

\n然后在某个地方调用它：\n

\n你必须在Pusher账号设置中启用客户端事件：\n

登录到Pusher账号 -> 选择频道 -> 应用设置 -> 选择启用客户端事件 -> 更新

\n在此之后，添加你的应用密钥、频道名称和事件名称。然后我们需要在服务器端进行授权，这是示例laravel代码，首先在web.php中添加以下路由：\n

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

\n创建PusherController.php文件，内容如下：\n

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;
    }
}

\n测试一下，你应该会看到类似于以下内容：\n

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

0

2 答案

0 Comments

问题出现的原因：在使用Pusher进行WebSockets开发时，推荐使用Laravel Echo作为React部分的包。在后端的config/broadcasting.php文件中设置Pusher的配置。

解决方法：参考Laravel的官方文档，了解如何在后端和前端使用Pusher。

文章内容如下：

对于在Laravel中使用Pusher进行WebSockets开发，我推荐使用React部分的包Laravel Echo。在后端方面，在config/broadcasting.php中设置Pusher的配置。更多详细信息请参考Laravel官方文档，了解如何在后端和前端使用Pusher。

链接：https://laravel.com/docs/8.x/broadcasting#pusher-channels

0
0 Comments

问题的出现原因是需要在React应用中触发一个事件到私有频道，但是缺乏相关的配置和代码实现。解决方法是在后端进行相应的配置，并在前端代码中进行Pusher的实例化和事件绑定。

首先需要完成不使用Pusher的聊天场景，即用户能够通过API从前端发送消息并将其存储在数据库中。完成这一步后，就可以很容易地将Pusher集成到流程中，只需要广播一个事件，通知Socket服务器向频道上的所有/其他用户广播消息。

对于Pusher的身份验证，不需要显式地创建路由和方法。只需要在config/app.php中取消注释BroadcastServiceProvider，然后运行php artisan route:list命令，会看到一个用于广播的路由broadcasting/auth。可以在这个路由之前添加/api前缀，然后在BroadcastServiceProvider.php中使用Broadcast::routes方法进行配置。

在ReactJS中创建一个Pusher实例的服务，并在构造函数中进行实例化。可以在页面加载时调用这段代码。

然后需要订阅频道，通过Pusher的实例可以订阅频道并绑定事件。在函数组件或页面中获取Pusher实例后，可以使用pusher.subscribe方法订阅频道，并使用channel.bind方法绑定事件。

最后，在后端编写一个存储消息的方法，并在其中使用broadcast方法广播新消息事件给其他用户。

以上就是解决问题的方法，可以在React Native中进行尝试，但作者并没有在React Native中进行过测试，不过由于这是后端的更改，所以作者相信它对任何JS框架都能正常工作。

0