Pusher入门教学：客户端事件

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

在本系列中，咱们严格研究了服务器事件（源自服务器的事件），但咱们也有能力从客户端触发事件。这些称为客户端事件，它们提供与服务器事件不同的服务，因为某些操作可能不需要验证或持久性。

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

• 客户端事件必须通过您的 Channels 应用程序的仪表板启用。

• 客户端事件只能在私人和在线通道上发布。

• 它们不会传递给启动事件的客户端。

• 它们被限制为每个客户端每秒不超过 10 条消息。

触发客户端事件

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

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

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

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

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

修改聊天应用程序

聊天应用程序的channel对象位于Vue.js 组件中——咱们在这里创建对象并为事件ChannelsChat设置监听器。send-message咱们可以重构这个组件，以便它提供触发客户端事件的机制。

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

data() {

    return {

        messages: [],

        channel: null

    }

}

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

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

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

请记住，此更改要求咱们为之前的使用加上前缀channelwith this。

触发客户端事件

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

methods: {

    trigger(eventName, message) {

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

    }

}

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

用户主要与MessageSend组件交互，因为它包含用于输入和发送消息的 UI。所以咱们将把trigger()方法作为一个 prop 传递给MessageSend，就像这样：

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

监听客户端事件

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

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

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

连接 UI 

在MessageSend组件中，咱们先给组件添加 trigger prop。

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() here
    sendAlarm() {
        this.trigger('client-send-alarm', 'Alarm!');
    }
}

该sendAlarm()方法只是调用trigger()，client-send-alarm作为事件名称和Alarm!消息传递。

测试更改

为了查看咱们代码更改的结果，您需要两个连接到聊天应用程序的客户端。虽然这看起来很明显，但有一个很好的理由让两个客户端打开：启动事件的客户端没有接收到事件。

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

左边的客户端触发了事件，你可以看到它在右边的客户端中处理。

结论

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