系统：windows10 64bit
开发工具：UEdit64
运行环境：360安全浏览器 12.1
测试工具：MQTTBox
一、编写简单布局
布局效果：
布局代码：
<body style="margin: 0 auto;">
<div style="width: 500px;">服务器地址：<input style="float: right;width: 300px;" id="MQTT_ServerAdd" value="ws://www.passingworld.vip:8083/mqtt"></div>
<div style="width: 500px;">心跳时间 ：<input style="float: right;width: 300px;" id="MQTT_ConnHeartbeatTime" value="30"></div>
<div style="width: 500px;">用户名 ：<input style="float: right;width: 300px;" id="MQTT_UserName" value="admin"></div>
<div style="width: 500px;">密码 ：<input style="float: right;width: 300px;" id="MQTT_PassWord" value="public"></div>
<div>
<button onclick="MQTT_ConnServer()">连接服务器</button>
</div>
<div style="margin-top: 20px;">
订阅消息<input id="MQTT_Subscribe_Msg">
QoS<select id="MQTT_Subscribe_QoS">
<option>0_Almost_Once</option>
<option>1_Atleast_Once</option>
<option>2_Exactly_Once</option>
</select>
<button onclick="Add_MQTT_Subscribe()">添加订阅信息</button>
</div>
<div style="margin-top: 20px;">
订阅列表
</div>
<div>
<table style="padding: 1px;width: 700px;margin-top: 5px;" border="1">
<tr style="background-color: #919191;">
<td>订阅消息</td>
<td>QoS</td>
<td>操作</td>
</tr>
</table>
</div>
<div style="margin-top: 20px;">
接收消息
</div>
<div>
<textarea id="textareaid" rows="5" cols="30" class="message1" style="width: 100%;height: 300px; min-height: 100px;"></textarea>
</div>
<div>
发布点：<input id="MQTT_Publish_Text">
发布消息：<input id="MQTT_Publish_Msg">
<button onclick="Send_MQTT_Msg()">发送消息</button>
</div>
</body>
二、编写JS代码
连接代码
function MQTT_Connect(serveradd,KeepAlive,UserName,PassWord) {
//MQTT连接的配置
MQTT_Options: {
protocolVersion: 4; //MQTT连接协议版本
clientId: 'miniTest22222';
clean: false;
keepalive: KeepAlive;
password: UserName;
username: PassWord;
reconnectPeriod: 1000; //1000毫秒，两次重新连接之间的间隔
connectTimeout: 10 * 1000; //1000毫秒，两次重新连接之间的间隔
resubscribe: true; //如果连接断开并重新连接，则会再次自动订阅已订阅的主题（默认true）
};
//开始连接
MQTT_Client = mqtt.connect(serveradd, this.MQTT_Options);
MQTT_Client.on('connect',
function (connack) {
console.log('MQTT连接成功')
})
//服务器下发消息的回调
MQTT_Client.on("message", function (topic, payload) {
console.log(" 收到 topic:" + topic + " , payload :" + payload)
var str = document.getElementById("textareaid").value;
document.getElementById("textareaid").value = str + "\n"+"收到 topic:" + topic + " , payload :" + payload;
})
//服务器连接异常的回调
MQTT_Client.on("error", function (error) { console.log("MQTT Server Error 的回调" + error) })
//服务器重连连接异常的回调
MQTT_Client.on("reconnect", function () { console.log("MQTT Server Reconnect的回调") })
//服务器连接异常的回调
MQTT_Client.on("offline", function (errr) { console.log("MQTT Server Offline的回调" + errr) })
};
订阅一个主题代码
MQTT_SubOne = function(Topic) {
var ok = false;
if (MQTT_Client && MQTT_Client.connected) {
MQTT_Client.subscribe(Topic, function (err, granted) {
if (!err) {
console.log('订阅主题 ' + Topic + ' 成功')
ok = true;
}else { console.log('订阅主题 ' + Topic + ' 失败')
ok = false;
}
})
} else {
console.log('请先连接服务器')
ok = false;
}
return ok;
};订阅多个主题代码
function MQTT_SubMany() {
if (MQTT_Client && MQTT_Client.connected) {
MQTT_Client.subscribe({ 'Topic1': { qos: 0 }, 'Topic2': { qos: 1 } }, function (err, granted) {
if (!err) {
console.log('订阅多主题成功')
} else {
console.log('订阅多主题失败')
}
})
} else {
console.log('请先连接服务器')
}
};发布消息代码
MQTT_PubMsg = function(Topic, Msg) {
if (MQTT_Client && MQTT_Client.connected) {
MQTT_Client.publish(Topic, Msg);
console.log('发布成功->' + Topic + '->' + Msg)
} else {
console.log('请先连接服务器')
}
};取消订阅一个主题代码
function MQTT_UnSubOne(Topic) {
if (MQTT_Client && MQTT_Client.connected) {
MQTT_Client.unsubscribe(Topic);
} else {
console.log('请先连接服务器')
}
};取消订阅多个主题代码
function MQTT_UnSubOne(Topic) {
if (MQTT_Client && MQTT_Client.connected) {
MQTT_Client.unsubscribe(Topic);
} else {
console.log('请先连接服务器')
}
};三、实验效果
到此这篇关于JS HTML Web端使用MQTT通讯测试的文章就介绍到这了,更多相关Web端使用MQTT通讯测试内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
