随着 Web 应用程序变得越来越复杂，实时通信变得越来越重要。Server-Sent Events（SSE）是一种用于实时通信的标准，相比其他实时通信技术如 WebSocket 和长轮询（long-polling），它更加简单易用。
本文将介绍什么是 SSE，并且提供使用 SSE 的一些示例代码。
什么是 SSE？
SSE 允许服务器向客户端推送新数据，而客户端无需发送请求。这类似于 WebSocket，但 SSE 比 WebSocket 更加简单且更易于使用。SSE 是一种基于事件流的协议，它使用了 HTTP 协议的长连接，以保持客户端与服务器之间的连接打开。
SSE 可以向客户端推送数据，这些数据包含在具有特定媒体类型（text/event-stream）的响应的文本流中。SSE 的核心是服务器将事件发送到客户端的能力。事件具有跟踪事件 id、事件名称和事件数据字段。
以下是作为 SSE 响应的示例：
HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache
data: {"message": "Hello, World!"}
id: 1
event: greeting这里我们可以看出 SSE 响应的构成：事件数据、事件 ID 和事件名称。
如何使用 SSE？
1. 创建一个 SSE 服务器
在 Node.js 中，使用 http 模块创建一个 SSE 服务器非常简单，只需要在响应头中设置 Content-Type 地方设置为 text/event-stream。
// javascriptcn.com 代码示例
const http = require('http');
http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache'
});
setInterval(() => {
res.write('data: {"message": "Hello, World!"}\n\n');
}, 1000);
}).listen(3000);
console.log('SSE server started on http://localhost:3000');上面的代码创建了一个 SSE 服务器，该服务器每秒向客户端发送一条消息。
2. 创建一个 SSE 客户端
创建 SSE 客户端同样很简单，只需要在客户端使用 EventSource 类，这个类会自动处理 SSE 事件。
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SSE Client</title>
<script>
const eventSource = new EventSource('http://localhost:3000');
eventSource.addEventListener('greeting', (event) => {
const data = JSON.parse(event.data);
console.log(data.message);
});
</script>
</head>
<body>
<h1>SSE Client</h1>
</body>
</html>在客户端代码中，我们使用了 EventSource 构造函数来连接 SSE 服务器，然后使用 addEventListener 方法来处理名为 greeting 的事件。
总结
本文介绍了 SSE 的概念、用法以及如何在 Node.js 中创建 SSE 服务器和在客户端使用 EventSource 类来连接 SSE 服务器。SSE 是在你想实现实时通信的应用程序中，一个很有价值的技术。
当然，还有更多的东西可以挖掘，例如如何发送自定义事件和如何超时等等。我们鼓励你去深入学习 SSE，尝试使用更多的场景来达到更好的使用水平。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6539d68b7d4982a6eb368148