JavaScript内核与高级编程之：`JavaScript`的`Server-Sent Events`：其在单向通信中的应用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

咳咳，各位观众老爷们，今天咱聊点儿刺激的——Server-Sent Events (SSE)，这玩意儿听着高大上，实际上就是个老实巴交的单向通信小能手。别看它只能服务器往客户端单方面“哔哔赖赖”，在某些场合那可是相当给力。

一、SSE是啥玩意儿？为啥要用它？

想象一下，你正在看一个股票交易的实时监控页面，或者一个体育比赛的比分直播。这些场景有个共同点：服务器需要不断地把最新的数据推送到客户端，而客户端不需要频繁地主动请求。

传统的做法，比如轮询（polling），就是客户端每隔一段时间就问服务器一次：“有新消息吗？有新消息吗？” 这种方式就像一个不停催债的房东，浪费资源不说，实时性也差。

WebSocket是个好东西，可以双向通信，但是有时候，我们真的只需要服务器单方面推送数据，用WebSocket就有点儿“杀鸡用牛刀”的感觉了。

这时候，SSE就派上用场了！它是一种基于HTTP协议的单向通信技术，服务器可以通过一个HTTP连接，持续不断地向客户端推送数据，直到连接关闭。

简单来说，SSE就像一个广播电台，服务器是DJ，客户端是听众，DJ不停地播报新闻，听众就乖乖地接收，不需要主动发问。

二、SSE的优势和劣势

优势：

简单易用： 基于HTTP协议，客户端和服务端实现起来都很简单。
轻量级： 相对于WebSocket，协议开销更小，更省资源。
实时性： 数据推送是实时的，延迟低。
自动重连： 浏览器会自动处理连接断开和重连，无需手动干预。
单向通信： 对于只需要服务器推送数据的场景，更加高效。

劣势：

单向通信： 只能服务器向客户端推送数据，客户端无法主动向服务器发送数据。
浏览器兼容性： 虽然主流浏览器都支持，但还是有一些老旧浏览器不支持。
二进制数据支持有限： 主要用于传输文本数据。

三、SSE的原理：Event Stream

SSE的核心在于“Event Stream”，它是一种特殊的HTTP响应，服务器会发送一个Content-Type为text/event-stream的HTTP响应头，告诉浏览器这是一个SSE连接。

服务器发送的数据格式如下：

data: 消息内容1

data: 消息内容2
data: 消息内容3

event: 事件类型
data: 消息内容

id: 消息ID
data: 消息内容

retry: 重连时间 (毫秒)

data: 表示数据内容，可以有多行。
event: 表示事件类型，可以自定义，客户端可以根据事件类型来处理不同的消息。
id: 表示消息ID，客户端可以用来追踪消息的顺序。
retry: 表示重连时间，告诉客户端在连接断开后多久重新连接。

每个字段之间用冒号分隔，每个消息块之间用空行分隔。

四、客户端的实现：JavaScript代码

客户端使用EventSource对象来建立SSE连接。

if (typeof(EventSource) !== "undefined") {
  var source = new EventSource("your_server_endpoint");

  source.onopen = function() {
    console.log("SSE连接已建立");
  };

  source.onmessage = function(event) {
    console.log("收到消息:", event.data);
    // 在页面上显示消息
    document.getElementById("result").innerHTML += event.data + "<br>";
  };

  source.onerror = function(error) {
    console.error("SSE连接出错:", error);
  };

  // 自定义事件监听
  source.addEventListener("my_event", function(event) {
    console.log("收到自定义事件:", event.data);
  });
} else {
  document.getElementById("result").innerHTML = "你的浏览器不支持SSE。";
}

代码解释：

new EventSource("your_server_endpoint"): 创建一个EventSource对象，指定服务器的SSE端点。
source.onopen: 连接建立成功时触发的事件处理函数。
source.onmessage: 接收到服务器推送的消息时触发的事件处理函数。event.data包含了消息的内容。
source.onerror: 连接出错时触发的事件处理函数。
source.addEventListener("my_event", function(event) { ... }): 监听自定义事件，服务器可以通过event:字段指定事件类型。

五、服务端的实现：以Node.js为例

服务端需要做以下几件事：

设置HTTP响应头：Content-Type: text/event-stream
持续不断地向客户端推送数据。
处理客户端断开连接的情况。

const http = require('http');

