第3章　Pusher目前，我们已经为开发应用准备好了一些基础知识，并回顾了在构建该应用时要使用

的一些编程语言。现在可以开始熟悉那些要使用的新技术了。

首先，我们来熟悉Pusher。Pusher负责站点的实时交互。本章将探索Pusher的起源、

Pusher的底层技术、Pusher提供的一些帮助开发的工具，并通过开发一个简单的实时活动

跟踪应用来热热身。

3.1　Pusher简史

当前，软件即服务（Software as a Service，SaaS）是Internet上一个相对较新的趋势。

Pusher是其中的一部分。SaaS公司有偿为其他开发人员提供一些有用的工具、实用程序和

其他有价值的东西。这允许我们在不花费数日（或数周）时间解决诸如扩展性和跨浏览器

支持这样的问题的情况下使用非常强大的新技术。

在2010年年初，联合创始人Max Williams和Damien Tanner在英国运营着一个商店，这

个商店是最成功的Ruby On Rails商店之一。当他们发现在团队成员间有同步数据的需求之

后，他们构建了一个小工具以利用新的HTML5 WebSocket API。

当他们意识到使用他们的基础设施构建实时应用程序是多么容易时，他们看到了其在

用于内部管理工具之外的其他机会。

至此，Pusher已成长为实时SaaS市场上一个具有主导性质的势力，其客户名单令人印

象深刻，包括Groupon、MailChimp和SlideShare。

3.2　为什么要使用Pusher

使用像Pusher这样的托管服务最主要的原因之一是：它能够通过使原先较为困难的任

务更易实现而简化开发过程。其中的一个关键部分是目标实现的速度。但是还有其他部

分。由于我们将使用Pusher托管服务，因此值得强调这样做的优点。

第3章　Pusher　 　37

3.2.1　扩展性

基于云的SaaS首先能够提供对扩展性的保证。Pusher也是如此。Pusher提供了可扩展

的实时基础设施，使我们可以专注于为应用程序添加实时交互功能。

3.2.2　WebSocket、旧技术支持和自动重连接

第1章演示了WebSocket的强大之处。但遗憾的是，对于较旧的浏览器，或当涉及复

杂的网络时，我们仍然需要支持旧的技术。于是，Pusher也能够处理旧式浏览器的反馈，

降低了工作量。Pusher的JavaScript库会根据运行的浏览器和网络条件选择最合适的连接方

法。该库还会检测连接是否掉线，并在掉线时自动为你重新连接。

该库在用户的浏览器和Pusher服务间创建了一个连接，使得新数据可以即时发布和推

送。你也可以直接向客户端发布信息。我们将在本章后文更深入地探究其可用的功能。

3.2.3　其他客户端库

尽管WebSocket标准现在已经被HTML5纳入麾下，但是还是需要记得它是一个协议

的规范。这意味着所有支持TCP连接的技术都能够进行WebSocket连接。Pusher充分利用

了这点，同时，许多其他技术也提供了客户端库，包括为iOS系统开发的Objective-C库、

Android和桌面程序开发的Java库、Flash开发使用的ActionScript库以及为一般的.NET和

Silverlight运行环境提供的C#库。

3.2.4　REST API

对于任一托管服务，如果没有REST API，则其就显得不完整。Pusher也有REST API 。40

REST API主要用来发布数据，但它也提供在Pusher内请求应用程序状态的功能。提供

REST API意味着所有可以发出HTTP请求的技术都能使用该API。

3.2.5　服务器库

由于REST API需要身份验证和一些潜在的复杂需求，因此就有许多开发好的服务器

　REST纯粹主义者可能认为Pusher的REST API并不是严格满足REST要求的。这样我们可以将其归类为

Web API或HTTP API。

38　 　第一部分　熟悉必备技术

库以使执行API变得更容易。由于你只需要进行HTTP请求来调用REST API，因此可以预

期可供选用的库的列表会非常长 。最常用的库包括PHP、Ruby、.NET、Python、Node.js

和Java。41

3.2.6　开发人员工具

托管服务另一愈加有用的特性是它提供了一些开发人员工具，使得开发过程更加简

便。这通过提供那个服务的内部工作原理和日志信息实现。在Pusher这个例子中，这意味

着提供诸如与正在构建的应用程序有关的连接和数据流这样的信息。我们将使用这些工具

