实现网页版MQTT

一、目录结构

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;
}
/* 接收数据结束 */

index.html

    
    
    
    
     
    


    

        
        

            

                
连接配置
                
IP地址:
                
                
useSSL:
                
ClientID:
                
用户名:
                
密码:
                
发布的主题:
                

                    连接状态:
                    连接断开
                    连接
                
            
        
        
        
        

            
数据发送
            

                
                hex
                发送数据
                清除
            
            

                
                订阅
            
        
        
        
        

            
数据接收
            
            清除
        
        
    

    

三、运行

在服务器上打开宝塔面板，并上传工程目录。

而后在：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位随机数,如果自己填写,将使用自己填写的