在 Web 开发中，客户端与服务端通信是必不可少的，而推送技术是实现实时消息推送的重要方法之一。本文将介绍一种轻量级的推送技术——Server-sent Events（SSE），并提供相关示例代码和学习指导。
Server-sent Events 简介
Server-sent Events 是一种基于 HTTP 的推送技术，与 WebSocket 的主要区别在于 SSE 只能从服务端向客户端单向推送数据，而 WebSocket 支持双向通信。SSE 是 HTML5 规范的一部分，可以在所有现代浏览器中使用，且不需要引入任何第三方库。
SSE 的工作原理是通过建立一个一直开启的 HTTP 连接，将实时消息从服务端发送到客户端。与 WebSocket 相比，SSE 的优点是可以通过简单的 HTTP GET 请求实现，不需要复杂的握手协议和二进制数据解析，且相对于长轮询（long-polling）等技术，SSE 的连接保持更稳定。
使用 Server-sent Events
使用 SSE 首先需要在服务端设置 HTTP 响应头，包含以下信息：
- Content-Type：固定为 text/event-stream
- Cache-Control：固定为 no-cache
- Connection：固定为 keep-alive
同时，响应内容需要按照以下格式发送：
event: <事件类型> data: <事件数据> event: <事件类型> data: <事件数据> ...
其中，每个事件由 event 和 data 两个字段组成，分别表示事件类型和事件数据，用冒号分隔。多个事件之间用空行分隔。
客户端可以通过 JavaScript 通过 EventSource 对象监听服务端发送的事件，示例代码如下：
const source = new EventSource('http://localhost:8080/sse');
source.addEventListener('message', (event) => {
console.log(event.data);
});代码中，使用 EventSource 对象与 SSE 服务端建立长连接，通过 addEventListener 方法监听 message 事件，并在回调函数中处理收到的消息。
SSE 实现示例
以下代码是一个简单的 SSE 服务端实现和客户端使用示例：
服务端代码：
// www.javascriptcn.com code example
const http = require('http');
http.createServer(function(req, res) {
if (req.url === '/sse') {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(() => {
const data = new Date().toLocaleTimeString();
res.write(`event: server-time\ndata: ${data}\n\n`);
}, 1000);
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(`
<!doctype html>
<html>
<head>
<title>Server-sent Events Demo</title>
</head>
<body>
<script>
const source = new EventSource('/sse');
source.addEventListener('server-time', (event) => {
const time = JSON.parse(event.data);
document.body.innerHTML = \`<h1>\${time}</h1>\`;
});
</script>
</body>
</html>
`);
}
}).listen(8080);代码中，如果客户端发送的 URL 是 /sse，服务端会向客户端每隔 1 秒钟发送一个数据事件，类型为 server-time，数据为当前时间。对于其他 URL，服务端返回一个能够接收 SSE 数据的 HTML 页面。
客户端代码：
// www.javascriptcn.com code example
<!doctype html>
<html>
<head>
<title>Server-sent Events Demo</title>
</head>
<body>
<script>
const source = new EventSource('/sse');
source.addEventListener('server-time', (event) => {
const time = JSON.parse(event.data);
document.body.innerHTML = `<h1>${time}</h1>`;
});
</script>
</body>
</html>代码中，客户端使用 EventSource 对象向服务端建立长连接，并监听事件类型为 server-time 的数据事件，收到数据后更新页面中的时间显示。
结语
Server-sent Events 是一种轻量级且易于使用的推送技术，适合实现一些简单的实时推送需求，比如展示实时在线用户数量、新闻评论等。本文提供了相关的使用方法和示例代码，希望对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d680aaa941bf7134c49f9d