来构建应用程序。

3.2.7　文档

对于任何技术而言，文档都是必备的；对可以看做黑盒的托管服务更是如此。即使托

管服务开放了部分源码，或使用了开源的托管服务，你也不可能在托管服务所有组件的源

代码里查看来弄清发生了什么事情。

因此，带有很多示例代码的文档将对决定是否使用某个服务产生重大影响。Pusher的

文档 是用户手册和参考书的结合，它重点关注哪些是可行的，并让你快速找到实现某个

事情的方法。42

3.3　Pusher中的术语

在开始使用Pusher前，你应该熟悉一些术语。

连接（connection）表示在客户端（本例中是浏览器）和Pusher服务之间的持久连

接。利用该连接，可以用Pusher接收消息；利用该连接，我们也可以用Pusher给其他用户

发送消息。

Pusher使用发布-订阅消息模式（publish-subscribe messaging pattern） 。43因此，它使

用了“通道”（channel）这一概念来标记客户端应用程序感兴趣的东西（如体育新闻或

　http://pusher.com/docs/server_libraries

　http://pusher.com/docs

　http://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern

第3章　Pusher　 　39

Apress出版社的tweet）。一个通道仅仅用一个名字表示，你可以通过订阅（subscribe）这

个通道来注册你的兴趣点。

一些人将实时Web称为“基于事件的Web”。这是因为实时Web技术常常用来传递发

生的某些事件，并将与实际数据一起传输给那些对事件发生感兴趣的用户和系统。例如，

当某人在Twitter上发tweet时，系统会通知所有关注他的人，告诉他们这个通知并向它们

传送tweet数据（数据包括Twitter用户名、文本、发tweet的时间以及该tweet是否是对其他

tweet的回复等）。

由此观之，Pusher也使用“事件”（event）这一概念就不足为奇了。事件是与通道

对应的概念。当你订阅了某个通道，你就与那个通道的事件绑定了。例如，你可以订阅

apress-tweets通道，并绑定new_tweet、tweet_deleted、tweet_favorited和retweeted事件。这里

绑定的事件与“创建、读取、更新、销毁”（Create、Read、Update、Destroy，CRUD）功

能中的创建、更新和销毁部分吻合得很好。同时，用户界面的改变也能反映事件的结果。

为了接收数据，数据必须要发布（publish）。数据发布在通道上，并与事件关联。为

了保持基于事件的Web这一概念，在通道上发布数据的行为称为触发（trigger）事件。这

样，触发和发布这两个词可以互换使用。

在我们开发应用程序的过程中，将会看到所有这些概念。开发过程将会说明在新的应

用程序或现有的应用程序中使用相同的概念是多么容易。

3.4　开始使用Pusher

在开始构建一个示例应用程序之前，我们首先需要注册一个Pusher沙盒账户。这是一

个免费的账户，它限制了从客户端开启的同时连接的并发数和每天能发送的消息数量。这

个免费账户对于本书呈现的所有应用程序都足够了。

首先，请访问Pusher的网站（http://www.pusher.com）并注册。

在完成注册之后，你将跳转到账户主页。那里有你需要对账户做简要确认的所有信息

（见图3-1）。

现在就完成了注册过程。但是，让我们保持页面的打开状态，因为我们将在“练

习3-1”中使用这个页面。

40　 　第一部分　熟悉必备技术

图 3-1　Pusher 的欢迎屏幕

练习 3-1　一个简单的 Pusher 测试

为了验证你的账户处于激活状态，并说明开始使用 Pusher 十分简单，让我们组织

一个非常简单的 HTML 文档，并向其发送消息。

首先，创建一个简单的 HTML 文件。在文件中，添加下列标记：

接下来，通过在结束标记 </body> 前插入 script 标记，可以将 Pusher 的 JavaScript

库包括在页面中：

第 3 章　Pusher　 　41

接下来就要连接 Pusher。在下面的代码中，将变量 appKey 的值用你的 Pusher 应用

程序证书中列出的密钥替换。

创建好新的 Pusher 实例后，会建立一个连接到 Pusher 服务的新连接。

接下来要做的就是检查你是否已经完成连接。你可以通过使用 Pusher 调试控制台

（Debug Console）手动检查。Pusher 调试控制台是前面提到的开发人员工具之一。为了

