在现代 Web 开发中，实现实时监管的需求越来越常见。一种可行的方式是使用 Server-sent Events，也被称为 SSE。在本文中，我们将会介绍如何使用 SSE 实现流程监管，并提供示例代码以供参考。
什么是 Server-sent Events
Server-sent Events 是一种不同于 WebSocket 的实时通信技术，能够让后端在连接已经建立的情况下，不断发送消息给前端。这种消息是基于 HTTP 的，因此 SSE 具有跨域传输的优势，同时也比 WebSocket 更加轻量化。
在 SSE 的实现中，后端将会维护一个持久连接（长轮询），来不断向前端发送数据，而前端则通过 JavaScript API 从这个持久连接中实时接收数据。
使用 SSE 实现流程监管
下面我们将会展示如何使用 SSE 实现流程监管。在我们的示例中，我们将会使用 Express.js 作为后端框架，同时也需要使用 HTML、CSS 和 JavaScript 来实现前端页面和 SSE 连接。
后端代码
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----------------------------------
------------------ ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - - -------- ----- -- - ------- ---- --- ------- --
---------------- ------------------------------
-- ------
---
---------------- -- -- ------------------- ------- -- ---- --------
首先，我们用 Express.js 创建了一个服务器，并通过 app.use(express.static('public')); 指定了前端页面的目录为 public，这样就可以将整个目录设置为静态文件目录，例如引用 "public/index.html" 就可以访问到我们的前端页面。
然后，我们创建了一个 SSE 的路由 /events。这个路由用于建立 SSE 连接，并在连接已经建立的情况下向前端发送消息。在路由中，我们通过 res.set 来设置 SSE 的头部信息，'Content-Type': 'text/event-stream' 表示使用 SSE 协议，'Cache-Control': 'no-cache' 表示禁止缓存，'Connection': 'keep-alive' 表示持久连接。
接着，我们使用 setInterval 函数来每隔一秒钟向前端发送一个消息。消息的内容可以是任意的，我们这里使用 { message: 'This is a message from the server' } 作为示例。
前端代码
-- -------------------- ---- ------- ----- ------ - --- ----------------------- ----- --------- - ------------------------------------- ---------------------------------- ----- -- - ----- ---- - ----------------------- ----- -------- - ----------------------------- -------------------- - ------------- -------------------------------- ---
前端代码很简单。我们通过 new EventSource('/events') 创建了一个 SSE 连接，指定了后端的 SSE 路由为 /events。然后，我们通过 addEventListener 来监听 SSE 发送的 message 事件，并解析消息中的 JSON 数据。最后，我们将消息展示在 #eventList 中的列表项中。
总结
在本文中，我们介绍了如何使用 Server-sent Events 实现流程监管，并提供了一个简单的示例代码。使用 SSE 实现实时监管，能够在不使用 WebSocket 的情况下得到类似的效果，同时也能够减少不必要的通信负载。我们希望本文能够对大家理解 SSE 和实现实时监管有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6458988e968c7c53b0af185e