随着 Web 技术的发展，越来越多的应用开始需要实时的推送数据给用户。这种实时数据展示的需求在前端领域也越来越常见。可以使用 SSE（Server Sent Events）技术来实现 HTML5 实时数据展示，这种技术可以在不需要轮询和额外握手的情况下将服务器端的数据推送到客户端。
本篇文章将详细介绍 SSE 技术的使用方法，并提供一个示例代码，让读者可以自己尝试实现基于 SSE 的实时数据展示。
SSE 是什么？
SSE 是一种 Web 技术，可以实现服务器向客户端单向推送消息，从而实现实时的数据展示。相比起使用 Ajax 轮询，SSE 可以大大减少网络消耗和服务器负载。
SSE 最常用的场景是 Web 应用中需要实时展示数据的情况，例如股票价格监控、新闻实时订阅等。
SSE 协议
SSE 使用 HTTP/1.1 协议，通过一个长连接（长轮询）向客户端推送数据。以下是 SSE 协议的具体规范。
MIME 类型
浏览器可以使用以下 MIME 类型来标识 SSE 的响应：
Content-Type: text/event-stream
格式规范
SSE 的响应格式必须遵守以下规范：
每个 SSE 响应以 "data: " 开始，由一个空格隔开，并紧接着一个字符串。这个字符串就是服务器端推送给客户端的数据。如果需要推送多条数据，只需要按照这个格式多次发送即可。
如果需要发送一个事件标识符，可以在字符串前加上 "event: "。
如果需要在特定的时间间隔内向客户端推送数据，可以在字符串前加上 "retry: "，后面紧接着一个毫秒数值。
每个 SSE 响应以两个换行符（"\n\n"）结尾。
以下是一个 SSE 响应的示例：
data: Hello World!
SSE 客户端的实现
SSE 可以使用 JavaScript 的 EventSource 对象来实现。EventSource 对象定义了一个事件类型为 "message" 的事件，当从服务器接收到数据时就会触发该事件。
以下是一个 SSE 客户端的示例代码：
var source = new EventSource('server.php'); // SSE 连接
source.onmessage = function(event) { // 监听服务器端的消息
var data = event.data; // 获取服务器推送的数据
// 将数据展示到页面上
document.getElementById('result').innerHTML += data + '<br>';
};SSE 示例
以下是一个基于 SSE 的实时数据展示示例：
服务器端代码
-- -------------------- ---- ------- ----- --------------------- -------------------- ---------------------- ----------- -- - -- ----- ------ - ---------- - -------------- ----- - ------- ----- ------------ ---- ------ ----------- -- -------- ----------- -- --------- -------- -- --------------- --------- -- -- - - - --
客户端代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
---- ------------------
--------
--- ------ - --- -------------------------- -- --- --
---------------- - --------------- - -- ---------
--- ---- - ----------- -- ----------
-- ---------
------------------------------------------- -- ---- - -------
--
---------
-------
-------在这个示例中，服务器端会每秒钟向客户端推送当前的时间，客户端会将这个时间展示在页面上。这样就可以实现实时的数据展示。可以在多个浏览器窗口打开这个页面，就会发现所有页面会实时更新显示最新的时间。
结论
使用 SSE 技术可以方便地实现 HTML5 实时数据的展示，而且相比起使用 Ajax 轮询，SSE 可以大大减少网络消耗和服务器负载。在实现 SSE 客户端时，可以使用 EventSource 对象来监听服务器端的消息并展示数据。
要注意的是，SSE 技术需要服务器端的支持，因此必须使用支持 SSE 的 Web 服务器或应用服务器来实现。如果服务器不支持 SSE，也可以使用 WebSocket 技术来实现类似的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67394208317fbffedf15e21b