什么是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更简单、更适合的选择。开发者应根据具体需求选择合适的技术方案。