Pusher入门：客户端事件

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

在整个系列中，我们严格地研究了服务器事件-源于服务器的事件-但我们也能够触发来自客户端的事件。这些称为客户端事件，它们提供的服务与服务器事件不同，因为某些操作可能不需要验证或持久性。

客户端事件具有几个限制，您的应用程序必须遵守这些限制才能使用它们。最值得注意的是：

必须通过“渠道”应用程序的仪表板启用客户端事件。
客户事件只能在私人和在线渠道上发布。
它们不会传递给发起事件的客户端。
每个客户端每秒不得超过十条消息。

触发客户事件

我们将通过向我们的私人聊天应用程序添加链接来查看客户端事件的示例，该链接会向所有连接的客户端发送警报。客户端事件是由Pusher库的subscribe()方法返回的对象触发的。我们在ChannelsChat Vue.js组件中使用以下方法使用此方法：

let channel = pusher.subscribe('private-chat');

触发客户端事件与触发服务器事件非常相似。您可以使用channel.trigger()来初始化事件，并将事件名称和事件数据传递给它，如下所示：

channel.trigger('client-send-alarm', { message: 'Alarm!' });

客户端事件名称必须以client-开头，如代码所示。名称的其余部分完全取决于您。事件数据只不过是一个普通JavaScript对象，其中包含要随事件发送的属性（及其值）。

修改聊天应用程序

聊天应用程序的channel对象驻留在ChannelsChat Vue.js组件中，在该组件中，我们可以创建该对象并为send-message事件设置侦听器。我们可以重组此组件，以便它提供触发客户端事件的机制。

我们要做的第一件事是将channel对象存储为实例数据，以便我们可以在整个组件中对其进行引用。我们将通过在组件中添加channel属性来做到这一点，如下所示：

data() {return {messages: [],channel: null}}

然后，我们将更改created()挂钩，以便将channel对象存储在新的channel属性中，而不是存储在channel变量中。

// let channel = pusher.subscribe('private-chat'); // old codethis.channel = pusher.subscribe('private-chat');

只要记住，这种变化要求我们前缀的上次使用channel与this 。

触发客户事件

现在，让我们添加一个将触发客户端事件的方法。我们将其称为trigger() ，其代码如下所示：

methods: {trigger(eventName, message) {this.channel.trigger(eventName, { message });}}

它接受事件名称和要包含在事件中的消息，并将该数据传递到this.channel.trigger() ，从而触发客户端事件。

用户主要与MessageSend组件进行交互，因为它包含用于输入和发送消息的UI。因此，我们将trigger()方法作为道具传递给MessageSend ，如下所示：

<message-send :trigger="trigger" />

聆听客户活动

我们在此组件中需要做的最后一件事是侦听client-send-alarm事件。监听客户端事件几乎与监听服务器事件相同，唯一的不同是我们传递给bind()方法的数据。将以下内容添加为created()钩子的最后一行：

this.channel.bind('client-send-alarm', (data) => alert(data.message));

对于此事件，我们不会将提供的消息推送到聊天屏幕。相反，我们仅在警报框中显示提供的消息。

接线UI

在MessageSend组件中，让我们首先将触发道具添加到该组件。

props: ['trigger']

然后，在“ 发送”按钮之后添加新的警报链接。

<div class="col-sm-2"><button type="submit" class="btn btn-primary">Send</button></div><div class="col-sm-2"><a href="#" @click.prevent="sendAlarm">Alarm!</a></div>

链接的click事件绑定到sendAlarm()方法，我们将其添加到组件的methods声明中。这是此方法的非常简单的代码：

methods: {// sendMessage() heresendAlarm() {this.trigger('client-send-alarm', 'Alarm!');}}

sendAlarm()方法仅调用trigger() ，将client-send-alarm作为事件名称和Alarm! 作为消息。

测试变更

为了查看我们的代码更改的结果，您需要将两个客户端连接到聊天应用程序。尽管这似乎很明显，但有两个很好的理由让两个客户端打开：发起事件的客户端没有收到事件。

因此，在打开两个客户端的情况下，单击“ 警报”！ 链接到一个客户端中，您将看到在另一个客户端中处理的事件，如下所示：

左侧的客户端触发了该事件，您可以在右侧的客户端中看到该事件的处理情况。

结论

不用说，在支持Channels的应用程序中使用的大多数事件都是服务器事件，但是在某些情况下，您可能希望启动不需要服务器端验证或持久性的事件。使用Pusher的Channels ，可以非常轻松地触发和监听客户端事件！

翻译自: https://code.tutsplus.com/tutorials/get-started-with-pusher-client-events--cms-31444