SSE 实现 web 端实时操控 LED 灯
随着物联网的普及，我们已经可以通过 web 应用来操控各种设备。实时操控设备的需求越来越高，而 SSE（Server-Sent Events）就是一种实现 web 端实时操控的技术。
SSE 是基于 HTTP 的，它可以把服务器端发送的事件实时推送给客户端，客户端可以通过事件监听器获取到这些事件，并做出相应的处理。SSE 最大的优点就是能够通过单个 HTTP 长连接实现实时通信，而且不需要额外的握手和 Cookies。
下面我们就以实时操控 LED 灯为例来演示 SSE 的应用。
- 服务端代码
首先，在服务端我们需要通过 SSE 向客户端发送实时事件。以下是一个使用 Node.js 的简单例子：
-- -------------------- ---- ------- ----- ---- - ---------------- ----------------------- ---- -- - -- ------------------- -- ------------------ --- -------------------- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- -------------- -- - ----- ---- - ------ ------------------------------------------ ---------------- -- ------ - ---- - ------------------ - --------------- ----------- --- ----------------- --------- ---------- - ----------------展开代码
这个代码会创建一个 HTTP 服务器，如果客户端请求头中的 accept 值为 text/event-stream，则会发送一个 SSE 事件给客户端，事件包含一个随机生成的数字，表示 LED 灯的开关状态。事件格式如下：
data: [0/1]\n\n
其中，data 为事件名，可以根据业务逻辑自定义，[0/1] 表示 LED 灯的开关状态。
- 客户端代码
为了使客户端能够接收到 SSE 事件，我们需要使用 EventSource 对象来监听事件，以下是一个基本的 HTML/js 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------------ ----- ---------------- -------- ----- ------ - --- -------------------- ---------------- - --------------- - -------------------- ------- ------------ ----- --------- - ----------- ----------------------------------------------------------- - --------- --- --- - ----- - ------- -- --------- ------- ------ -------- --- ------ ---- --------------- -------------------------------------------------------------- ------- -------展开代码
这个文件使用了 EventSource 对象来监听 SSE 事件。当事件被发送到客户端时，事件的数据通过 onmessage 函数被接收，然后根据数据来控制 LED 灯的开关状态。
- 运行代码
最后，我们需要在运行服务端代码，打开浏览器，在地址栏里输入 http://localhost:3000，会看到一个 LED 灯，每秒钟闪烁一次。这个 LED 灯可以通过按下开关控制亮灭。
通过这个例子我们可以看到 SSE 实现 web 端实时操控的优势。使用 SSE，我们可以通过一个 HTTP 长连接实现实时通讯，而不需要额外的握手和 Cookies。这种方式非常适合实时通讯场景，例如在线聊天、监控系统和物联网控制等。
以上是本文介绍的 SSE 实现 web 端实时操控 LED 灯的例子，相信大家在实际应用中也能够使用 SSE 实现更加复杂的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b9c269306f20b3a68369bd
