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

Pusher 的 Channels 是一个平台，可让您为您的应用程序提供无缝的实时数据。
在这篇文章中，我将向您展示如何编写一个非常简单的聊天应用程序的功能组件。这是一个精简的示例，但您将看到 Channels 如何简化 Web 应用程序中实时通信的实现。

Pusher 入门教学：使用Channels、PHP和Vue.js构建聊天应用程序第1张

设置服务器

我们的服务器应用程序是一个名为messages.php 的 PHP 文件，它将处理来自浏览器的 post 请求。我们的消息处理程序将客户端的消息发送到 Channels 服务，然后将这些消息广播给其他客户端。

当您的服务器应用程序使用 PHP 时，您希望下载并使用 Channels 库，您可以使用 composer 和以下命令安装该库：

composer require pusher/pusher-php-server

messages.php的代码几乎与您可以在 Channels 仪表板的“入门”页面上找到的内容完全相同。只有一些修改。

首先，您需要要求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
);

如果启用该选项，我的 PHP 安装将不起作用encrypted，因此我从代码中省略了它。您的里程可能会有所不同，但请务必注意，该encrypted选项决定了服务器和频道之间发送的数据是否加密。它与 Channels 和您的客户端之间的连接无关——客户端库会处理它。

我们服务器代码的最后一行将消息数据发送到 Channels：

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

与其他服务器库一样，我们将三件事传递给该trigger()方法：

频道名称：anon-chat
活动名称：send-message
有效载荷：$data

请注意，通道和事件名称与“入门”页面上使用的通道和事件名称不同。您不必在仪表板中创建新渠道或定义自定义事件；只需在代码中使用您想要的任何通道和事件名称。

完成客户端

我们的客户端是一个包含三个 vue.js 组件为 UI 提供支持的网页。主要组件称为ChannelsChat，我们将在其中放置***通道中事件的Pusher对象。让我们使用钩子。send-messageanon-chatcreated

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()发送到我们的数组中，如下面的代码所示：

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/>的值（记住它们是绑定的）。如果请求失败，一个警告框会告诉用户发生了错误。

Pusher 入门教学：使用Channels、PHP和Vue.js构建聊天应用程序第2张