使用 Pusher 调试控制台，需要打开应用程序的 Pusher 仪表板（Dashboard），单击 Debug

42　 　第一部分　熟悉必备技术

Console 连接。现在，在另一个浏览器窗口中，打开新的 HTML 文档。如果你再查看

Pusher 调试控制台，你会看到其中列有新的连接，如图 3-2 所示。

图 3-2　Pusher 调试控制台

你也可以通过将事件绑定到 pusher.connection 对象 上以在代码中检查建立的连接。

如果你想给用户反馈连接状态，或需要在用户当前不在线导致连接不可用时让应用程序

做出不同的行为，那么这就会很有用。如前所述，Pusher 使用“事件”这一概念。在监

控连接状态时也是如此。下面的代码将绑定 state_change 事件，并将当前状态显示在页

面上。完成该任务需要改变的代码用粗体显示：

1

　http://pusher.com/docs/connection_states

第 3 章　Pusher　 　43

每当连接状态改变时，会调用 bind 函数的第二个参数处的函数。这样我们就可以

更新页面来显示当前的连接状态。

现在我们已经知道如何检测连接状态。我们可以看看订阅通道。如前所述，通道可

以仅仅用一个名字（一个 string 变量）表示。你不需要做诸如创建通道或在 Pusher 中准

备通道这样的事情。只需要订阅它，它就会存在。你甚至不需要担心使用太多通道，因

为它们只是从发布者（我们后文将会讨论）向订阅者发送数据。那么，让我们订阅一个

通道，并在其中绑定一个事件：

44　 　第一部分　熟悉必备技术

对于处理连接事件，事件处理程序的使用十分简单：一旦触发事件，则消息会显示

在警告框中。

在另一个浏览器窗口中浏览 HTML 文件。在另一个窗口中，在应用程序的 Pusher

仪表板内有 Event creator 链接，单击那个链接，你将会看到 Event creator 表单。输入我

们刚刚编写的 JavaScript 代码对应的细节。通道名应为 test_channel，事件名应为 my_

event。在 Event data 文本区域内输入一些文字，然后单击 Send event 按钮（见图 3-3）。

图 3-3　Pusher 的事件创建器

注意：Pusher 推荐将事件数据以 JSON 形式发送。它们的库将协助你完成这一事情。

出于测试的目的，这里的警告只是显示一些可供人类阅读的信息，所以我们只发送文本。

在单击 Send event 按钮后，你会在测试脚本中收到一个警告。（如果你还打开了

Pusher 页面，你会收到两个警告。）警告如图 3-4 所示。

这是可以运行的 Pusher 应用程序最简单的形式。在后续的练习中，你将看到更有

用的例子。

第 3 章　Pusher　 　45

图 3-4　在从事件创建器发送测试数据后出现警告框

3.5　使用 Pusher 发送事件

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

由于 Pusher 有丰富的 API 库，因此发送事件和接收事件一样容易。我们将使用 PHP

的 API 库。该库托管在 GitHub 服务上，地址为 https://github.com/pusher/pusher-php-server。

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

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

我们将重用第 2 章中使用过的 HTML 和 CSS 的大部分内容并以它们作为基础，以

节约时间。创建新的 HTML 文件，并输入下列内容：

46　 　第一部分　熟悉必备技术

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

接收到的信息。

接着，我们添加一些 CSS。创建文件夹 styles，并在其中添加新文件 layout.css。该

文件已经连接到前面创建的 HTML 文件中了。在新的 CSS 文件中添加下面的代码：

第 3 章　Pusher　 　47

48　 　第一部分　熟悉必备技术

第 3 章　Pusher　 　49

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

图 3-5　这个有样式的页面将用 Pusher 发送和接收消息

现在你已经有了一个页面。该页面包括一个有用户界面的区域，可以用来发送和接

收消息。这样，我们可以开始通过发布和订阅添加一些实时功能。在 HTML 中，我们知

50　 　第一部分　熟悉必备技术

道表单会将条目提交到文件 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）。

第 3 章　Pusher　 　51

图 3-6　在 Pusher 调试控制台中触发的事件显示为 API Message

为了在应用程序中以可视化的方式显示这一消息，我们需要编写 JavaScript 来连接

Pusher、订阅通道并绑定事件。

我们的 HTML 文件包括一个称为 init.js 的脚本。因此，让我们在 scripts 文件夹下

