Pusher入门：使用Channels，PHP和Vue.js构建聊天应用程序

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