HTML5数据推送应用开发——1.2　数据推送

SSE 是一种允许服务端向客户端推送新数据（通常称作数据推送）的HTML5 技术。那么，究竟什么是数据推送？它与我们可能用过的其他技术有什么不同呢？让我先来回答什么不是数据推送。数据推送有两种替代方案：无更新方案和数据拉取方案。 无更新方案（图1-1）是最简单的。这几乎是所有网络内容的运作方式。 在浏览器中输入一个URL，然后你就会得到一个HTML 页面。之后浏览器会请求图片、CSS 文件、JavaScript 文件等。它们每一个都是浏览器可以缓存的静态文件。如果你正使 用的是后端语言，比如PHP、Ruby、Python 或其他许多为用户动态生成HTML 的语言，就浏览器而言，它接收到的HTML 文件与手写的静态HTML 文件没什么区别。（是的，我知道你会说你可以命令浏览器不缓存内容，但这不是重点，它还是静态的。） 浏览器会基于一些用户行为，或在一定时间之后，或基于某种别的触发方式，向服务端请求部分或全部最新数据。使用这种简单粗暴的方式，通过JavaScript 或者一个meta 标签（见6.6 节）都能命令整个页面重新加载。要做到这一点，页面要么是由服务端语言自动生成，要么是定期更新的静态HTML 页面。 在更复杂的情况下，Ajax 技术只被用于请求最新数据，当收到数据时，JavaScript 函数会利用它来局部更新DOM。这里有一个很重要的概念：仅请求最新数据，而不是整个HTML 页面结构。这正是我们所说的数据拉取的要义：仅拉取新数据，并且只更新页面中受到影响的部分。 术语提示: Ajax? DOM? 第6 章会介绍Ajax，在没有原生支持SSE 的浏览器中将会用到它。我不会告诉你它代表什么，那只会让你困惑。毕竟，它不是必须异步，也不是必须使用XML。不过，Ajax 中的J 很难讨论，你肯定需要JavaScript。 DOM 又是什么呢？它是Domcument Object Model（文档对象模型）的缩略形式。它是代表当前网页的数据结构。如果你用原生JavaScript 写过document.getElementById('x')...，或者用jQuery 写过$('#x')...，那么你一直都在使用DOM。 这些都不是数据推送。数据推送不是静态文件，也不涉及浏览器为最新数据而发起请求。数据推送是由服务端选择向客户端发送新数据（见图 1-3）。 当数据源有新数据时，服务端能立刻将它发送给一个或多个客户端，而不用等客户端来请求。这些新数据可以是突发新闻、最新的股价、来自线上朋友的聊天信息、新的天气预报、策略游戏中的下一步等。 数据拉取和数据推送的功能目标是一样的：让用户看到最新数据。但数据推送有一些优势。或许最大的优势就是更低的延迟。假设一个数据包在服务端与客户端之间的传输时间是100 毫秒，数据拉取客户端以10 秒为间隔轮询拉取。用数据推送方式，客户端会在服务端读入数据100 毫秒后看到数据；用数据拉取方式，客户端会在服务端读入数据100 至10 100 毫秒（平均5100 毫秒）后看到数据：这都取决于轮询请求的时间选择。平均来看，数据拉取方式的延迟是数据推送方式的51 倍多。如果数据拉取方式改为每2 秒轮询一次，平均时间会下降到1100 毫秒，仅仅是数据推送方式的11 倍多。但是，如果没有新数据到达，这也会导致更多的请求和资源（比如带宽、CPU 等）浪费。 在数据拉取方式中，权衡会让你很纠结：要缩短延迟就要提高轮询频次；要节省带宽和连接就要降低轮询频次。延迟和带宽，哪个更重要？当你说“都重要”，那就是你需要数据推送技术的时候了。