详解 Server‑Sent Events(SSE) 协议实现原理及应用场景-JavaScript中文网-JavaScript教程资源分享门户

随着互联网技术的发展，前端开发的技术难度逐渐加大。为了能够更好的提高前端的开发体验以及实现更好的交互效果，开发者们便开始了探索新的技术手段的旅程。在这个过程中，Server-Sent Events(SSE) 协议便应运而生，在前端开发中扮演着重要角色。

SSE 协议的基本原理

Server-Sent Events（SSE）协议是一种基于 HTTP 的轻量级服务器发送事件的机制，用于从服务器向客户端发送单向数据。SSE 设置一个单一持久的连接，客户端通过这个持久的连接实时接收来自服务器响应的消息。

SSE 协议的实现需要使用到两个核心的技术：EventSource 对象与 text/event-stream 数据格式。

EventSource 对象

EventSource 接口是在浏览器支持的情况下，用于接收服务器推送事件的接口。EventSource 对象能够建立一个长时间运行的 HTTP 连接，向浏览器发送消息，并在服务器端发生事件时触发一个事件。

EventSource 接口只有三个主要事件：

onopen：当事件源与服务器成功建立连接时触发；
onmessage：当从服务器接收到新事件时触发；
onerror：当与服务器连接发生错误时触发；

// 创建 EventSource 对象
const source = new EventSource('http://localhost:3000/sse');

source.onopen = function(event) {
  console.log('Open', event);
};

source.onmessage = function(event) {
  console.log('Message', event);
};

source.onerror = function(event) {
  console.log('Error', event);
};

text/event-stream 数据格式

text/event-stream 是 SSE 协议使用的数据格式，通过 HTTP 协议方式发送数据。每一行由一个 data、event 或 id 等字段来进行描述，如下所示：

event: ping
id: 12345
retry: 5000
data: Hello World!

其中，event 表示自定义事件名称，data 代表实际要发送的数据，id 用来标识每一个事件，retry 表示连接断开之后重新连接的时间间隔。

SSE 协议的应用场景

即时消息推送

SSE 协议在即时消息推送场景中使用非常广泛。例如，在社交媒体及在线游戏社区中，用户可能需要即时收到消息提醒、好友上线提醒等等。使用 SSE 可以实现在客户端长期保持与服务器的连接状态，实现即时消息的推送。

数据流处理

在数据可视化或者监控场景中，通常需要实时地将传感器、仪器或传输数据等信息流显示在客户端以进行同步实时监控处理。使用 SSE 协议，每当有新数据到来时，只要将数据发送到客户端，在浏览器中即可实时展示数据。

SSE 协议的示例代码

下面是 SSE 协议的一个简单示例，通过 Node.js Express 实现服务器端的连接，客户端接收 SSE 消息：

服务器端代码：

const express = require('express');
const app = express();

app.get('/sse', function(req, res) {
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
  });

  const timer = setInterval(() => {
    const randNum = Math.ceil(Math.random() * 100);
    res.write(`data: ${randNum}\n\n`);
  }, 1000);

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

app.listen(3000);

客户端代码：

const source = new EventSource('http://localhost:3000/sse');

source.onmessage = function(event) {
  const messageNode = document.createElement('div');
  messageNode.innerText = `Received Message: ${event.data}`;
  document.body.appendChild(messageNode);
};

总结

SSE 协议是一种非常实用的前端开发技术，在即时通知、实时数据流等场景中具有非常广泛的应用。通过了解 SSE 协议的实现原理以及应用场景，可以帮助开发者们更好地选择技术手段，提高前端开发效率与效果。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6594d7e0eb4cecbf2d91be6d

详解 Server‑Sent Events(SSE) 协议实现原理及应用场景