在本系列中，我們一直在學(xué)習(xí)Pusher中的Channels ，該平臺(tái)可讓您為用戶提供所需的無(wú)縫實(shí)時(shí)體驗(yàn)。

在整個(gè)系列中，我們嚴(yán)格地研究了服務(wù)器事件-源于服務(wù)器的事件-但我們也能夠觸發(fā)來(lái)自客戶端的事件。 這些稱(chēng)為客戶端事件，它們提供的服務(wù)與服務(wù)器事件不同，因?yàn)槟承┎僮骺赡懿恍枰?yàn)證或持久性。

客戶端事件具有幾個(gè)限制，您的應(yīng)用程序必須遵守這些限制才能使用它們。 最值得注意的是：

• 必須通過(guò)“渠道”應(yīng)用程序的儀表板啟用客戶端事件。
• 客戶事件只能在私人和在線渠道上發(fā)布。
• 它們不會(huì)傳遞給發(fā)起事件的客戶端。
• 每個(gè)客戶端每秒不得超過(guò)十條消息。

觸發(fā)客戶事件

我們將通過(guò)向我們的私人聊天應(yīng)用程序添加鏈接來(lái)查看客戶端事件的示例，該鏈接會(huì)向所有連接的客戶端發(fā)送警報(bào)。 客戶端事件是由Pusher庫(kù)的subscribe()方法返回的對(duì)象觸發(fā)的。 我們?cè)贑hannelsChat Vue.js組件中使用以下方法使用此方法：

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

觸發(fā)客戶端事件與觸發(fā)服務(wù)器事件非常相似。 您可以使用channel.trigger()來(lái)初始化事件，并將事件名稱(chēng)和事件數(shù)據(jù)傳遞給它，如下所示：

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

客戶端事件名稱(chēng)必須以client-開(kāi)頭，如代碼所示。 名稱(chēng)的其余部分完全取決于您。 事件數(shù)據(jù)只不過(guò)是一個(gè)普通JavaScript對(duì)象，其中包含要隨事件發(fā)送的屬性（及其值）。

修改聊天應(yīng)用程序

聊天應(yīng)用程序的channel對(duì)象駐留在ChannelsChat Vue.js組件中，在該組件中，我們可以創(chuàng)建該對(duì)象并為send-message事件設(shè)置偵聽(tīng)器。 我們可以重組此組件，以便它提供觸發(fā)客戶端事件的機(jī)制。

我們要做的第一件事是將channel對(duì)象存儲(chǔ)為實(shí)例數(shù)據(jù)，以便我們可以在整個(gè)組件中對(duì)其進(jìn)行引用。 我們將通過(guò)在組件中添加channel屬性來(lái)做到這一點(diǎn)，如下所示：

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

然后，我們將更改created()掛鉤，以便將channel對(duì)象存儲(chǔ)在新的channel屬性中，而不是存儲(chǔ)在channel變量中。

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

只要記住，這種變化要求我們前綴的上次使用channel與this 。

觸發(fā)客戶事件

現(xiàn)在，讓我們添加一個(gè)將觸發(fā)客戶端事件的方法。 我們將其稱(chēng)為trigger() ，其代碼如下所示：

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

它接受事件名稱(chēng)和要包含在事件中的消息，并將該數(shù)據(jù)傳遞到this.channel.trigger() ，從而觸發(fā)客戶端事件。

用戶主要與MessageSend組件進(jìn)行交互，因?yàn)樗糜谳斎牒桶l(fā)送消息的UI。 因此，我們將trigger()方法作為道具傳遞給MessageSend ，如下所示：

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

聆聽(tīng)客戶活動(dòng)

我們?cè)诖私M件中需要做的最后一件事是偵聽(tīng)client-send-alarm事件。 監(jiān)聽(tīng)客戶端事件幾乎與監(jiān)聽(tīng)服務(wù)器事件相同，唯一的不同是我們傳遞給bind()方法的數(shù)據(jù)。 將以下內(nèi)容添加為created()鉤子的最后一行：

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

對(duì)于此事件，我們不會(huì)將提供的消息推送到聊天屏幕。 相反，我們僅在警報(bào)框中顯示提供的消息。

接線UI

在MessageSend組件中，讓我們首先將觸發(fā)道具添加到該組件。

props: ['trigger']

然后，在“ 發(fā)送”按鈕之后添加新的警報(bào)鏈接。

<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聲明中。 這是此方法的非常簡(jiǎn)單的代碼：

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

sendAlarm()方法僅調(diào)用trigger() ，將client-send-alarm作為事件名稱(chēng)和Alarm! 作為消息。

測(cè)試變更

為了查看我們的代碼更改的結(jié)果，您需要將兩個(gè)客戶端連接到聊天應(yīng)用程序。 盡管這似乎很明顯，但有兩個(gè)很好的理由讓兩個(gè)客戶端打開(kāi)：發(fā)起事件的客戶端沒(méi)有收到事件。

因此，在打開(kāi)兩個(gè)客戶端的情況下，單擊“ 警報(bào)”！ 鏈接到一個(gè)客戶端中，您將看到在另一個(gè)客戶端中處理的事件，如下所示：

左側(cè)的客戶端觸發(fā)了該事件，您可以在右側(cè)的客戶端中看到該事件的處理情況。

結(jié)論

不用說(shuō)，在支持Channels的應(yīng)用程序中使用的大多數(shù)事件都是服務(wù)器事件，但是在某些情況下，您可能希望啟動(dòng)不需要服務(wù)器端驗(yàn)證或持久性的事件。 使用Pusher的Channels ，可以非常輕松地觸發(fā)和監(jiān)聽(tīng)客戶端事件！

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

總結(jié)

以上是生活随笔為你收集整理的Pusher入门：客户端事件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。