随着 Web 技术的快速发展，前端页面越来越复杂，面临着实时图表、聊天室、股票行情等实时数据更新的问题。传统的轮询方式已经无法满足这些业务场景的需求。而基于 SSE（Server-Sent Events）的实时数据推送技术，则成为了一种非常有效的解决方案。
本文将详细介绍如何基于 SSE 实现前端页面的自动更新，从 SSE 原理解析、API 的使用、实现代码等多个方面进行探讨。希望读者通过本文的学习和实践，可以掌握 SSE 技术，为自己的 Web 应用带来前所未有的实时体验。
一、SSE 原理
SSE 是一种新型的服务器向浏览器推送数据的技术，它和 WebSockets 相似，但更简单、更轻量。相比 WebSockets 的双向通信，SSE 是一种单向通信，即服务器向客户端推送数据，客户端只能接收数据，不能发送数据。由于 SSE 采用了长连接，因此可以实现服务器在推送数据时，实时将数据更新到客户端中，从而避免了资源的浪费，提高了服务器效率。
SSE 的原理非常简单，浏览器向服务器发送一个 GET 请求，并指定响应头的 Content-Type 属性为 text/event-stream。服务器在收到此请求后，开始向浏览器发送数据，格式如下：
----- -------------
其中，message 表示需要推送的数据。需要注意到的是，每个数据的最后一行必须是 \n\n，代表一次数据传输的结束。
例如，服务器发送如下数据：
----- ----- - ----------- ---------- ------- - ------ -----------
那么客户端应该如何接收呢？
二、API 使用
在浏览器端，我们可以使用 EventSource 对象来接收服务器推送的数据。
1. 实例化
EventSource 构造函数的第一个参数是服务器端的 URL，此链接应该在服务器端打开 SSE 连接。例如：
----- ------ - --- --------------------
2. 接收数据
通过监听 EventSource 对象的 message 事件，我们可以接收服务器推送过来的数据。
---------------------------------- ----------------
------------------------
---3. 处理异常
EventSource 对象会自动处理连接异常，如网络断开等情况。当连接异常时，会发出 error 事件。
-------------------------------- ----------------
------------------------------
---------------
----------------------
----- --------- - --- --------------------
------------------------------------- ----------------
------------------------
---
-- ------
---4. 关闭连接
当不需要再接收服务器的数据时，可以通过调用 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