在html页面中 如何应用mqtt协议发送/接收消息

Posted 2021-03-28 物联小拾趣

 经过前面几篇文章的介绍，在很多场景下利用NodeMCU加持mqtt协议来控制几乎所有需要传感器监控的行业都能极大地简化物联的成本。在这样一个基础上，还能拓展出很多好玩的、实际运用的甚至能够作为商业化运作的物联方案来。

有mqtt协议我们还只能在幕后搞事情，接下来要说websocket。有了它，我们就可以在html页面里玩转mqtt了。这样做极大地方便我们把有用的数据以最直接的形式展示出来。先了解一下Websocket，WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

上一篇文章里面已经完成了用nodejs搭建mqtt服务器并实现NodeMCU控制/接收传感器消息。但数据都是在nodejs下跑来跑去实在不方便查看，有个websocket数据就能在html页面上跑了。

好了，废话不多说直接上代码。

代码包含三个文件夹mqtt 服务端 +websocket 服务端+html前端，mqtt文件夹中三个文件运行前需要nodejs下安装mosca、mqtt、ws扩展，请自行百度。

1、运行mqtt.js 主mqtt服务器，运行subscribe.js 订阅消息服务，运行publish.js发布消息服务。

2、打开websocket文件夹，先运行npm install 安装必要的扩展，安装完毕运行server.js socket主服务。

3、html文件夹中，直接运行sample.html。这个页面通过连接server.js

的socket服务器监听消息并操作DOM完成页面展示。

通过publish.js发送控制指令，html 呈现数据

关掉publish.js，直接在html页面发送数字来控制mqtt