本文介绍如何利用 Server-Sent Events (SSE) 和 JavaScript 构建实时图形。你将学习到如何设置 SSE 服务器、如何在前端页面中使用 SSE 并把相关数据渲染成动态的实时图形。我们将会使用 HTML、CSS 和 JavaScript 完成这一过程。
什么是 Server-Sent Events？
Server-Sent Events 是一种轻量级的协议，它允许浏览器自动从服务器上获取推送（pushed）数据。该协议支持服务器消息单向发送到客户端，也就是说，服务器可以在任意时间内发送数据给客户端，而客户端会实时接收这些数据。SSE 可以被用于构建实时数据可视化和更新内容等类似场景。
构建 SSE 服务器
首先，我们需要一个 SSE 服务器，它需要能够发送数据到客户端，通常情况下，我们可以使用 Node.js 来搭建 SSE 服务器。以下是一个简单的 SSE 服务器示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
-- ------ --- --
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- --------
-------------- -- -
----- --- - --- ----------------------------
---------------- --- ---- -- -------------
-- ------
--------------- -------------
------------------- ------- -- -------------------------在这个示例中，我们创建了一个 HTTP 服务器并监听了本地 3000 端口。服务器会每秒钟向客户端发送一条数据，该数据包含当前的时间。
前端页面使用 SSE
现在我们已经有了一个 SSE 服务器，接下来我们需要在前端页面中使用 SSE 来获取推送数据，并把它渲染成实时图形。以下是前端页面示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ----- ---- --- --- ------------------
-------
------ -
------ ------
------- ------
------- --- ----- ------
-
--------
-------
------
------------- ----- ---- --- --- ---------------
---- ----------- ---
-- ---------------
--------
----- ----- - ---------------------------------
-- ------ --- --
----- --------- - --- --------------------------------------
-- - --- -----------
------------------- - --------------- -
-- ----------
----- ----- - --------------------------------------- -----
-- ------ --- ---------
----- --- - ------------------------------
--------------- - -------
---------------- - ------ - --- - -----
------------------------- - -------
-- ----------
----------------------- ------------------
--
---------
-------
-------在这个示例中，我们创建了一个 div 元素作为实时图形容器，并创建了一个新的 SSE 对象从服务器端获取数据。当 SSE 在接收到消息后，我们将数据转化为数字，并将其渲染成一个新的 div 元素添加到图形内部。用户可以看到图形被实时地更新。
总结
本文介绍了如何使用 Server-Sent Events 和 JavaScript 构建实时图形。你可以通过 SSE 服务器在任意时间向客户端发送推送数据，然后通过前端页面把数据渲染成实时
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651bb26f95b1f8cacd3539ea