什么是SSE

Server-Sent Events（SSE）是一种用于实现服务器主动向客户端推送数据的技术，也被称为”事件流”（Event Stream）。它基于HTTP协议，利用长连接特性，在客户端与服务器之间建立一条持久化连接，实现服务器向客户端的实时数据推送。

SSE的基本原理

  1. 客户端向服务器发送一个GET请求，带有指定的header，表示可以接收事件流类型。
  2. 服务器返回响应，指定事件的媒体类型和编码，使用分块传输编码（chunked）来流式传输动态生成的内容。
  3. 服务器在有数据更新时，向客户端发送一个或多个由名称：值字段组成的事件，事件之间由两个换行符分隔。
  4. 客户端使用EventSource接口创建对象，打开连接，并订阅onopen、onmessage和onerror等事件处理程序。

SSE与WebSocket的区别

虽然SSE和WebSocket都用于实现服务器向客户端实时推送数据，但它们有以下区别：

  1. 技术实现：SSE基于HTTP协议，而WebSocket通过特殊的升级协议建立新的TCP连接。
  2. 数据流向：SSE只支持服务器向客户端的单向数据流，WebSocket支持双向数据流。
  3. 连接状态：SSE的连接状态由浏览器自动维护，WebSocket连接状态更灵活，可手动管理。
  4. 兼容性：SSE在大多数现代浏览器中原生支持，而WebSocket在某些老版本浏览器可能需要额外处理。

SSE的简单演示

前端代码

const evtSource = new EventSource("ssedemourl");

evtSource.onmessage = function(event) {
  const newElement = document.createElement("li");
  newElement.textContent = "message: " + event.data;
  document.getElementById("list").appendChild(newElement);
};

evtSource.onerror = function(err) {
  console.error("EventSource failed:", err);
};

// 关闭连接
// evtSource.close();

后端代码（Node.js + Koa2）

const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
  if (ctx.path === '/sse') {
    ctx.set({
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });

    const interval = setInterval(() => {
      ctx.res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);
    }, 1000);

    ctx.req.on('close', () => {
      clearInterval(interval);
    });
  }
});

app.listen(3000);

这个简单的演示展示了如何使用SSE技术实现服务器向客户端的实时数据推送。前端使用EventSource接口创建连接，后端使用Koa2框架设置适当的响应头并定期发送数据。

SSE的优势

  1. 简单易用：相比WebSocket，SSE的实现更加简单，无需额外的协议升级。
  2. 自动重连：SSE内置了自动重连机制，无需开发者手动处理。
  3. 单向数据流：适用于只需要服务器向客户端推送数据的场景。
  4. 基于HTTP：可以利用现有的HTTP基础设施，如负载均衡、代理等。

SSE技术为实时Web应用提供了一种轻量级的解决方案。在不需要双向通信的场景下，SSE可能是比WebSocket更简单、更适合的选择。开发者应根据具体需求选择合适的技术方案。