实现网页版MQTT
【摘要】
一、目录结构
1、目录结构
二、代码
css/index.css
*{
padding: 0;
margin: 0;
}
.left{
float: left;
}
....
一、目录结构
1、目录结构
二、代码
css/index.css
*{
padding: 0;
margin: 0;
}
.left{
float: left;
}
.right{
float: right;
}
textarea{
resize: none;
}
#box{
overflow: hidden;
width: 775px;
height: 720px;
/* border: 1px solid black; */
margin: 0 auto;
padding: 30px 0 0 20px;
box-sizing: border-box;
background: #eee;
}
/* 连接配置开始 */
.disposition{
padding: 10px;
width: 430px;
height: 470px;
border: 1px solid #ccc;
box-sizing: border-box;
position: relative;
border-right: none;
}
.disposition li{
width: 430px;
list-style: none;
line-height: 60px;
font-size: 20px;
position: relative;
}
.disposition li input{
width: 260px;
height: 30px;
position: absolute;
right: 40px;
top: 13px;
}
.disposition li:nth-of-type(2) input{
width: 30px;
height: 30px;
position: absolute;
right: 275px;
top: 13px;
}
.disposition .special{
position: absolute;
bottom: -7px;
left: 10px;
}
.disposition .special .connect{
color: red;
}
.disposition button{
width: 80px;
height: 40px;
position: absolute;
right: 40px;
}
/* 连接配置结束 */
/* 发送数据开始 */
.sendData{
position: relative;
padding: 10px 10px 10px 30px;
width: 304px;
height: 470px;
border: 1px solid #ccc;
box-sizing: border-box;
/* height: 440px; */
/* background: skyblue; */
}
.sendData .top textarea{
margin-top: 13px;
}
.sendData .top button{
width: 80px;
height: 40px;
margin: 10px 11px;
}
.sendData .top button:nth-child(4){
position: absolute;
right: 10px;
}
.sendData .bottom button{
width: 80px;
height: 40px;
position: absolute;
right: 20px;
bottom: 12px;
}
/* 发送数据结束 */
/* 接收数据开始 */
.receiveData{
position: relative;
border: 1px solid #ccc;
width: 734px;
padding: 10px;
box-sizing: border-box;
border-top: none;
/* height: 170px; */
/* background: red; */
/* margin-top: 10px; */
}
.receiveData button{
position: absolute;
width: 40px;
height: 80px;
margin-top: 40px;
right: 20px;
}
.receiveData textarea{
margin-top: 10px;
overflow: auto;
}
/* 接收数据结束 */
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/index.css">
<script src="js/paho-mqtt.js"></script>
<title>mqtt助手</title>
</head>
<body>
<div id="box">
<!-- 连接配置开始 -->
<div class="disposition left"">
<ul>
<h3>连接配置</h3>
<li>IP地址:<input class="address" type="text" value="ws://mnif.cn:8083/mqtt"></li>
<!-- <li>端口号:<input class="port" type="text" value="8083"></li> -->
<li>useSSL:<input class="ssl" type="checkBox"></li>
<li>ClientID:<input class="clientId" type="text"></li>
<li>用户名:<input class="username" type="text" value="yang"></li>
<li>密码:<input class="psd" type="text" value="11223344"></li>
<li>发布的主题:<input class="issueTopic" value="yang" type="text"></li>
<li class="special">
<span>连接状态:</span>
<span class="connect">连接断开</span>
<button class="connectBtn right">连接</button>
</li>
</ul>
</div>
<!-- 连接配置结束 -->
<!-- 数据发送开始 -->
<div class="sendData left">
<h3>数据发送</h3>
<div class="top">
<textarea class="sendDataArea" name="" id="" cols="33" rows="10"></textarea>
<input class="checkBox" type="checkbox">hex
<button class="sendBtn">发送数据</button>
<button class="clearSendData">清除</button>
</div>
<div class="bottom">
<textarea class="bottomArea" name="" id="" cols="33" rows="10"></textarea>
<button class="subscription">订阅</button>
</div>
</div>
<!-- 数据发送结束 -->
<!-- 数据接收开始 -->
<div class="receiveData left">
<h3>数据接收</h3>
<textarea class="receiveArea" class="left" name="" id="" cols="85" rows="10"></textarea>
<button class="right receiveClear">清除</button>
</div>
<!-- 数据接收结束 -->
</div>
<script>
let address = document.getElementsByClassName('address')[0];//
let ssl = document.getElementsByClassName('ssl')[0];
let clientId = document.getElementsByClassName('clientId')[0];
let connectBtn = document.getElementsByClassName('connectBtn')[0];
let username = document.getElementsByClassName('username')[0];
let password = document.getElementsByClassName('psd')[0];
let connect = document.getElementsByClassName('connect')[0];
let receiveArea = document.getElementsByClassName('receiveArea')[0];
let receiveClear = document.getElementsByClassName('receiveClear')[0];
let bottomArea = document.getElementsByClassName('bottomArea')[0];
let subscription = document.getElementsByClassName('subscription')[0];
let sendBtn = document.getElementsByClassName('sendBtn')[0];
let sendDataArea = document.getElementsByClassName('sendDataArea')[0];
let issueTopic = document.getElementsByClassName('issueTopic')[0];
let clearSendData = document.getElementsByClassName('clearSendData')[0];
let checkBox = document.getElementsByClassName('checkBox')[0];
let client;
let topic;
let options = {//MQTT配置
timeout:5,//链接超时时间5S
cleanSession: true,
useSSL: false,
userName: "yang",
password: "11223344",
onSuccess: onSuccess,
onFailure: onFailure,
keepAliveInterval: 30,
};
// 监听连接按钮点击
connectBtn.onclick = function(){
// 监听ssl的状态变化
if(ssl.checked == true){
options.useSSL = true;
// console.log(1);
}else{
options.useSSL = false;
// console.log(2);
}
let oAddress = address.value;
// let oAport = port.value;
let oClientId = clientId.value;
if(connectBtn.textContent == '连接'){
if(oClientId.length == 0){
oClientId = (+new Date())+ '' + parseInt(Math.random() * 10000000000000000) ; //时间戳加16位随机数
}
client = new Paho.MQTT.Client(oAddress, oClientId);
options.userName = username.value || 'yang';
options.password = password.value || '11223344';
client.onConnectionLost = onFailure;//连接丢失回调
client.onMessageArrived = onMessageArrived;//设置接收数据回调
client.connect(options);//成功连接执行onConnect函数
}else{
client.disconnect();
connectBtn.textContent = '连接'
connect.textContent = '连接断开';
}
}
// 监听发送数据按钮
sendBtn.onclick = function(){
if(connectBtn.textContent == '断开'){
if(issueTopic.value.length > 0 && sendDataArea.value.length > 0){
let message;
if(checkBox.checked == true){
message = new Paho.MQTT.Message(StringToHex(sendDataArea.value));
}else{
message = new Paho.MQTT.Message(sendDataArea.value);
}
message.destinationName = issueTopic.value;
message.qos = 0;
message.retained = false;
client.send(message);
}
}
receiveArea.scrollTop = receiveArea.scrollHeight;
}
// 监听发送数据的清除
clearSendData.onclick = function(){
sendDataArea.value = '';
}
// 监听订阅按钮的点击
subscription.onclick = function(){
if(connectBtn.textContent == '断开'){
topic = bottomArea.value;
if(topic.length == 0){
receiveArea.append("\r\n"+'订阅主题不能为空'+"\r\n");
}else{
client.subscribe(topic, { qos: 0, invocationContext: { arg: topic }, onSuccess: SuccessFun, onFailure: FailureFun});
}
}else{
receiveArea.append("\r\n"+'请先连接'+"\r\n");
}
receiveArea.scrollTop = receiveArea.scrollHeight;
}
// 监听数据接收清除按钮的点击
receiveClear.onclick = function(){
receiveArea.innerHTML = '';
}
// 定义一个订阅成功调用的函数
function SuccessFun(error){
receiveArea.append("\r\n"+'订阅成功:'+topic+"\r\n");
receiveArea.scrollTop = receiveArea.scrollHeight;
}
// 定义一个订阅失败的方法
function FailureFun(error){
receiveArea.append("\r\n"+'订阅失败'+'topic'+"\r\n");
receiveArea.scrollTop = receiveArea.scrollHeight;
}
// 定义一个接收到数据的方法
function onMessageArrived(message) {//接收到消息
//console.log("onMessageArrived:"+message.payloadString);
receiveArea.append("\r\n"+ formartDate(new Date()));
receiveArea.append("\r\n"+'主题:'+message.destinationName);
try {//字符串显示
receiveArea.append("\r\n"+'字符串消息:');
receiveArea.append(message.payloadString);
receiveArea.append("\r\n");
} catch (e) {
receiveArea.append("\r\n");
}
try {//16进制显示
receiveArea.append('16进制消息:');
receiveArea.append(hex2str(message.payloadBytes) +"\r\n");
receiveArea.append("\r\n");
//console.log(message.payloadBytes);
} catch (e) {
receiveArea.append("\r\n");
}
receiveArea.scrollTop = receiveArea.scrollHeight;
}
// 定义一个成功连接的方法
function onSuccess() {
connectBtn.textContent = '断开'
connect.textContent = '连接成功';
console.log("onConnect");
}
// 定义一个连接失败的方法
function onFailure(error) {
// Once a connection has been made, make a subscription and send a message.
// console.log("onFailure");
receiveArea.append("\r\n"+error.errorMessage+"\r\n");
connectBtn.textContent = '连接'
connect.textContent = '连接失败';
}
// 16进制字符串显示形式,转换为16进制数
function StringToHex(hex) {
var a = new Uint8Array(hex.match(/[\da-f]{2}/gi).map(function (h) {
return parseInt(h, 16)
}))
return a;
}
// 定义一个时间格式化的方法
function formartDate(date){
return `${date.getFullYear()}-${date.getMonth() + 1}-${ date.getDate()} ${date.getHours()}:${date.getMinutes()}:${ date.getSeconds()}`
}
// 16进制数,转为字符串显示
function hex2str(hex) {
let str = '';
let i;
for(i = 0; i < hex.length;i++) {
if(hex[i] <= 15){
str = str + "0"+(hex[i].toString(16)+" ")
}else{
str = str + (hex[i].toString(16)+" ")
}
}
return str;
}
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
三、运行
在服务器上打开宝塔面板，并上传工程目录。
而后在：http://IP/MqttDebugWeb/打开网页mqtt助手
如果自己的MQTT服务器的IP地址是 47.92.31.46 WebSocket端口是 8083
则IP地址 ws://47.92.31.46:8083/mqtt
如果自己的MQTT服务器的IP地址是 47.92.31.46 WebSocket+SSL端口是 8084
则IP地址 wss://47.92.31.46:8084/mqtt
提示:ClientID 默认是时间戳加16位随机数,如果自己填写,将使用自己填写的
文章来源: recclay.blog.csdn.net，作者：ReCclay，版权归原作者所有，如需转载，请联系作者。
原文链接：recclay.blog.csdn.net/article/details/104267341
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）