HTML5 – Server Sent Events

随着Web应用程序的发展，实时通信变得越来越重要。传统的HTTP请求只能实现客户端对服务器的请求和响应，但是在某些场景下，这种方式显得力不从心，比如股票交易、多人在线游戏等需要实时更新的应用场景。这时候，就需要用到Server Sent Events（SSE）。

SSE使用HTTP协议，通过一种全新的方式允许服务器向客户端推送数据，而不需要客户端发出请求。这种方式通常被用于实时更新：包括在线独家新闻、股票报价、聊天室等。

设计思路

SSE主要是由JavaScript的EventSource对象发起。代码示例：

if(typeof(EventSource) !== "undefined") {
  var source = new EventSource("sse.php");
  source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
  };
} else {
  document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}

客户端JavaScript通过使用EventSource对象与服务器协作的方式，来实现从服务器到客户端的实时推送。服务器发送更新时，事件源都会创建一个新的事件对象，该事件对象中包含了当前服务器发回的全部数据。

服务器端如何实现SSE呢？服务器端代码示例如下：

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

 $data = "data: The server time is: " . date('H:i:s') . "\n\n"; echo$ data;
flush();

这段服务器端代码会向客户端发送当前服务器的时间（当做测试），并设置Content-Type为”event-stream”，表示这是一种SSE推送。

服务器端的跨域问题

由于SSE使用的是HTTP协议，因此存在跨域问题。在跨域请求的情况下，服务器需要设置Access-Control-Allow-Origin头信息。代码示例如下：

header("Access-Control-Allow-Origin: *");
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

 $data = "data: The server time is: " . date('H:i:s') . "\n\n"; echo$ data;
flush();

这里的“*”表示接受任何跨域请求，也可以设置为具体的域名，以满足不同的业务需求。

事件类型

SSE支持三种事件类型：Message（一般事件）、Error（错误事件）和Close（关闭事件）。

客户端通过onmessage和onerror两个事件处理程序来处理不同的事件类型。

例如，在每一个消息之前，服务器会发送一个id事件：

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

 $data = "id: " .$ id . "\n";
 $data .= "data: " .$ message . "\n\n";
echo $data;
flush();

在JavaScript中，可以导入这个事件，侦听它，并进行处理：

if(typeof(EventSource) !== "undefined") {
  var source = new EventSource("sse.php");
  source.addEventListener('id', function(event) {
    console.log('Server sent an ID: ' + event.data);
  }, false);
  source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
  };
  source.onerror = function(event) {
    console.log('An error occurred and the connection was closed.');
  };
} else {
  document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}

浏览器支持情况

遗憾的是，IE浏览器不支持SSE，支持SSE的仅有Chrome、Firefox、Safari等主流现代浏览器。但是，在不支持SSE的浏览器中，可以通过使用Polyfills来实现SSE的兼容。Polyfills是一种JavaScript的常见技术，它可以在不支持某些特性的浏览器中模拟这些特性。

Polyfills实现

Polyfills主要用于填充浏览器在实现某些特性时所遗漏的部分，比如SSE。我们可以使用EventSource-js库来实现Polyfills。

<script src="https://cdn.jsdelivr.net/npm/event-source-polyfill/dist/eventsource.min.js"></script>

通过引入这个Polyfills库，我们就可以在IE浏览器中使用SSE了。

结论

Server Sent Events（SSE）是一种实现服务器向客户端推送数据的Web API。它使用HTTP协议，通过一种全新的方式允许服务器向客户端推送数据，而不需要客户端发出请求。SSE可以广泛应用于多种场景下，比如在线独家新闻、股票报价、聊天室等需要实时更新的应用场景。但是需要注意的是，由于IE浏览器不支持SSE，因此在不支持SSE的浏览器中，需要使用Polyfills来实现SSE的兼容。