Pusher的Channels是一個平臺，可讓您為應用提供無縫的實時數據。

在這篇文章中，我將向您展示如何編寫一個非常簡單的聊天應用程序的功能組件。 這是一個簡化的示例，但是您將看到Channels如何簡化Web應用程序中實時通信的實現。

設置服務器

我們的服務器應用程序是一個名為messages.php的 PHP文件，它將處理來自瀏覽器的POST請求。 我們的消息處理程序會將客戶端的消息發送到Channels服務，然后該服務將這些消息廣播到其他客戶端。

在將PHP用于服務器應用程序時，您要下載并使用Channels庫，并且可以使用composer和以下命令安裝該庫：

composer require pusher/pusher-php-server

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

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

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

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

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

然后，我們要設置Pusher對象，以便隨后可以觸發事件。

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

如果啟用了encrypted選項，我的PHP安裝將無法正常工作，因此我從代碼中省略了它。 您的里程可能會有所不同，但是請務必注意， encrypted選項確定服務器和渠道之間發送的數據是否已加密。 它與Channels與客戶端之間的連接無關—客戶端庫負責處理。

服務器代碼的最后一行將消息數據發送到Channels：

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

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

頻道名稱： anon-chat

事件名稱： send-message

有效載荷： $data

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

完成客戶

我們的客戶是一個網頁，其中包含三個為UI提供動力的Vue.js組件。 主要成分是所謂的ChannelsChat ，這是我們將讓我們的Pusher對象偵聽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);}

在此代碼中，我們創建了Pusher對象，訂閱了anon-chat頻道，并監聽了send-message事件。

因為這是一個聊天應用程序，所以我們需要存儲消息歷史記錄，以便使用該應用程序的任何人都可以看到他們在會話期間收到的所有消息。 完成此操作的最簡單方法是將每個消息作為元素存儲在數組中。 因此，讓我們向此組件添加一個messages數據屬性，如以下代碼所示：

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

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

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

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

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

傳送訊息

我們的最后一個代碼屬于MessageSend組件； 當用戶鍵入一條消息并單擊“發送”按鈕時，我們需要將該數據發送到messages.php 。

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

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

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

接下來，我們將POST請求發送到message.php ，數據是一個具有message屬性的對象。

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

如果請求成功，我們將清除message屬性的值，這又將清除<input/>的值（請記住它們已綁定）。 如果請求失敗，則會出現一個警告框，通知用戶發生了錯誤。

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

結論

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

您還了解到，編寫代碼時可以即時創建頻道和事件。 無需在使用它們之前進行設置。

最后，您學習了如何設置應用程序以合并實時通信。 只需處理來自服務器的傳入用戶輸入，然后根據該輸入觸發事件。

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

總結

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

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