“练习3-1”演示了使用Pusher接收事件是多么容易，但是发送事件又如何呢？

由于Pusher有丰富的API库，因此发送事件和接收事件一样容易。我们将使用PHP的API库。该库托管在GitHub服务上，地址为https://github.com/pusher/pusher-php-server。

练习3-2　使用Pusher发布和订阅

为了熟悉Pusher的服务器端功能，让我们构建一个简单的信息系统。

我们将重用第2章中使用过的HTML和CSS的大部分内容并以它们作为基础，以节约时间。创建新的HTML文件，并输入下列内容：

该代码创建了一个接收名字和信息的简单的表单。同时以无序列表的形式显示所有接收到的信息。

接着，我们添加一些CSS。创建文件夹styles，并在其中添加新文件layout.css。该文件已经连接到前面创建的HTML文件中了。在新的CSS文件中添加下面的代码：

在浏览器中载入HTML文件，你将看到有CSS样式的标记(见图3-5)。

现在你已经有了一个页面。该页面包括一个有用户界面的区域，可以用来发送和接收消息。这样，我们可以开始通过发布和订阅添加一些实时功能。在HTML中，我们知道表单会将条目提交到文件post.php，现在我们开始创建那个文件，并包括Pusher的PHP库。

从https://github.com/pusher/pusher-php-server下载Pusher的PHP库，并将lib文件夹复制到HTML文件所在的同一文件夹下。

在保存后，可以开始在post.php中添加几行代码来创建一个新的Pusher对象并发送数据。

前两行打开错误报告，以使调试更加容易。(在用于发布的网站版本中，可以将其关闭。)接下来，包括Pusher的PHP库，并定义应用程序的证书(请不要忘记使用自己的证书来替换)，并实例化一个Pusher对象并存储在变量$pusher中。

接下来，脚本检查两个需要的表单值：name和message。如果它们存在，将它们存储在数组中。接着，用trigger方法将数组传递给Pusher，则会触发在“练习3-2”中那个通道的send-message事件。事件数据将以JSON的形式传递给trigger方法，而对JSON的处理由库为我们执行。

到此为止，提交表单会引起Pusher发送事件。然而，在我们看到应用程序的效果前，我们需要用JavaScript添加一个事件处理程序。首先，我们还是先用Pusher调试控制台手动检查一下，确认事件可以触发(见图3-6)。

为了在应用程序中以可视化的方式显示这一消息，我们需要编写JavaScript来连接Pusher、订阅通道并绑定事件。

我们的HTML文件包括一个称为init.js的脚本。因此，让我们在scripts文件夹下创建那个文件。在该脚本文件中，我们将添加两个代码块，一个会侦听服务器端脚本触发的事件，另一个会捕获提交的表单并在不刷新页面的情况下将它们提交给post.php。首先，让我们为自定义的Pusher事件添加一个事件侦听器：

使用我们的应用程序密钥创建了一个新的Pusher对象。(与之前一样，别忘了使用自己的密钥。)接着，我们订阅了在“练习3-2”中的服务器端使用的通道。

接下来，我们要对那个通道绑定事件处理程序并捕获send-message事件。触发该事件时，我们将无序列表的消息显示，并确保去除其中用做占位符的消息。接着，将新消息添加到列表的尾部。

重新载入页面会失去应用程序之前用JavaScript从浏览器添加的所有消息。为了避免重新载入页面，我们需要添加第二个代码块来捕获表单提交，并通过AJAX提交它们，而不使用页面刷新。插入下面的粗体代码来添加这一功能：

这个代码捕获submit事件，并将序列化的表单数据发送给post.php，同时清空消息输入。它保留name字段，使得重复的消息更易发送。在最后，它还将显示的焦点移回消息输入的末尾。

通过返回false，可以防止提交默认的表单，以阻止页面重新载入。

现在你已经可以测试该应用程序了。在浏览器中载入HTML文件，并发送一两条消息。正如预期的一样，会在右边的列表上显示。但是这还不是最激动人心的部分。

为了查看实时的威力，可以在两种不同的浏览器(或同一浏览器的两个窗口)上载入测试，开始发送一些消息。在没有轮询或页面刷新的情况下，你会看到一个窗口的事件会影响另一个窗口的显示(见图3-7)。这就是实时。