在本系列中，我們一直在學習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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。