Pusher入门：使用状态通道

在本系列中，我们一直在学习Pusher中的Channels ，该平台可让您为用户提供所需的无缝实时体验。

存在通道建立在专用通道提供的安全性的基础上，但是它们增加了知道哪些用户已订阅并连接到该通道的好处。 最好的部分是实现和使用状态通道的容易程度，如果您已经将应用程序配置为使用私有通道，则更加容易。 您将在本文中学习如何使用在线渠道。

更好的聊天应用

我们的聊天应用程序当前使用专用通道，以促进即时的客户端/服务器通信。 因此，配置我们的应用程序以使用状态通道将非常容易。 让我们从服务器应用程序开始。

修改服务器

为了使用专用通道，我们配置了一个端点以确保用户已通过我们的应用程序进行身份验证。 该端点执行ChannelsController的authorizeUser()方法，并调用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对象包含我们在服务器上的authorizeUser()方法的$presenceData变量中提供的所有其他信息。 因此，在上面的代码中，我们使用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的Channels ，可以非常轻松地为您的应用添加安全，实时且功能丰富的通信。

翻译自: https://code.tutsplus.com/tutorials/get-started-with-pusher-using-presence-channels--cms-31448