在前端开发中，实时数据展示是一个非常常见的需求。常用的方式是通过 WebSocket 或长连接实现。而本文要介绍的，则是使用 Server-sent Events (SSE) 和 Chart.js 来构建实时数据展示的方法。
什么是 Server-sent Events (SSE)
Server-sent Events (SSE)，即服务器推送事件，是一种基于 HTTP 协议的服务器推送技术。它允许服务器实时地向客户端推送数据，而不需要客户端不断地发送请求。SSE 支持 JSON、XML 等多种格式，并且对于一些浏览器不支持 WebSocket 的场景，SSE 是一种很好的选择。
传统的 HTTP 请求响应模式需要客户端不断地发送请求，从而浪费带宽和服务器资源。而 SSE 利用基于事件流的机制，在数据有更新时就会向客户端推送新数据，从而提高效率和减少资源浪费。
如何使用 SSE 和 Chart.js 构建实时数据展示
在本文中，我们将以一个简单的实时股票行情展示为例，演示如何使用 SSE 和 Chart.js 来构建实时数据展示。
首先我们需要准备一个股票行情数据源的服务端，该服务端会定时向客户端推送数据。在这里我们使用 Node.js 和 Express 来实现。
服务端的代码如下：
----- ------- - -------------------
----- --- - ----------
-------------------------------- - ------------
----------------- ------------- ---- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
--- ----- - ----
---------------------- -
----- -- ------------------------ - - - ---
----- ---- - -
------ ------
----- --- ---------------------------
--
---------------- - - -------------------- - --------
-- ------
---
-----------------
------------------- ------- -- -------------------------上面的代码中，我们使用 Express 来搭建一个简单的 HTTP 服务，并通过设置响应头，告诉浏览器这是一个 SSE 数据流。然后我们定义了一个定时器，每隔 2 秒生成一条股票行情信息，并将其转换成 JSON 格式字符串，通过响应流发送给客户端。
客户端的代码则如下：
--------- -----
------
------
---------- -------------
------- -------------------------
-------
------
------- ----------------------
--------
----- --- - ----------------------------------------------------
----- ----- - --- ---------- -
----- -------
----- -
--------- -
-
------ ------ -------
---------------- ---------- --- ---- ------
------------ ---------- --- ---- ----
------------ --
----- --
-
-
--
-------- -
------- -
------ -
-
----- -------
----- -
----- --------
-
-
--
------ -
-
------ -
------------ -----
-
-
-
-
-
---
-- ------ --- --
----- ----------- - --- ----------------------
--------------------- - --------------- -
----- ---- - -----------------------
----------------------------------
-- ----------
-- ----------
---
---------------
--
---------
-------
-------上面的代码中，我们引入了 Chart.js，并使用 Canvas 元素创建了一个折线图。然后我们使用 JavaScript 在页面加载后，通过 SSE 建立与服务端的连接，并在收到服务端推送的新数据时将其添加到折线图的数据集当中。
总结
通过本文的介绍，我们了解了什么是 SSE，以及如何使用 SSE 和 Chart.js 来构建实时数据展示。SSE 不仅可以应用在股票行情展示等实时数据场景中，更可以应用在聊天室、在线游戏等场景中。相比于传统的 HTTP 请求响应模式，SSE 可以节省带宽和服务器资源，提高效率，是一种很好的实时数据推送技术。
示例代码可在 https://github.com/zhonglimh/sse-chart 找到。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f3320ff6b2d6eab3cab5a0