前言
在 web 端开发中，通讯是一个非常重要的部分。我们需要通过通讯机制实现服务器与浏览器之间的数据交换，从而实现各种功能。在过去，我们通常采用 AJAX 技术来实现数据交换，但是这种方式有其局限性。例如，在长时间的数据传输过程中，浏览器可能会被阻塞，无法处理其他任务。
为了解决这个问题，HTML5 引入了一个新的通讯协议，即 SSE（Server-Sent Events）。SSE 允许服务器向浏览器推送数据，而无需浏览器发起请求。在本文中，我们将详细介绍 SSE 的原理、用法以及相关注意事项。
SSE 原理
SSE 基于 HTTP/1.1 协议，类似于 AJAX，通过 HTTP 进行通讯。与 AJAX 不同的是，SSE 是单向通讯，即服务器可以向浏览器推送数据，但是浏览器无法向服务器发送请求。
SSE 的使用很简单，客户端通过创建一个 EventSource 对象并指定服务器地址，即可开始接收从服务器推送过来的数据。服务器需要设置相应的响应头，告诉浏览器这是 SSE 协议，而不是普通的 HTTP 响应。以下是一个典型的 SSE 响应头示例：
Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive
其中，Content-Type 指定为 text/event-stream，代表这是 SSE 协议的响应。Cache-Control 指定为 no-cache，禁止浏览器对响应进行缓存。Connection 指定为 keep-alive，使得浏览器与服务器之间的连接保持长连接，以便服务器可以向浏览器推送数据。
在响应头设置完成后，服务器可以向浏览器推送数据。数据以 plain/text 格式进行传输，并以“event:”、“data:”等字段进行标记。服务器推送一条数据时，可以通过“data:”字段将数据传输给浏览器，例如：
data: {"message": "Hello, world!"}\n\n浏览器通过监听 EventSource 对象的 message 事件，即可收到从服务器推送过来的数据。
SSE 示例
下面我们通过一个简单的示例来介绍 SSE 的用法。假设我们在服务器端生成了一个随机数，并将它通过 SSE 推送到客户端。客户端需要实时接收并显示这个随机数。
服务器端代码
我们使用 Node.js 作为服务器端开发环境。以下是一个简单的 Node.js 代码，用于生成随机数并通过 SSE 推送到浏览器：
// javascriptcn.com 代码示例
const http = require('http');
const PORT = 8000;
const server = http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(() => {
const data = {
number: Math.round(Math.random() * 100)
};
res.write(`data: ${JSON.stringify(data)}\n\n`);
}, 1000);
});
server.listen(PORT, () => {
console.log(`Server listening on port ${PORT}`);
});这段代码创建了一个 Node.js 服务器，并在每秒钟向客户端推送一个带有随机数的 JSON 对象。
客户端代码
我们使用简单的 HTML、JavaScript 代码来实现客户端功能。以下是一个示例代码，用于显示从服务器接收到的随机数：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SSE Example</title>
</head>
<body>
<div id="output"></div>
<script>
const source = new EventSource('http://localhost:8000');
source.onmessage = function(event) {
const data = JSON.parse(event.data);
document.getElementById('output').innerHTML = `Received ${data.number}`;
};
</script>
</body>
</html>这段代码创建了一个 EventSource 对象，并将服务器地址指定为 localhost:8000。每当服务器向客户端推送数据时，我们在 onmessage 事件中接收并解析 JSON 对象，并将数据显示在 HTML 页面上。
总结
然而，需要注意的是，SSE 并不是适用于所有的 web 应用程序。由于 SSE 采用长连接和逐条推送的方式，因此它适用于需要实时推送数据的应用程序，例如实时聊天程序、实时数据监控系统等。但是，对于大量数据交换或者异步操作等场景，SSE 并不是最佳的解决方案，此时我们仍然需要使用 AJAX 等技术。
总的来说，SSE 技术的出现，使得 web 应用程序可以实现更加实时、高效的数据交互。了解 SSE 技术的原理及用法，对于提升 web 开发中的通讯效率具有重要的指导及应用意义。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653deaa67d4982a6eb78b49b