随着 Web 技术的快速发展，前端页面越来越复杂，面临着实时图表、聊天室、股票行情等实时数据更新的问题。传统的轮询方式已经无法满足这些业务场景的需求。而基于 SSE（Server-Sent Events）的实时数据推送技术，则成为了一种非常有效的解决方案。
本文将详细介绍如何基于 SSE 实现前端页面的自动更新，从 SSE 原理解析、API 的使用、实现代码等多个方面进行探讨。希望读者通过本文的学习和实践，可以掌握 SSE 技术，为自己的 Web 应用带来前所未有的实时体验。
一、SSE 原理
SSE 是一种新型的服务器向浏览器推送数据的技术，它和 WebSockets 相似，但更简单、更轻量。相比 WebSockets 的双向通信，SSE 是一种单向通信，即服务器向客户端推送数据，客户端只能接收数据，不能发送数据。由于 SSE 采用了长连接，因此可以实现服务器在推送数据时，实时将数据更新到客户端中，从而避免了资源的浪费，提高了服务器效率。
SSE 的原理非常简单，浏览器向服务器发送一个 GET 请求，并指定响应头的 Content-Type 属性为 text/event-stream。服务器在收到此请求后，开始向浏览器发送数据，格式如下：
data: <message>\n\n
其中，message 表示需要推送的数据。需要注意到的是，每个数据的最后一行必须是 \n\n，代表一次数据传输的结束。
例如，服务器发送如下数据：
data: {time : '2022-12-15 10:00:00', message : 'hello world'}\n\n那么客户端应该如何接收呢？
二、API 使用
在浏览器端，我们可以使用 EventSource 对象来接收服务器推送的数据。
1. 实例化
EventSource 构造函数的第一个参数是服务器端的 URL，此链接应该在服务器端打开 SSE 连接。例如：
const source = new EventSource('/sse');2. 接收数据
通过监听 EventSource 对象的 message 事件，我们可以接收服务器推送过来的数据。
source.addEventListener('message', function(event){
console.log(event.data);
});3. 处理异常
EventSource 对象会自动处理连接异常，如网络断开等情况。当连接异常时，会发出 error 事件。
-- -------------------- ---- ------- -------------------------------- ---------------- ------------------------------- ---------------- ----------------------- ------- --------- - --- -------------------- --------------------------------------- ---------------- --------------------------- ----- --- ------ ---
4. 关闭连接
当不需要再接收服务器的数据时，可以通过调用 close() 方法来关闭连接。
source.close();
三、自动更新示例
接下来，我们将通过一个示例来演示如何使用 SSE 技术实现前端页面的自动更新。这是一个简单的股票行情示例，后端使用 Node.js 模拟推送行情数据，前端使用 SSE 技术接收数据并更新页面。
1. 服务端代码
-- -------------------- ---- ------- ----- ---- - ---------------- ------------------------------- ---- - - --- -- --- -- ----------- --- --------- - -------------------- - ------------------ -------------------- ------------------- ----------- ---------------- ------------ ----- -- ----- ----- - -- ------------------------ - -------- ----- - ------------------------ - ------ - ---- -------- ---- - - --- ------ ------ ----- -- ----------- ------------------- - - -------------------- - -------- ---- ------ -- --------- -- - --- ------ ------------------- ---------------- -------------- ---------- ----------- ----- -------- -------- -------- ---------------- ---------------------- --------- -------- ------- ----------------- ----------- --------- ------ - --- ---------------------- --------- -------- - --------------------------------- -------------------------------------- ---------------- ---------- ---- - ----------------------- ---------- - - ---------------------------- ---------------- - ------- - ------- - ------ - ----------- ----------------------------- ------- ------------ --------- --------- ---- ----------------
服务端使用 Node.js 创建了一个 HTTP 服务器，当浏览器访问 /stock 时，服务器将开启 SSE 连接，模拟生成股票行情数据并向浏览器推送。当浏览器访问默认页面时，将返回股票行情的页面 HTML。
2. 前端代码
前端页面包含一个股票行情的 div，用于显示实时的股票行情数据。当有新的股票行情数据时，前端页面使用 JavaScript 动态创建 p 元素，并添加到股票行情 div 中。
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- -------------------- ------- ------ ----- ----------------- --------- ------- ------ - --- ---------------------- ------- -------- - --------------------------------- ------------------------------------ ---------------- -------- ---- - ----------------------- -------- - - ---------------------------- -------------- - ------- - ------- - ------ - ----------- --------------------------- ----- ---------- ------- -------
3. 运行测试
打开浏览器，访问 http://localhost:8080，可以看到页面如下图所示，此时页面还没有接收到股票行情数据。
打开浏览器的开发者工具，查看 Network 面板，可以看到 SSE 连接已经建立。
过一段时间后，页面将收到服务器推送的数据，实时更新股票行情信息。
四、总结
通过本文，我们了解了 SSE 技术的原理和使用方法，并通过一个简单的示例演示了如何使用 SSE 技术实现前端页面的自动更新。同时，我们还可以将 SSE 技术应用于聊天室、实时图表、人物在线状态等业务场景中。
需要注意的是，SSE 技术并不是所有浏览器都支持，但大多数主流浏览器都已经支持了 SSE 技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64746bfa968c7c53b01cbc8d