const server = http.createServer((req, res) => {
  if (req.url === '/events') {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');
    res.flushHeaders(); // 发送HTTP头部

    let counter = 0;
    const intervalId = setInterval(() => {
      const data = `data: 当前时间: ${new Date().toLocaleTimeString()}nn`; // 构造消息
      res.write(data);
      counter++;

      if (counter > 10) {
          const eventData = `event: my_eventndata: 这是自定义事件的消息nn`;
          res.write(eventData);
          counter = 0;
      }
    }, 1000);

    // 监听客户端断开连接事件
    req.on('close', () => {
      clearInterval(intervalId);
      console.log('客户端断开连接');
      res.end(); // 关闭连接
    });
  } else {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(`
      <!DOCTYPE html>
      <html>
      <head>
          <title>SSE Example</title>
      </head>
      <body>
          <h1>SSE Example</h1>
          <div id="result"></div>
          <script>
              if (typeof(EventSource) !== "undefined") {
                  var source = new EventSource("/events");

                  source.onopen = function() {
                      console.log("SSE连接已建立");
                  };

                  source.onmessage = function(event) {
                      console.log("收到消息:", event.data);
                      document.getElementById("result").innerHTML += event.data + "<br>";
                  };

                  source.onerror = function(error) {
                      console.error("SSE连接出错:", error);
                  };

                  source.addEventListener("my_event", function(event) {
                      console.log("收到自定义事件:", event.data);
                      document.getElementById("result").innerHTML += "自定义事件：" + event.data + "<br>";
                  });
              } else {
                  document.getElementById("result").innerHTML = "你的浏览器不支持SSE。";
              }
          </script>
      </body>
      </html>
    `);
  }
});

const port = 3000;
server.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

代码解释：

res.setHeader('Content-Type', 'text/event-stream'): 设置HTTP响应头，告诉浏览器这是一个SSE连接。
res.setHeader('Cache-Control', 'no-cache'): 禁止缓存，确保每次都获取最新的数据。
res.setHeader('Connection', 'keep-alive'): 保持连接，避免频繁建立连接。
res.flushHeaders(): 立即发送HTTP头部，避免阻塞。
setInterval(() => { ... }, 1000): 每隔1秒向客户端推送一次数据。
const data = data: 当前时间: ${new Date().toLocaleTimeString()}nn“: 构造消息，注意消息格式必须正确。每个data:字段后必须换行，消息块之间必须用空行分隔。
req.on('close', () => { ... }): 监听客户端断开连接事件，清理定时器，关闭连接。

六、SSE的应用场景

实时股票价格更新： 服务器可以实时推送股票价格到客户端，无需客户端频繁请求。
体育比赛比分直播： 服务器可以实时推送比赛比分到客户端，让用户第一时间了解比赛进展。
服务器监控： 服务器可以实时推送服务器的CPU、内存等指标到客户端，方便运维人员监控服务器状态。
新闻推送： 服务器可以实时推送最新的新闻到客户端，让用户及时了解社会动态。
聊天应用： 虽然WebSocket更适合聊天应用，但如果只需要服务器推送消息，SSE也可以作为一种选择。

七、SSE的进阶用法

消息ID： 可以使用id:字段来为每个消息分配一个唯一的ID，客户端可以根据ID来追踪消息的顺序，避免消息丢失或重复。
重连时间： 可以使用retry:字段来指定客户端在连接断开后多久重新连接，单位是毫秒。
自定义事件： 可以使用event:字段来定义自定义事件，客户端可以根据事件类型来处理不同的消息。
错误处理： 服务端可以发送错误消息，客户端可以通过source.onerror事件来处理错误。

八、SSE的注意事项

消息格式： 消息格式必须严格遵守SSE协议的规范，否则客户端可能无法正确解析。
连接数限制： 浏览器对同一个域名的SSE连接数有限制，通常是6个。
长连接： SSE连接是长连接，会占用服务器资源，需要合理控制并发连接数。
防火墙： 有些防火墙可能会阻止SSE连接，需要配置防火墙以允许SSE流量通过。
编码问题： 确保客户端和服务端使用相同的字符编码，避免出现乱码问题。通常推荐使用UTF-8编码。

九、SSE与WebSocket的比较

特性	Server-Sent Events (SSE)	WebSocket
通信方式	单向（服务器到客户端）	双向
协议	HTTP	基于TCP的自定义协议
复杂性	简单	相对复杂
实时性	接近实时	实时
资源消耗	较低	较高
应用场景	服务器推送数据的场景	需要双向通信的场景
浏览器兼容性	良好	良好
是否需要额外依赖	不需要	通常需要WebSocket库支持

十、总结

SSE是一个简单易用的单向通信技术，在服务器需要实时推送数据到客户端的场景下，可以发挥很大的作用。它基于HTTP协议，实现简单，资源消耗小，并且具有自动重连的特性。但是，由于只能单向通信，所以在需要双向通信的场景下，WebSocket可能更适合。

好了，今天的SSE讲座就到这里，希望各位观众老爷们听得开心，用得顺手！如果有什么疑问，欢迎随时提问。下次再见！

发表回复 取消回复

发表回复取消回复