在今天的互联网世界中，实时通信对于各种应用和场景来说变得越来越重要。而其中一种非常受欢迎的实时通信方式就是 Server-Sent Events（SSE）。本文将会介绍什么是 Server-Sent Events，以及如何在前端中使用它来实现实时通信。
什么是 Server-Sent Events
Server-Sent Events 是一种基于 HTTP 的通信协议。它允许浏览器通过一个持久的 HTTP 连接来自动接收来自服务器的更新。这些更新可以是纯文本，也可以是 JSON 或 XML 等任何类型的数据。SSE 是典型的一个单向通信协议。客户端通过 HTTP 连接向服务器发送一次请求，在服务器端发送数据给客户端时，不需要任何客户端的干预。这与 WebSockets 不同，WebSockets 是一个双向通信协议。客户端和服务器可以随时发送对方。 但是，相较于 WebSockets，SSE 更轻量级，更容易实现，并且更适合那些只需要向客户端传递信息而不需要接收信息的实时通信场景。
Server-Sent Events 如何工作
现在让我们来看看 SSE 如何工作。当你的浏览器发起 SSE 连接请求时，服务器会返回一个特殊的 MIME 类型 text/event-stream。此外，服务器还将发送一些自定义事件名称和消息正文。
客户端将自动使用浏览器内置的 SSE 解析器（EventSource）处理服务器发送的事件。EventSource 对象将自动打开一个持久 HTTP 连接，以便随时接收服务器发送的更新。每次服务器发送一个带有事件名称和数据正文的事件时，EventSource 将触发一个 message 事件，并将其传递给程序员。
以下是一个 SSE 通信流程的示意图：
如何在前端中使用 Server-Sent Events
现在让我们来看下如何在前端中使用 Server-Sent Events。主要步骤如下：
- 创建一个新的
EventSource实例，并指定 URL。 - 添加
message事件监听器，以处理来自服务器的更新。 - 最后，发送指定格式的数据即可，数据格式为
event: 事件名称\n data: 数据\n\n。其中事件名称和数据可以自由制定。
下面我们来看一个简单的实时时钟示例代码：
<!-- html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Server-Sent Events</title>
</head>
<body>
<h1>Current Time</h1>
<p>
<em id="currentTime"></em>
</p>
<script>
// javascript
const currentTimeElement = document.getElementById('currentTime');
const eventSource = new EventSource('/sse');
// 监听服务器发送的更新
eventSource.addEventListener('message', (messageEvent) => {
const data = JSON.parse(messageEvent.data);
const currentTime = new Date(data.currentTime);
const formattedTime = `${currentTime.getHours()}:${currentTime.getMinutes()}:${currentTime.getSeconds()}`;
currentTimeElement.textContent = formattedTime;
});
</script>
</body>
</html>服务器响应：
// Node.js
const http = require('http');
http.createServer((req, res) => {
res.writeHead(200, {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
});
// 发送更新给客户端
setInterval(() => {
const currentTime = new Date().toJSON();
res.write(`event: clock\ndata: {"currentTime":"${currentTime}"}\n\n`);
}, 1000);
}).listen(8080);总结
本文介绍了什么是 Server-Sent Events，及其与 WebSockets 的区别。我们还演示了如何在前端中使用 Server-Sent Events 实现实时通信，并给出了简单的示例代码。实时通信技术的发展，使得我们可以更好地创建各种应用，并在用户体验和应用性能方面取得更好的结果。如今，Server-Sent Events 已被广泛应用于各种实时通信场景，如实时数据传输、在线交流等。相信本文能够帮助您更好的理解和掌握 Server-Sent Events 技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b1343fadd4f0e0ffa7e4b6