• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载

Pusher 入门教程:使用状态通道

Presence 频道建立在私人频道提供的安全性之上,但它们增加了了解哪些用户订阅并连接到该频道的好处。最好的部分是实现和使用状态通道是多么容易,如果您已经将应用程序配置为使用私有通道,则更容易。您将在这篇文章中学习如何使用在线状态频道。

Pusher 入门教程:使用状态通道  第1张

一个更好的聊天应用程序

我们的聊天应用程序目前使用私人频道,以促进即时的客户端/服务器通信。因此,将我们的应用配置为使用在线状态通道将非常容易。让我们从服务器应用程序开始。

修改服务器

为了使用私有通道,我们配置了一个端点以确保用户通过我们的应用程序进行身份验证。该端点执行ChannelsController'sauthorizeUser()方法,并调用 Pusher 库的socket_auth()方法来帮助验证用户。为了使用在线状态通道,我们需要更改 authorizeUser() 为调用 Pusher 库的 presence_auth()方法,如下所示:

public function authorizeUser(Request $request) {
    if (!Auth::check()) {
        return new Response('Forbidden', 403);
    }
    $presencedata = ['name' => Auth::user()->name];
    echo $this->pusher->presence_auth(
        $request->input('channel_name'), 
        $request->input('socket_id'),
        Auth::user()->id,
        $presenceData
    );
}

但是方法名的改变只是第一次修改;我们还必须提供presence_auth()用户的唯一标识符以及我们想提供的有关用户的任何额外信息。上面的代码将这些额外的用户数据存储在$presenceData变量中,并将其作为最终参数传递给presence_auth().

此外,我们必须修改sendMessage()方法。第一个变化是频道名称。就像我们所有其他名称一样,我们必须在通道名称前加上前缀来表示我们要使用的通道类型:presence-在这种情况下,如以下代码所示。

$this->pusher->trigger('presence-chat', 'send-message', $data);

我们还可以修改随事件发送的数据——我们可以包含用户 ID,而不是提供启动事件的用户名。

$data['user'] = Auth::user()->id;

因为我们将使用在线状态通道,所以我们可以从客户端查找用户名,这个小改动将减少通过网络传递的数据大小。

更改客户端

客户端的channel对象包含我们使用订阅频道所需的一切,查询用户数据也不例外。我们的channel对象有一个名为的属性members,我们可以使用它来检索特定用户的信息。我们将在send-message事件处理程序中使用此对象,如下所示:

this.channel.bind('send-message', (data) => {
    let user = this.channel.members.get(data.user);
    this.messages.push({
        message: data.message,
        user: user.info.name
    });
});

在这里,我们调用this.channels.members.get()并传入用户的 ID(请记住,我们的服务器应用程序现在提供 ID 而不是名称)。这个方法返回一个带有info属性的对象,这个对象包含了我们在服务器端方法中的变量中 info提供的所有额外信息。所以在上面的代码中,我们用.$presenceDataauthorizeUser()user.info.name

我们还可以修改该trigger()方法以包含有关发起客户端警报事件的用户的信息。要检索当前登录用户的成员数据,请使用该me属性,如以下代码所示:

trigger(eventName, message) {
    this.channel.trigger(eventName, {
        message,
        user: this.channel.members.me
   });
}

在此代码中,我们user向事件负载添加一个属性并将其设置为登录用户的用户对象。这意味着我们可以修改client-send-alarm事件处理程序以在警报消息中包含用户名,如下所示:

this.channel.bind('client-send-alarm', (data) =>
    alert(`${data.user.info.name}: ${data.message}`));

在这里,我们使用data.user.info.name访问用户名,以便我们可以看到是哪个用户发送了警报,如下所示:

Pusher 入门教程:使用状态通道  第2张

结论

使用在线状态通道不仅为您的应用程序提供了匿名通道的更高安全性,而且还使您能够查询订阅该通道的用户的用户数据。使用 Pusher 的Channels  ,为您的应用程序添加安全、实时和功能丰富的通信非常容易。


文章目录
  • 一个更好的聊天应用程序
    • 修改服务器
    • 更改客户端
  • 结论