在前端开发中，实时更新数据和图表是很常见的需求。传统的方式是使用 AJAX、WebSocket 等技术。但是，这些技术都需要自己编写很多的代码来实现通信和数据更新。从而增加了开发复杂度和工作量。而使用 Server-sent Events(SSE) 技术，则可以很方便地实现数据更新和图表实时刷新效果。本文将详细介绍 SSE 技术的使用方法，并带有示例代码贴近实际应用场景。
SSE 技术是什么？
Server-sent Events(SSE) 技术是 HTML5 中的一项规范，它允许一个网页自动获得来自服务器的更新。SSE 的特点是利用了浏览器中的 EventSource API，通过一条长期的 HTTP 连接，实现了服务器到客户端的单向通信。客户端只需要向服务器发起一次请求，然后就可以持续地接收服务器端的推送数据。SSE 的优点是代码简单易于维护，传输的数据长度可以达到数十 KB 量级，还支持跨域传输，不需要同源限制。
SSE 实现原理
SSE 协议使用 HTTP/1.1 协议的 GET 请求，服务器将响应头设置为“Content-Type:text/event-stream”，告诉浏览器这是一条 SSE 连接。在请求头中也可以添加 Last-Event-ID 字段，表示从某一事件 ID 开始接收数据，服务器接受到该请求后使用长连接（keepalive）的方式发送数据到客户端，一旦有新数据到来，服务器会生成一条事件消息，并携带上事件的 ID 和数据，客户端接收到消息后，通过解析消息体可以得到事件 ID 和数据，从而更新到页面中。
如何使用 SSE 实现图表实时刷新？
下面以 ECharts 组件为例，介绍如何使用 SSE 实现图表实时刷新的效果。ECharts（缩写为：Enterprise Charts）是百度前端开源的一个基于 HTML5 Canvas 的交互式可视化图表库。它非常的实用且风格优美。
服务端代码部分
---- ----- ------ ------ --------
------ ------- ----
--- - ---------------
--- ---------------
----- -----
----- ------- ------------------- -------------------------------- -----
-------------
---------------
--- --------
------ ---
--------- -----
------
------
----- ----------------
---------- ----- ------------
------- -----------------------------------------------------------------------
-------
------
---- ---------- ------------- ---------------------------
--------
--- ----- - -----------------------------------------------
-----------------
------ -
----- -----------
----- --
--
------ -
----- -------
--
------- --
----- ---
----- ------
--
---
--- --- - --- -----------------------
------------------------------------ ----------- -
--- ---- - -------------------
-----------------
------ -
----- ---- - -------------------
--
------- --
----- ----
----- ---------------------
--
---
---
---------
-------
-------
---
---------------------
--- ---------
------ ------------------------ ---------------------------------上面给出了一个简单的 Flask Web 服务端代码，返回一个 HTML 页面，其中 JavaScript 代码中定义了一个 ECharts 的图表实例。同时，服务器还提供了一个 SSE 接口 /stream，会不断地生成一个数据并通过事件 chart_update 推送给客户端。
为了验证 SSE 推送的实时性，这里加入了一个 time.sleep(1) 的延时，表示每隔 1 秒钟就会生成一个随机数据发送。
客户端代码部分
通过上面的服务端代码，客户端可以不停的接收到服务器端的推送消息，下面给出 ECharts 图表实例更新实现的 JavaScript 代码。
--- ----- - -----------------------------------------------
-----------------
------ -
----- -----------
----- --
--
------ -
----- -------
--
------- --
----- ---
----- ------
--
---
--- --- - --- -----------------------
------------------------------------ ----------- -
--- ---- - -------------------
-----------------
------ -
----- ---- - -------------------
--
------- --
----- ----
----- ---------------------
--
---
---首先创建了一个 echarts 图表实例，然后通过 setOption 方法初始化了一个带 X 轴和 Y 轴的线性图。接着创建一个 EventSource 对象，向服务端的 SSE 接口 /stream 发起请求，并注册了一个 chart_update 事件监听器，一旦服务端接收到了新的数据，就会通过该事件实时推送给客户端。在事件监听器中，将接收到的消息体解析成 JSON 数组并在图表实例中实时更新数据并重新渲染。
总结
SSE 技术是一种轻量且易于实现的前后端通信技术，可以非常方便地实现数据的更新和图表的实时刷新。在实际应用中，可以通过 SSE 接口推送不同类型的事件数据，从而有效的提高网站的实时性和用户体验。本文简单讲解了 SSE 的原理和使用方法，并给出了一个实际的应用场景，希望通过本文的介绍可以让更多的前端开发者更好的使用 SSE 技术，提升应用的实时性和用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65197f2495b1f8cacd1a886a