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 等)浪费。 在数据拉取方式中,权衡会让你很纠结:要缩短延迟就要提高轮询频次;要节省带宽和连接就要降低轮询频次。延迟和带宽,哪个更重要?当你说“都重要”,那就是你需要数据推送技术的时候了。