随着工业化的发展，生产线已从传统的机械化生产方式逐渐过渡到数字化、智能化的生产方式。生产线的自动化程度越来越高，物料流程的监控也越来越重要。因此，本文将介绍如何使用 SSE 实现生产线物料实时监控系统。
什么是 SSE？
SSE（Server-Sent Events）是 HTML5 标准规范的一部份，用于服务器向客户端推送推送事件。SSE 协议与 WebSockets 相似，不同之处在于 SSE 是基于 HTTP/1.1 协议的，只能由服务器向客户端发送消息，客户端无法主动发送消息。
实时监控系统概述
本文将实现一个生产线物料实时监控系统。该系统由三部分组成:
- 生产线监控服务器（即生产线上的物料监控中心）
- 客户端浏览器（即监控中心的用户）
- 视频/图像采集设备（即在生产线上安装的采集硬件设备）
系统架构图如下图所示：
服务器端实现
通过 SSE 协议，服务器可以任意时间向客户端浏览器推送事件。这是一种非常有效的实现实时监控系统的方法。
实现 SSE 协议的服务器代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ------------------------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------------- -
----- ------- - ------ ---------------------------- -------------------
-------------------
-- ------
---
------------------- ---------- -
------------------- ------- -- ------------------------
---在代码中，通过 http.createServer 创建了一个 HTTP 服务器，并将服务器响应头信息设置为 Content-Type: text/event-stream，这样服务器会发送一个 MIME 类型为 text/event-stream 的内容给客户端。
然后使用 setInterval 方法每秒钟向客户端发送一个带有时间戳的 JSON 字符串。其中，在每个消息的结尾处都要发送两个换行符，用于告诉客户端已经完成一条消息的发送。
客户端实现
在客户端浏览器中，我们可以使用 JavaScript 来接收由服务器推送的事件并更新监控中心的界面。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------------
-------
------
--------------------
---- ----------------
--------
----- ------ - --- -----------------------
------------------------------- --------------- -
---------------------- -- ---------
---
---------------------------------- --------------- -
----- ---- - -----------------------
----- --------- - --- ------------------------------------------
----- --- - ------------------------------
------------- - ----- -------- --- - - ----------
-------------------------------------------------
---
-------------------------------- --------------- -
----------------- ----- --------- - - ------------------
---
---------
-------
-------在代码中，我们使用 EventSource 类初始化一个 SSE 连接，并将它设置为从服务器的 /events 端点接收推送事件。
然后，使用 addEventListener 方法为 open、message 和 error 事件添加监听器。
当打开 SSE 连接时，open 事件将被触发，在回调函数中使用 console.log 方法输出连接成功的信息。
当接收到服务器推送的消息时，message 事件将被触发，在回调函数中将消息的时间戳转化为可读形式，然后将其添加到 data 元素的末尾。
当 SSE 连接发生错误时，error 事件将被触发，在回调函数中使用 console.error 方法输出错误信息。
示例演示
运行服务器端代码：
node server.js
然后，在客户端浏览器中访问 http://localhost:8888 端点，即可看到每秒钟更新一次的时间戳。
总结
使用 SSE 实现生产线物料实时监控系统是一种非常有效的实现方法。通过 SSE 协议，服务器可以向客户端发送实时事件，并更新监控中心的界面。在实际生产环境中，我们可以通过安装视频/图像采集设备来实时监控生产线的物料流程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654deffe7d4982a6eb74bae1