在 Web 开发中，很多时候需要实时推送数据给客户端，以便及时更新页面内容。这个过程通常需要使用轮询或 WebSocket 等技术。然而，这些技术都有一些缺点，比如轮询会增加服务器负担，WebSocket 需要在客户端和服务器之间建立长连接。而 SSE（Server-Sent Events）技术则提供了一种简单而高效的实时推送数据的方式。
SSE 简介
SSE 技术是一种基于 HTTP 协议的服务器推送技术，使用简单，兼容性好。它允许服务器向客户端发送事件流（Event Stream），客户端通过监听事件流来获取实时数据。事件流是一个不断更新的文本流，每条消息以“data:”开头，以“\n\n”结尾，中间可以包含任意文本内容。客户端通过 EventSource 对象来监听事件流，一旦有新消息到达，就会触发 message 事件，从而实现实时推送数据。
SSE 的优点
SSE 技术有以下优点：
实时性好：SSE 技术可以在数据更新时立即推送给客户端，实现实时性。
兼容性好：SSE 技术基于 HTTP 协议，浏览器支持度较高，不需要额外的插件或协议支持。
轻量级：SSE 技术的消息格式简单，数据量小，不会增加服务器负担。
易于使用：SSE 技术使用简单，只需要使用 EventSource 对象监听事件流即可。
SSE 的实现
下面我们以一个博客文章评论的实时推送为例，演示如何使用 SSE 技术。
服务端实现
服务端使用 Node.js 实现，代码如下：
// javascriptcn.com 代码示例
const http = require('http');
const fs = require('fs');
// 读取评论数据
let comments = JSON.parse(fs.readFileSync('./comments.json'));
// 创建 HTTP 服务器
const server = http.createServer((req, res) => {
if (req.url === '/comments') {
// 设置响应头
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
// 发送事件流
comments.forEach((comment, index) => {
res.write(`data: ${JSON.stringify(comment)}\n\n`);
});
// 监听新评论事件
const listener = event => {
const comment = JSON.parse(event.comment);
comments.push(comment);
res.write(`data: ${JSON.stringify(comment)}\n\n`);
};
req.on('newComment', listener);
// 终止连接
req.on('close', () => {
req.removeListener('newComment', listener);
});
} else {
// 返回静态页面
res.writeHead(200, {
'Content-Type': 'text/html'
});
res.end(fs.readFileSync('./index.html'));
}
});
// 启动服务器
server.listen(3000, () => {
console.log('Server started on port 3000');
});代码中，我们使用 http 模块创建了一个 HTTP 服务器，当客户端请求 /comments 路径时，返回一个事件流，将评论数据发送给客户端。同时，我们监听 newComment 事件，当有新评论时，将新评论数据添加到评论数据中，并发送给客户端。
客户端实现
客户端使用 HTML 和 JavaScript 实现，代码如下：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>博客文章评论</title>
</head>
<body>
<h1>博客文章评论</h1>
<ul id="comment-list"></ul>
<form id="comment-form">
<input type="text" id="name-input" placeholder="姓名">
<input type="text" id="content-input" placeholder="评论内容">
<button type="submit">提交评论</button>
</form>
<script>
const commentList = document.querySelector('#comment-list');
const nameInput = document.querySelector('#name-input');
const contentInput = document.querySelector('#content-input');
// 创建 EventSource 对象
const eventSource = new EventSource('/comments');
// 监听 message 事件
eventSource.addEventListener('message', event => {
const comment = JSON.parse(event.data);
const li = document.createElement('li');
li.innerHTML = `<strong>${comment.name}</strong>: ${comment.content}`;
commentList.appendChild(li);
});
// 提交评论
const commentForm = document.querySelector('#comment-form');
commentForm.addEventListener('submit', event => {
event.preventDefault();
const name = nameInput.value.trim();
const content = contentInput.value.trim();
if (name && content) {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/comments');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ name, content }));
nameInput.value = '';
contentInput.value = '';
}
});
</script>
</body>
</html>代码中，我们创建了一个 EventSource 对象，监听 /comments 路径的事件流。当有新评论时，触发 message 事件，将新评论添加到评论列表中。同时，我们也实现了提交评论的功能，当用户提交评论时，使用 XMLHttpRequest 对象发送 POST 请求，将评论数据发送给服务器。
总结
SSE 技术是一种简单而高效的实时推送数据的方式，具有实时性好、兼容性好、轻量级、易于使用等优点。在开发实时应用中，可以考虑使用 SSE 技术来实现数据的实时推送。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6587f8fceb4cecbf2dd27d71