Pusher的Channels是一個(gè)平臺(tái)，可讓您為應(yīng)用提供無縫的實(shí)時(shí)數(shù)據(jù)。

在這篇文章中，我將向您展示如何編寫一個(gè)非常簡(jiǎn)單的聊天應(yīng)用程序的功能組件。 這是一個(gè)簡(jiǎn)化的示例，但是您將看到Channels如何簡(jiǎn)化Web應(yīng)用程序中實(shí)時(shí)通信的實(shí)現(xiàn)。

設(shè)置服務(wù)器

我們的服務(wù)器應(yīng)用程序是一個(gè)名為messages.php的 PHP文件，它將處理來自瀏覽器的POST請(qǐng)求。 我們的消息處理程序會(huì)將客戶端的消息發(fā)送到Channels服務(wù)，然后該服務(wù)將這些消息廣播到其他客戶端。

在將PHP用于服務(wù)器應(yīng)用程序時(shí)，您要下載并使用Channels庫(kù)，并且可以使用composer和以下命令安裝該庫(kù)：

composer require pusher/pusher-php-server

messages.php的代碼幾乎與您在“渠道”信息中心的“入門”頁(yè)面上找到的代碼完全一樣。 僅有一些修改。

首先，您需要要求autoload.php文件才能使用Pusher庫(kù)：

require './../vendor/autoload.php';

接下來，來自客戶端的數(shù)據(jù)為JSON格式，因此我們顯然希望將其解碼為可行的PHP數(shù)組。

$data = json_decode(file_get_contents('php://input'), true);

然后，我們要設(shè)置Pusher對(duì)象，以便隨后可以觸發(fā)事件。

$options = array('cluster' => 'us2');$pusher = new Pusher\Pusher('427017da1bd2036904f3','c46fabbaf65c4c31686b','534815',$options);

如果啟用了encrypted選項(xiàng)，我的PHP安裝將無法正常工作，因此我從代碼中省略了它。 您的里程可能會(huì)有所不同，但是請(qǐng)務(wù)必注意， encrypted選項(xiàng)確定服務(wù)器和渠道之間發(fā)送的數(shù)據(jù)是否已加密。 它與Channels與客戶端之間的連接無關(guān)—客戶端庫(kù)負(fù)責(zé)處理。

服務(wù)器代碼的最后一行將消息數(shù)據(jù)發(fā)送到Channels：

$pusher->trigger('anon-chat', 'send-message', $data);

與其他服務(wù)器庫(kù)一樣，我們將三件事傳遞給trigger()方法：

頻道名稱： anon-chat

事件名稱： send-message

有效載荷： $data

請(qǐng)注意，通道和事件名稱與“入門”頁(yè)面上使用的通道和事件名稱不同。 您不必在儀表板中創(chuàng)建新通道或定義自定義事件。 只需在代碼中使用所需的任何通道和事件名稱即可。

完成客戶

我們的客戶是一個(gè)網(wǎng)頁(yè)，其中包含三個(gè)為UI提供動(dòng)力的Vue.js組件。 主要成分是所謂的ChannelsChat ，這是我們將讓我們的Pusher對(duì)象偵聽send-message的事件anon-chat頻道。 讓我們使用created鉤子。

created() {let pusher = new Pusher('427017da1bd2036904f3', {cluster: 'us2',encrypted: true});let channel = pusher.subscribe('anon-chat');channel.bind('send-message', function() {} // to be implemented later);}

在此代碼中，我們創(chuàng)建了Pusher對(duì)象，訂閱了anon-chat頻道，并監(jiān)聽了send-message事件。

因?yàn)檫@是一個(gè)聊天應(yīng)用程序，所以我們需要存儲(chǔ)消息歷史記錄，以便使用該應(yīng)用程序的任何人都可以看到他們?cè)跁?huì)話期間收到的所有消息。 完成此操作的最簡(jiǎn)單方法是將每個(gè)消息作為元素存儲(chǔ)在數(shù)組中。 因此，讓我們向此組件添加一個(gè)messages數(shù)據(jù)屬性，如以下代碼所示：

data() {return {messages: []}}

然后，當(dāng)我們收到一條消息時(shí)，我們只需push()其push()到我們的數(shù)組中，如以下代碼所示：

channel.bind('send-message', (data) => this.messages.push(data.message));

然后，我們將messages到MessageView組件：

<message-view :messages="messages" />

傳送訊息

我們的最后一個(gè)代碼屬于MessageSend組件； 當(dāng)用戶鍵入一條消息并單擊“發(fā)送”按鈕時(shí)，我們需要將該數(shù)據(jù)發(fā)送到messages.php 。

首先，讓我們確保用戶在文本框中輸入了一些內(nèi)容。 否則，無需執(zhí)行任何操作！

sendMessage(e) {if (!this.message) {return;}// to be continued...

message屬性綁定到<input/>的值，因此我們將使用它來確定是否有任何數(shù)據(jù)。

接下來，我們將POST請(qǐng)求發(fā)送到message.php ，數(shù)據(jù)是一個(gè)具有message屬性的對(duì)象。

// (continued)axios.post('/message.php', {message: this.message}).then(() => {this.message = '';}).catch((err) => {alert(err);});}

如果請(qǐng)求成功，我們將清除message屬性的值，這又將清除<input/>的值（請(qǐng)記住它們已綁定）。 如果請(qǐng)求失敗，則會(huì)出現(xiàn)一個(gè)警告框，通知用戶發(fā)生了錯(cuò)誤。

代碼就是這樣。 因此，打開兩個(gè)瀏覽器窗口并將它們指向index.php 。 開始發(fā)送消息，您應(yīng)該看到兩個(gè)窗口都將自動(dòng)更新并顯示消息。

結(jié)論

如您所見，使用Channels可以非常輕松地快速將實(shí)時(shí)通信添加到您的應(yīng)用程序中，它甚至不需要很多代碼！

您還了解到，編寫代碼時(shí)可以即時(shí)創(chuàng)建頻道和事件。 無需在使用它們之前進(jìn)行設(shè)置。

最后，您學(xué)習(xí)了如何設(shè)置應(yīng)用程序以合并實(shí)時(shí)通信。 只需處理來自服務(wù)器的傳入用戶輸入，然后根據(jù)該輸入觸發(fā)事件。

翻譯自: https://code.tutsplus.com/tutorials/get-started-with-pusher-build-a-chat-app-with-channels-php-and-vuejs--cms-31252

總結(jié)

以上是生活随笔為你收集整理的Pusher入门：使用Channels，PHP和Vue.js构建聊天应用程序的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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