关于HTML5服务器发送事件(SSE)

最近在看 W3School 上关于 HTML 5 的教程。在看到 HTML 5 服务器发送事件 ( SSE, server-sent event ) 时，没怎么弄明白示例代码是怎么回事，寻找其他教程，大部分也只给出了类似的代码，没有解释。花了一点时间，大概弄清楚了，这里记录一下。

一段示例代码

利用 SSE，网页可以自动获取来自服务器的更新。以前也可能做到这一点 ( 如 AJAX )，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。简单说就是把轮询获取更新的方式 ( pull ) ，改为接受服务器主动推送的方式 ( push )。

下面是 W3School 上的一段示例代码，包含客户端的 JavaScript ，以及服务端的 PHP 代码：

var source = new EventSource("demo_sse.php");

source.onmessage = function(event) {

    document.getElementById("result").innerHTML += event.data + "<br />";

};

这段代码不断的从 demo_sse.php 获取数据，并将得到的结果输出到 id 为 result 的 div 中。

<?php

header('Content-Type: text/event-stream');

header('Cache-Control: no-cache');

$time = date('r');

echo "data: The server time is: {$time}\n\n";

flush();

?>

这段代码将服务器当前时间，回复给客户端。最终，客户端页面上显示出了如下结果：

The server time is: Fri, 29 Aug 2014 02:03:21 +0800

The server time is: Fri, 29 Aug 2014 02:03:24 +0800

The server time is: Fri, 29 Aug 2014 02:03:27 +0800

The server time is: Fri, 29 Aug 2014 02:03:30 +0800

The server time is: Fri, 29 Aug 2014 02:03:33 +0800

The server time is: Fri, 29 Aug 2014 02:03:36 +0800

The server time is: Fri, 29 Aug 2014 02:03:39 +0800

The server time is: Fri, 29 Aug 2014 02:03:42 +0800

The server time is: Fri, 29 Aug 2014 02:03:45 +0800

The server time is: Fri, 29 Aug 2014 02:03:48 +0800

...

页面每3秒钟显示1次服务器时间。这一过程，具体是如何实现的？这里存在一个明显的问题：对于 demo_sse.php 来说，每次相应客户端的请求，服务端只会输出1次系统当前时间，使用 flush() 方法清空输出缓冲区，本次 HTTP 会话立刻结束。那页面为何会显示出一连串的时间戳呢？如果客户端每过一个时间间隔，就向服务器发出一次请求，那么和之前的轮询式 ( pull ) 更新方式有什么区别呢？

发生了什么

首先确认，这段 JavaScript 代码都做了什么，用简单的 HTTP 抓包程序，得到了下图中的结果：

左边列表中，每一项代表了一次 HTTP 请求，可以看到，客户端 (浏览器)，每3秒钟向 demo_sse.php 发出一次 GET 请求，且每次请求都一模一样。客户端确实是采取了一种类似于轮询 ( pull ) 的方式获取更新，这并不是我们想要的结果。

举个例子，如果这个网页需要显示 Apple 公司的实时股价，我们更倾向于当股价有变化时，服务器主动将变化后的股价推送给客户端，而不是客户端每隔3秒询问一次服务端，Apple 公司的股价有没有变化 (在移动客户端中，问题更严重，轮询式的更新将极大增加用户设备的电量消耗，缩短待机时间，并消耗用户的流量)。

那么如何实现让服务器主动推送呢。其实很简单，只要让服务器保持 HTTP 会话不关闭，当有新的更新时，立刻输出，并 flush() 即可。下面的例子中，服务端保持 HTTP 会话不中断，每隔10秒，发送一个递增的数字。

<?php

header('Content-Type: text/event-stream');

header('Cache-Control: no-cache');

$i = 0;

while (true) {

    echo "data: ". $i++ ."\n\n";

    flush();

    // 暂停10秒

    sleep(10);

}

?>

保持客户端的代码不变。客户端页面，每隔10秒钟显示一行递增的数字。并且从抓包结果看，客户端只对服务端发起了一次 HTTP 请求，从而实现了每当有新的信息，服务器主动推送到客户端 ( push )，而非客户端轮询 ( pull )。

必须说明，这段代码只是为了演示 SSE 如何工作，并没有任何实用价值。使用 PHP 通过这样的方式维持长时间的 HTTP 会话并不优雅。事实上，保持客户端页面一段时间后，HTTP 会话被服务器因超时中断。这时，客户端将在3秒后，再次发出 GET 请求，直到服务端再次中断，等待3秒后再次发出请求……客户端不断循环这一过程。