介绍
在机房中，监控机房温度变化是非常必要的。本文将介绍如何使用 Socket.io 实现机房温度监控的实时显示。
Socket.io 简介
Socket.io 是一个实现网络套接字的 JavaScript 库，它供客户端和服务器端使用。使用 Socket.io 可以轻松地实现实时通信功能，例如聊天、多用户协作和实时更新等。
实现
我们将使用 Raspberry Pi 3B 和 DHT11 温度样板对机房温度进行读取并传输到服务器，服务器再使用 Socket.io 将数据实时从后台推送到客户端并显示。
步骤一：启动服务器
首先，我们需要启动一个 Node.js 服务器，并安装 Socket.io。可以使用以下命令创建一个新项目：
mkdir temp-monitor cd temp-monitor npm init
根据提示完成项目初始化后，使用以下命令安装依赖：
npm install --save express socket.io
在项目根目录下，创建一个名为 server.js 的文件，并添加以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- ---- - ---------------------------------- ----- -- - --------------------------- ----- ---- - ---------------- ----- ------ - --------------------------- ------------------------------------------- ------------ ------------------- -------- -- - -------------- ---- ------------- --- ----------------- -- -- - ------------------- --------- -- ---- ---------- ---
上述代码做了以下几件事：
- 导入 Express 和 Socket.io 库；
- 创建一个 Express 应用程序和 HTTP 服务器；
- 创建一个 Socket.io 实例并将其附加到服务器；
- 添加一个中间件响应静态页面请求；
- 监听客户端连接事件。
使用以下命令启动服务器：
node server.js
步骤二：读取温度传感器数据
接下来，我们需要读取温度传感器数据。请注意，以下示例针对 DHT11 温度传感器。
可以使用以下命令安装 node-dht-sensor：
npm install --save node-dht-sensor
此外，我们还需要为传感器设置 GPIO 引脚。
在 Raspberry Pi 上，需要安装 wiringpi 库。
sudo apt-get install wiringpi
在 Raspberry Pi 的命令行中，运行以下命令以查看已安装库的版本：
gpio -v
接下来，在项目根目录下，创建名为 temperature.js 的文件，添加以下代码：
-- -------------------- ---- -------
----- ------ - ---------------------------
----- --------------- - -- -- -
----- ---------- - --- -- -----
----- --- - -- -- -----
----- ------ - ----------------------- -----
-- -------------- -
------ -----
-
----- ----------- - ------------------------------
------ ------------
--
------------------------------ - ----------------上述代码做了以下几件事：
- 导入
node-dht-sensor库； - 创建一个函数，读取温度传感器返回温度（如果读取失败，则返回
null）。
此时，我们已准备好了服务器的套接字和读取温度数据的模块。
步骤三：将数据发布到客户机
我们来修改 server.js 文件以便于将数据实时发布到客户机，我们需要在服务器和客户端之间创建一个套接字连接并将读到的数据实时发布到前端。
请参考以下 server.js 文件的修改：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---- - ----------------------------------
----- -- - ---------------------------
----- ---- - ----------------
----- - --------------- - - -------------------------
------------------------------------------- ------------
------------------- -------- -- -
-------------- ---- -------------
-------------- -- -
----- ----------- - ------------------
-- ------------- -
--------------------------- -------------
-
-- ------
---
----------------- -- -- -
------------------- --------- -- ---- ----------
---上述代码作了以下几件事情：
- 增加了温度读取模块；
- 添加了服务器和客户端之间的套接字连接；
- 使用
setInterval定时读取温度数据； - 将数据实时发布到客户机。
下面，我们来创建一个前端显示温度数据的页面。在项目根目录下创建一个名为 public 的目录，然后在该目录下创建名为 index.html 的文件并添加以下代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------ ---------------
-------
------
--------------- ------------
-------- ------------------------- -----------
------- ---------------------------------------
--------
--- ------ - -----
------------------------ --------------------- -
------------------------------------------------ - ------------
---
---------
-------
-------上述代码做了以下几件事：
- 显示了温度数据的html页面；
- 在body内用id为"temperature"的span标签来显示温度；
- 导入 Socket.io 客户端库；
- 创建一个 Socket.io 实例连接到服务器；
- 监听服务器推送的
temperature事件，并将其值显示在前端。
现在，我们已经完成了机房温度检测实时推送，启动应用程序并通过浏览器访问 http://localhost:3000，就可以看到温度随着时间变化而实时显示在页面上。
总结
本文介绍了如何使用 Socket.io 实现机房温度监控实时显示。我们了解了如何在服务器和客户端之间创建一个套接字连接，如何读取温度传感器数据，并将数据实时发布到客户机。此外，我们还创建了一个简单易用的前端页面以展示温度数据。希望本文对读者在实际开发中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd79e795b1f8cacdcdbdff