mqtt实现数据的上传下载信息的发布
2017-06-21 本文已影响0人
guoss
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MQTT Debug With EMQ</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="./jquery-3.2.0.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="./browserMqtt.js"></script>
<style>
.myform{
margin-top: 15px;
}
#mqtt-log-containor {
height:80%;
width: 100%;
margin-top: 15px;
/*background: #000;*/
/*color:green;*/
}
#mqtt-log{
width: 100%;
height: 600px;
overflow: auto;
}
#clear{
color: white;
}
</style>
<script>
var client;
$(document).ready(function () {//事件初始化
$("#disconnectBtn").hide();
$("#subscribe").hide();
$("#connectBtn").show();
$("#clear").on('click',function () {//clear console内容
$("#mqtt-log").empty()
log("Clear :)")
})
$('#unsubscribeBtn').on('click', function () {//退订主题
var topic = $("#mqtt-topic").val();
if(topic<1){
log('topic 不能为null')
return
}
client.unsubscribe(topic);
log('>>>退订topic = '+topic)
})
$('#subscribeBtn').on('click', function () {//订阅主题
var topic = $("#mqtt-topic").val();
if(topic<1){
log('topic 不能为null')
return
}
client.subscribe(topic);
log('>>>订阅topic = '+topic)
})
$('#disconnectBtn').on('click', function () {//断开连接
log('end.')
client.end();
$("#connectBtn").show();
$(this).hide();
$("#subscribe").hide();
})
$('#publishBtn').on('click', function () {//主题发布
var msg = $("#mqtt-msg").val();
var topic = $("#mqtt-topic-snd").val();
if(msg<1){
log('message 不能为null')
return
}
if(topic<1){
log('topic 不能为null')
return
}
log('>>>发布message = '+msg)
client.publish(topic, msg);
//client.end();
//$("#connectBtn").show();
//$(this).hide();
//$("#subscribe").hide();
})
$("#file-document").on('click',function(){//完成读取文件的操作。
$("#files").click();
var topic = $("#mqtt-topic-snd").val();
var selectedFile = document.getElementById("mqtt-file").files[0];//获取读取的File对象
var name = selectedFile.name;//读取选中文件的文件名
var size =Math.ceil(selectedFile.size/1024);//读取选中文件的大小
//console.log("文件名:"+name+"大小："+size);
var reader = new FileReader();//读取操作就是由它完成的
reader.readAsText(selectedFile);//读取文件的内容
reader.onload = function(){
console.log(this.result);
client.publish(topic,this.result);
};
if(name.length<1){
log('file不能为null')
return
}
log(">>>发布file: = "+name+" 大小:"+size+"kb")
});
$('#connectBtn').on('click', function () {//与服务器建立连接的过程
var host = $("#mqtt-host").val();
var port = $("#mqtt-port").val();
if(host.length<1||port<1){
log('host和port不能为空...')
return;
}
log('开始连接...')
$(this).hide();
$("#disconnectBtn").show();
$("#subscribe").show();
client = mqtt.connect('ws://' + host + ':' + port+ '/mqtt');//建立连接
client.on('connect', function () {
log('connect :)')
//client.subscribe('mytopic');
//client.publish('mytopic', 'hello mqtt123');
$(this).hide();
$("#disconnectBtn").show();
$("#subscribe").show();
});
client.on("error", function (error) {
log(error.toString());
$(this).show();
$("#disconnectBtn").hide();
$("#subscribe").hide();
});
client.on("message", function (topic, data) {
log('收到topic = ' + topic + ' 消息: ' + data.toString());
console.log('!!!!!'+data);
/* var filestr = new String();
for(var i=0;i<data.length;i++){
filestr = filestr + String.fromCharCode(data[i]);
}
console.log('收到topic = ' + topic + ' 消息: ' + filestr);
console.log('!!!!!'+data.length);*/
//alert([topic, payload].join(": "));
//client.end();
});
//client.publish("mytopic", "hello world!");
})
});
function log(data) {
$('#mqtt-log').prepend('<p>'+data+'</p>');
}
</script>
</head>
<body>
<div class="container" style="padding: 20px">
<div class="well well-lg">ThingMote By Movebroad</div>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="mqtt-host">MQTT Host</label>
<input type="text" class="form-control" id="mqtt-host" placeholder="MQTT Host" value="106.14.142.169">
</div>
<div class="form-group">
<label class="sr-only" for="mqtt-port">MQTT Port</label>
<input type="text" class="form-control" id="mqtt-port" placeholder="MQTT Port" value="8083">
</div>
<button type="button" class="btn btn-primary" id="connectBtn">连接</button>
<button type="button" class="btn btn-danger" id="disconnectBtn">断开</button>
</form>
<div class="myform" id="subscribe">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="mqtt-host">MQTT Host</label>
<input type="text" class="form-control" id="mqtt-topic" placeholder="Thing Topic To Receive">
</div>
<button type="button" class="btn btn-success" id="subscribeBtn">订阅接收主题</button>
<button type="button" class="btn btn-warning" id="unsubscribeBtn">退订</button>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="mqtt-host">MQTT Host</label>
<input type="text" class="form-control" id="mqtt-topic-snd" placeholder="Thing Topic To Send">
</div>发布的主题
<!--<button type="button" class="btn btn-info" id="publishBtn">发布</button>-->
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="mqtt-host">MQTT Host</label>
<input type="text" class="form-control" id="mqtt-msg" placeholder="Thing Message">
</div>
<button type="button" class="btn btn-info" id="publishBtn">发布</button>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only " for="mqtt-file">MQTT Host</label>
<input type="file" id="mqtt-file" class="form-control" style="width:66%;" />
</div>
<button type="button" class="btn btn-info" style="margin-left:-102px;" id="file-document">上传</button>
</form>
</div>
<div class="panel panel-success" id="mqtt-log-containor">
<div class="panel-heading">
<span class="label label-info">日志</span>
<!--<h3 class="panel-title" style="display:inline">日志</h3>-->
<!--<a id="clear">Clear</a>-->
<span class="label label-danger"><a id="clear">Clear</a></span>
</div>
<div class="panel-body" id="mqtt-log"></div>
</div>
</div>
