什么是SSE(Server-Sent Event)

WEB
留言

近在做大屏数据可视化项目时要求用图表实时展示最新数据变化，考虑到有大量的图表需要展示，因此轮询请求不予以考虑了，然后想到了支持全双工通信的 websocket。为了实时展示这些图表专门建立一个 websocket 连接也是可以的，然而总觉得杀鸡用牛刀了。知道查询到 Server-sent Event，顿时觉得这才是完美的解决方案。

什么是 Server-sent Event?

一个网页获取新的数据通常需要发送一个请求到服务器，也就是向服务器请求的页面。使用 server-sent Event，服务器可以在任何时刻向我们的 Web 页面推送数据和信息。这些被推送进来的信息可以在这个页面上作为 Events + data 的形式来处理。

严格地说，HTTP 协议无法做到服务器主动推送信息。但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流信息（streaming）。

也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。这时，客户端不会关闭连接，会一直等着服务器发过来的新的数据流，视频播放就是这样的例子。本质上，这种通信就是以流信息的方式，完成一次用时很长的下载。

SSE 就是利用这种机制，使用流信息向浏览器推送信息。它基于 HTTP 协议，目前除了 IE/Edge，其他浏览器都支持。

如何使用？

用 node 开启 sse 服务

var http = require("http");

http
  .createServer(function (req, res) {
    var fileName = req.url;

    if (fileName === "/stream") {
      res.writeHead(200, {
        "Content-Type": "text/event-stream",
        "Cache-Control": "no-cache",
        Connection: "keep-alive",
        "Access-Control-Allow-Origin": "*",
      });
      res.write("retry: 10000\n");

      res.write("event: connecttime\n");
      res.write("data: " + "this is connecttime" + new Date() + "\n\n");

      var interval = setInterval(function () {
        res.write("event: getdata\n");
        res.write("data: " + new Date() + "\n\n");
      }, 1000);

      req.connection.addListener(
        "close",
        function () {
          clearInterval(interval);
        },
        false
      );
    }
  })
  .listen(8080, "127.0.0.1");

在 html 页面上开启 sse 并兼听事件

var source = new EventSource("http://127.0.0.1:8080/stream");
var div = document.getElementById("example");

source.onopen = function (event) {
  div.innerHTML += "<p>Connection open ...</p>";
};

source.onerror = function (event) {
  div.innerHTML += "<p>Connection close.</p>";
};

source.addEventListener(
  "connecttime",
  function (event) {
    div.innerHTML += "<p>Start time: " + event.data + "</p>";
  },
  false
);
source.addEventListener("getdata", function (event) {
  div.innerHTML += "<p>Data: " + event.data + "</p>";
});

此时在页面上可以看到从服务器发来源源不断的数据

参考文章：

  1. Server-Sent Events 教程