HTML5数据推送应用开发[试读]

SSE（Server-Sent Event，服务端推送事件）是一种允许服务端向客户端推送新数据的HTML5 技术。与由客户端每隔几秒从服务端轮询拉取新数据相比，这是一种更优的解决方案。在写作本书时，65% 的桌面和移动浏览器原生支持这项技术，但是，本书将介绍如何开发支持超过99% 桌面浏览器和移动浏览器的向后兼容解决方案。顺便说一下，10 年前我只能用Flash 来实现这种数据推送；事情进展太迅速了，本书中已不会有任何用Flash实现的方案。 本书中提到的浏览器占比数据来自超赞的“Can I Use...”网站，网址是http://caniuse.com/eventsource。而该网站的数... 查看全部[ 1.1　HTML5 ]

SSE 是一种允许服务端向客户端推送新数据（通常称作数据推送）的HTML5 技术。那么，究竟什么是数据推送？它与我们可能用过的其他技术有什么不同呢？让我先来回答什么不是数据推送。数据推送有两种替代方案：无更新方案和数据拉取方案。 无更新方案（图1-1）是最简单的。这几乎是所有网络内容的运作方式。 在浏览器中输入一个URL，然后你就会得到一个HTML 页面。之后浏览器会请求图片、CSS 文件、JavaScript 文件等。它们每一个都是浏览器可以缓存的静态文件。如果你正使 用的是后端语言，比如PHP、Ruby、Python 或其他许多为用户动态生成HTML 的语言，就浏览器而言，它接收到的... 查看全部[ 1.2　数据推送 ]

对数据推送的需求可以追溯到Web 诞生的时候2。多年来，人们找到了很多新奇的解决方案，其中大部分都存在人们不期望看到的折中方式。你也许听说过一些其他的技术：Comet、Ajax Push、Reverse Ajax、HTTP Streaming，还一直在想它们之间有什么不同。实际上，这些都属于我们将在第6 章和第7 章中探讨的向后兼容解决方案。后来又增加了SSE，它是一种兼具易用性和高效性的新增HTML5 技术。如果你的浏览器支持SSE，它总是3 比Comet 技术优越。（本章后面会讨论SSE 和WebSocket 的区别。） 顺便说一下，有时你会看到SSE 被人称为EventSource，因... 查看全部[ 1.3　数据推送的其他名称 ]

SSE 对什么有用？当你需要用新数据局部更新网络应用时，SSE 便脱颖而出，它不会要求用户执行任何操作。我们将以一个推送外汇价格的应用为例，探索如何实现数据推送和SSE。我们的目标是每当经纪人那里的欧元/ 美元（欧元兑美元）汇率变化时，新的价格会出现在浏览器上，尽可能像现实中一样及时。 这个例子完全适用于SSE 处理资料传送的标准：更新频繁、低延迟，并且数据都是从服务端到客户端（客户端不需要将价格数据推送回服务器）。我们示例中的后端会使用杜撰的价格数据，但使用真实数据（无论是汇率还是其他数据）的时候其实都一样。 稍微有点想象力，你就能明白这个例子如何应用到其他领域：在拍卖网络应用中推送最新... 查看全部[ 1.4　可能会用到SSE的应用 ]

你可能听说过另一种叫做WebSocket 的HTML5 技术，它也能从服务端向客户端推送数据。那如何决定你是用SSE 还是WebSocket 呢？概括来说，WebSocket 能做的，SSE 也能做，反之亦然，但在完成某些任务方面，它们各有千秋。 WebSocket 是一种更为复杂的服务端实现技术，但它是真正的双向传输技术，既能从服务端向客户端推送数据，也能从客户端向服务端推送数据。 WebSocket 和SSE 的浏览器支持率差不多，大多数主流桌面浏览器两者都支持5。在Android 4.3 以及更早的版本中，系统默认浏览器两者都不支持，Firefox 和Chrome 则完全支持；And... 查看全部[ 1.5　和WebSocket的对比 ]

这一节要讲的大部分内容，对HTML5 数据推送技术（SSE 和WebSocket）和将在第6 章、第7 章讲到的向后兼容解决方案都适用，它们的共同点在于，都会为每一个客户端连接打开一个专门的套接字。 首先来考虑静态的情况，不引入数据推送。每当用户打开一个页面，在浏览器和服务器之间就会打开一个套接字连接。服务器收集信息然后返回给用户，可能会很简单，就像从磁盘上加载一个静态HTML 文件或一张图片一样；也可能会很复杂，就像要运行一段用以连接很多数据库的后端语言，将CoffeeScript 编译成JavaScript，然后把它们结合到一起（用一个服务端模板）并返回。这里的关键点是，一旦返回了所需的... 查看全部[ 1.6　什么时候数据推送是错误的选择 ]

前面两节从正反两方面探讨了数据拉取、SSE 和WebSocket，但怎么知道哪个更适用？这个问题很复杂，它是以应用的表现、用户对延迟的预期相关的商业决策、主机费用方面的商业决策以及用户和你的开发人员使用的技术为基础的。这里有一些你需要自行思考的问题。 • 服务端事件发生得有多频繁? 频率越高越适合用数据推送（不论SSE 还是WebSocket）。 • 客户端事件发生得有多频繁？ 如果事件触发的频率低于0.2 次/ 秒，尤其是低于1 次/ 秒，用WebSocket 比用SSE好。如果频率低于0.1 次/ 秒到0.2 次/ 秒左右，那用哪个都可以。 • 服务端事件是不是不但发生频率不高而... 查看全部[ 1.7　决策、决策还是决策 ]

简而言之，如果想要网站更迅速地刷新数据，并且你现在正用Ajax 轮询，或者页面重载，或正考虑使用这些方案，或者想用WebSocket 又觉得它水平太低了，那么SSE 就是你一直在找的技术。话不多说，赶快到下一章看一个数据推送的Hello World 吧。... 查看全部[ 1.8　带我看代码吧 ]