创建那个文件。在该脚本文件中，我们将添加两个代码块，一个会侦听服务器端脚本触

发的事件，另一个会捕获提交的表单并在不刷新页面的情况下将它们提交给 post.php。

首先，让我们为自定义的 Pusher 事件添加一个事件侦听器：

52　 　第一部分　熟悉必备技术

使用我们的应用程序密钥创建了一个新的 Pusher 对象。（与之前一样，别忘了使用

自己的密钥。）接着，我们订阅了在“练习 3-2”中的服务器端使用的通道。

接下来，我们要对那个通道绑定事件处理程序并捕获 send-message 事件。触发该

事件时，我们将无序列表的消息显示，并确保去除其中用做占位符的消息。接着，将新

消息添加到列表的尾部。

重新载入页面会失去应用程序之前用 JavaScript 从浏览器添加的所有消息。为了避

免重新载入页面，我们需要添加第二个代码块来捕获表单提交，并通过 AJAX 提交它

们，而不使用页面刷新。插入下面的粗体代码来添加这一功能：

第 3 章　Pusher　 　53

这个代码捕获 submit 事件，并将序列化的表单数据发送给 post.php，同时清空消息

输入。它保留 name 字段，使得重复的消息更易发送。在最后，它还将显示的焦点移回

消息输入的末尾。

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

现在你已经可以测试该应用程序了。在浏览器中载入 HTML 文件，并发送一两条

消息。正如预期的一样，会在右边的列表上显示。但是这还不是最激动人心的部分。

为了查看实时的威力，可以在两种不同的浏览器（或同一浏览器的两个窗口）上载

入测试，开始发送一些消息。在没有轮询或页面刷新的情况下，你会看到一个窗口的事

件会影响另一个窗口的显示（见图 3-7）。这就是实时。

图 3-7　在一个浏览器上贴出的消息会实时显示在另一个浏览器上

54　 　第一部分　熟悉必备技术

3.6　调试 Pusher 应用程序

作为开发人员，你应该知道事情不总是能够按照计划进行。在发生计划外的事情时，

你需要开始调试应用程序，试图找出没有产生预期结果的原因。

如果你发现自己处于调试状态，开发人员工具是最好的伙伴。幸运的是，几乎所有的

主流浏览器提供商都提供了一系列不错的开发工具让你访问 JavaScript 控制台、迅速执行

代码、调试运行的代码、查看网页中的元素等。托管服务也会提供好的开发人员工具让你

查看在服务内发生了什么，并执行一些人工的测试。在前面的 Pusher 调试控制台和事件发

生器已经看过这些了。

无论你是否使用 Pusher 或其他实时 Web 技术，浏览器的开发人员工具是开发资源库

中不可或缺的一部分。使用前面讨论的功能，例如使用 console.log 来跟踪涉及的代码部

分、对变量的值进行检查这样简单的步骤、使用浏览器的开发人员工具或 debugger 语句在

执行代码中添加中断，也是很好用的办法。

如果你在使用第三方库（例如这里我们使用了 Pusher 的 JavaScript 库），库就必须要

提供一些方法来记录它在做什么。Pusher 库通过提供 Pusher.log 属性作为其 API 的一部分

来完成这一功能。作为本章最后一个练习，让我们来了解一下如何使用 Pusher.log，因为

它在构建应用程序时会很方便。

练习 3-3　Pusher 的日志记录

与 Pusher 的大部分功能一样，在 Pusher 的 JavaScript 库中显示日志记录非常简单，

你只需要将一个函数赋给 Pusher.log 属性。将下面的代码添加到 init.js 文件中：

现在，在浏览器中浏览 HTML 文件，并打开 JavaScript 控制台，你将看到 Pusher

的 JavaScript 库的日志信息（见图 3-8）。在开发过程中，这些信息可能非常有用。

对于大部分的开发日志记录而言，在将应用程序进行发布前应该考虑删除那些日志记录

功能。

第 3 章　Pusher　 　55

图 3-8　Pusher 的 JavaScript 库内部工作的日志记录

3.7　小结

仅使用大约 60 行有详细注释的代码，你已经为 Web 应用程序实现了一个基本的实时

层。使用 Pusher 就是这么简单。

在下一章中，我们将更详细地规划要构建的应用程序。下一章开始先要介绍选择使用

Web 应用程序而不是原生应用程序的原因。