在前端开发中，一些常见的场景需要时时更新的数据，比如聊天室、股票行情、即时消息等。而使用传统的 AJAX 技术获取数据，需要不断地轮询后端接口，浪费带宽和 CPU，同时也无法做到实时推送数据。此时，Server-Sent Events（简称 SSE）技术应运而生，可以解决这一问题。本文将为大家介绍 SSE 技术以及如何在前端中使用它。
SSE 技术简介
SSE 是一种基于 HTTP 的轻量级协议，在客户端和服务端之间建立持久连接，允许服务端向客户端发送事件数据，客户端实时更新数据。相比 WebSocket 协议，SSE 更加轻量、稳定，无需额外的协议升级。
SSE 的特点：
- 仅需建立一次连接，后续数据传输都在已建立连接之中；
- 服务器可以在任何时刻向客户端推送数据；
- 适合实时应用和大数据量的数据传输。
SSE 的实现方法是使用 EventSource 对象。EventSource 是一个 JavaScript 对象，用于与服务器建立 SSE 连接并接收推送消息。客户端向服务器发送请求时，包含 "text/event-stream" 的 MIME 类型，以表明请求中只接收该类型的数据。
以下是一个基本的 SSE 示例：
const source = new EventSource('/stream');
source.onmessage = function(event) {
console.log(event.data);
};服务器端返回 SSE 事件流时，需要满足以下条件：
- HTTP 状态码需要为 200；
- 响应 Content-Type 需为 "text/event-stream"；
- 数据需要按照指定格式发送，如下所示：
data: hello world\n\n
其中，"data" 表示消息类型，"hello world" 为消息内容，"\n\n" 代表消息结束。注意每行以 ":" 开头，必须有一个空行来分隔两个事件。
在前端中使用 SSE
使用 SSE 技术需要注意以下几点：
- SSE 只能从浏览器向服务器发起连接，而 AJAX 可以在浏览器和服务器之间互相发送；
- SSE 消息只能从服务端向客户端推送，而 AJAX 可以在客户端和服务端之间互相推送；
- SSE 消息传输顺序不方便调整，而 AJAX 可以通过 Promise 方法解决。
以下是一个实际使用 SSE 的代码示例：
// javascriptcn.com 代码示例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Server-Sent Events Example</title>
</head>
<body>
<ul id="message-list"></ul>
<script>
const messageList = document.getElementById('message-list');
const source = new EventSource('/stream');
source.onmessage = function(event) {
const li = document.createElement('li');
li.innerText = event.data;
messageList.appendChild(li);
};
</script>
</body>
</html>运行后，该页面将创建一个无序列表，每当服务端推送新消息时，文本将添加到列表中。
总结
Server-Sent Events 技术是一种优秀的实时推送技术，可以避免 AJAX 轮询十分消耗性能的问题。在前端中，使用 SSE 可以借助 EventSource 对象轻松地建立持久连接，并接收并处理服务端推送的数据。SSE 技术中的事件流格式需要严格遵循规定，所以在服务端推送事件流数据时需注意格式。目前 SSE 技术已经得到广泛应用，值得前端开发人员学习并应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653b1d427d4982a6eb56e9c9