web客户端页面连接MQTT服务

首先搭建好EMQX (MQTT)服务，在前面有说到如何搭建EMQX；MQTT本身就支持WebSocket 访问
MQTT客户端可以后端去开发也可以在页面快速做MQTT客户端

这里先展示页面如何快速做客户端

引用jQuery及mqtt.js

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/mqtt/4.1.0/mqtt.min.js"></script>

    <script>console.log(mqtt);// 连接地址，有很多连接失败都是因为地址没写对const connectUrl = `ws://localhost:8083/mqtt`;// 客户端ID 随机数以免重复const clientId = `mqtt_${Math.random().toString(16).slice(3)}`;console.log("客户端id：" + clientId);// 连接设置let options = {clean: true,         // 保留会话connectTimeout: 4000,    // 超时时间reconnectPeriod: 1000,   // 重连时间间隔// 认证信息clientId,username: 'admin',password: 'admints',}// 需要订阅的主题const topic = 'esp8266';const topic1 = 'tes';// 创建客户端var client = mqtt.connect(connectUrl, options);// 成功连接后触发的回调client.on('connect', () => {$("#ts").html("在线");console.log('已经连接成功');// 订阅主题，这里可以订阅多个主题client.subscribe([topic, topic1], () => {console.log(`订阅了主题 ${[topic, topic1].join('和')}`)})});// 当客户端收到一个发布过来的消息时触发回调/*** topic：收到的报文的topic* message：收到的数据包的负载playload* packet：MQTT 报文信息，其中包含 QoS、retain 等信息*/client.on('message', function (topic, message, packet) {// 这里有可能拿到的数据格式是Uint8Array格式，可以直接用toString转成字符串// let data = JSON.parse(message.toString());console.log("获取到的数据：", message)console.log("数据对应订阅主题：", topic)console.log("获取到的数据包：", packet)var message_packet = JSON.parse(Uint8ArrayToString(packet.payload));message_packet.msg;});// 当重新连接启动触发回调 client.on('reconnect', () => {$("#ts").html("重连");console.log("正在重新连接")});// 连接断开后触发的回调 client.on("close", function () {$("#ts").html("离线");console.log("已断开连接")});// 在收到 Broker（消息服务器） 发送过来的断开连接的报文时触发的回调，参数 packet 即为断开连接时接收到的报文。MQTT 5.0特性 client.on("disconnect", function (packet) {console.log("从broker接收到断开连接的报文：" + packet);});// 客户端脱机下线触发回调 client.on("offline", function () {console.log("您已断开连接，请检查网络")});// 当客户端无法成功连接时或发生解析错误时触发的回调，参数 error 为错误信息client.on("error", (error) => {console.log("客户端出现错误：", error);});//当客户端发送任何数据包时发出。这包括publish()以及MQTT用于管理订阅和连接的包 client.on("packetsend", (packet) => {console.log("客户端已发出报文", packet);});//当客户端接收到任何报文时发出。这包括来自订阅主题的信息包以及MQTT用于管理订阅和连接的信息 client.on("packetreceive", (packet) => {// 会在 client.on('message', function (topic, message, packet) {}); 之前触发console.log("客户端接收报文", packet);});// 关闭客户端（断开连接）//client.end();// 发送信息给 topic（主题）//client.publish(topic, '这是给topic发送的信息');//var topic_data=[];//topic_data.push(map)function Uint8ArrayToString(fileData) {var dataString = "";for (var i = 0; i < fileData.length; i++) {dataString += String.fromCharCode(fileData[i]);}return dataString}
</script>

 // 关闭客户端（断开连接）
client.end();
// 发送信息给 topic（主题）
client.publish(topic, '这是给topic发送的信息');

web客户端页面连接MQTT服务相关推荐

学习如何使用电脑客户端和ESP8266客户端来连接MQTT服务端以及订阅主题发送主题操作
MQTT原理与应用学习如何使用电脑客户端和ESP8266客户端来连接MQTT服务端本文章学习借鉴于太极创客团队,以表感谢.官网[http://www.taichi-maker.com/] 文章目录 ...
1.3 连接MQTT服务端
MQTT客户端之间要想实现通讯,必须要通过MQTT服务端.因此MQTT客户端无论是发布消息还是订阅消息,首先都要连接MQTT服务端.下面我们看一下MQTT客户端连接服务端的详细过程. MQTT客户端连 ...
android mqtt服务器搭建,Mqtt从服务端到Android客户端搭建（mqtt服务端搭建）
一.简介 MQTT(消息队列遥测传输)是ISO 标准(ISO/IEC PRF 20922)下基于发布/订阅范式的消息协议. 此处不再引入官方文字描述,以个人开发认识浅谈一下本文分为两部分: 1. M ...
小白版的springboot中集成mqtt服务（超级无敌详细），实现不了掐我头！！！
大家好,我是雄雄,欢迎关注微信公众号雄雄的小课堂现在是:2023年3月5日19:03:49 前言在上一篇文章中,我介绍了如何在服务器中安装emqx消息服务器,这是在操作mqtt协议的时候必不可少的 ...
restful服务端客户端_测试RESTful服务的客户端
restful服务端客户端开发使用RESTful Web API的应用程序可能意味着开发服务器和客户端. 为服务器端编写集成测试可以像使用Arquillian启动服务器一样容易,并且可以通过REST ...
OpenVAS漏洞扫描基础教程之连接OpenVAS服务
OpenVAS漏洞扫描基础教程之连接OpenVAS服务连接OpenVAS服务当用户将OpenVAS工具安装并配置完后,用户即可使用不同的客户端连接该服务器.然后,对目标主机实施漏洞扫描.在本教程中 ...
PHP-FPM对比Swoole：Swoole多了Reactor线程监听Socket 句柄的变化代码初始化一次不结束进程 ws tcp mqtt服务
PHP-FPM Master 主进程 / Worker 多进程模式. 启动 Master,通过 FastCGI 协议监听来自 Nginx 传输的请求. 每个 Worker 进程只对应一个连接,用于执行 ...
java连接MQTT服务器(Springboot整合MQTT)
一.业务场景硬件采集的数据传入EMQX平台(采用MQTT协议),java通过代码连接MQTT服务器,进行采集数据接收.解析.业务处理.存储入库.数据展示. MQTT 是基于发布(Publish)/ ...
客户端如何连接 DataSnap Server 调用服务的方法
一般http访问的地址是 http://localhost:8099/datasnap/rest/TServerMethods1/EchoString/abc 一.用FDConnection1连接Da ...

web客户端页面连接MQTT服务

web客户端页面连接MQTT服务相关推荐

最新文章

热门文章