You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
237 lines
8.4 KiB
237 lines
8.4 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title></title>
|
|
|
|
<!--
|
|
可以选择访问网络的js或者局域网的js
|
|
吧html拖到猎豹浏览器,不能用本软件过去
|
|
如果mqtt建立成功,则订阅主题和发送主题都是/World
|
|
-->
|
|
<!-- <script src=“https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js” type=“text/javascript”> </script> -->
|
|
<script src="js/mqttws31.js" type="text/javascript"></script>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/base.css" />
|
|
<script type="text/javascript" src="js/mui.min.js" charset="utf-8"></script>
|
|
<script type="text/javascript" src="js/vue.min.js"></script>
|
|
<script type="text/javascript" src="js/app.js"></script>
|
|
<script type="text/javascript" src="js/reconnecting-websocket.min.js"></script>
|
|
<script type="text/javascript" src="js/update.js"></script>
|
|
<title>SmartTalk</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script>
|
|
var temp1 ,serverip,flagmqttok=0;
|
|
var myid="20191028";
|
|
var flag0=0,jpegcnt=0;
|
|
|
|
function websockstart()
|
|
{
|
|
//要连接b230这个
|
|
|
|
var hostname = serverip,
|
|
port = 8083,
|
|
clientId = myid+"aa",
|
|
timeout = 5,
|
|
keepAlive = 100,
|
|
cleanSession = false,
|
|
ssl = false,
|
|
temp1='12',
|
|
|
|
topic = '';
|
|
|
|
client = new Paho.MQTT.Client(hostname, port,clientId);
|
|
|
|
//建立客户端实例
|
|
var options = {
|
|
invocationContext: {
|
|
host: hostname,
|
|
port: port,
|
|
path: client.path,
|
|
clientId: clientId
|
|
},
|
|
timeout: timeout,
|
|
keepAliveInterval: keepAlive,
|
|
cleanSession: cleanSession,
|
|
useSSL: ssl,
|
|
// userName: userName,
|
|
// password: password1,
|
|
onSuccess: onConnect,
|
|
onFailure: function (e) {
|
|
|
|
// s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onFailure()}";
|
|
websockstart()
|
|
}
|
|
};
|
|
client.connect(options);
|
|
//连接服务器并注册连接成功处理事件
|
|
function onConnect() {
|
|
|
|
alert( new Date().Format("yyyy-MM-dd hh:mm:ss")+" 连接服务器成功");
|
|
flagmqttok=1
|
|
client.subscribe(myid)
|
|
}
|
|
|
|
client.onConnectionLost = onConnectionLost;
|
|
|
|
//注册连接断开处理事件
|
|
client.onMessageArrived = onMessageArrived;
|
|
|
|
//注册消息接收处理事件
|
|
function onConnectionLost(responseObject) {
|
|
|
|
s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onConnectionLost()}";
|
|
console.log(s);
|
|
if (responseObject.errorCode !== 0) {
|
|
// console.log("onConnectionLost:" + responseObject.errorMessage);
|
|
console.log("连接已断开");
|
|
flagmqttok=0
|
|
websockstart()
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
function onMessageArrived(message) {
|
|
console.log("主题："+message.destinationName);
|
|
console.log("收到消息:"+message.payloadString);
|
|
|
|
document.getElementById("id1").value=message.payloadString.slice(0,2)
|
|
document.getElementById("id2").value=message.payloadString.slice(2,4)
|
|
|
|
document.getElementById("id3").value=message.payloadString.slice(4,6)
|
|
document.getElementById("id4").value=message.payloadString.slice(6,8)+":"+message.payloadString.slice(8,10)
|
|
document.getElementById("ab11").src = "data:image/png;base64,"+message.payloadString.slice(10,99999)
|
|
|
|
document.getElementById("jishu").innerHTML="张数:"+Number(jpegcnt)
|
|
jpegcnt++;
|
|
|
|
|
|
|
|
}
|
|
function aa() //显示消息
|
|
{
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
function send(vala) {
|
|
if (vala) {
|
|
message = new Paho.MQTT.Message(vala);
|
|
message.destinationName = myid+"/ctrl";
|
|
client.send(message);
|
|
|
|
}
|
|
}
|
|
|
|
function k1() {
|
|
send("{k1:"+document.getElementById("val1").value+"\"}")
|
|
}
|
|
function k2() {
|
|
send("{k2:"+document.getElementById("val2").value+"\"}")
|
|
}
|
|
function k3() {
|
|
send("{k3:"+document.getElementById("val3").value+"\"}")
|
|
}
|
|
function k4() {
|
|
send("{k4:"+document.getElementById("val4").value+"\"}")
|
|
}
|
|
|
|
function k5() {
|
|
send("{\"k5\":\""+"\"}")
|
|
}
|
|
var count = 0;
|
|
|
|
function start() {
|
|
window.tester = window.setInterval(function () {
|
|
if (client.isConnected) {
|
|
var s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", content:" + (count++) +
|
|
", from: web console}";
|
|
message = new Paho.MQTT.Message(s);
|
|
message.destinationName = topic;
|
|
client.send(message);
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
function stop() {
|
|
window.clearInterval(window.tester);
|
|
}
|
|
function blink()
|
|
{
|
|
if(flagmqttok==0)
|
|
{
|
|
serverip=document.getElementById("id").value
|
|
myid=document.getElementById("sn").value
|
|
websockstart()
|
|
|
|
}
|
|
else
|
|
{
|
|
|
|
alert("服务器已经连接")
|
|
}
|
|
}
|
|
|
|
function restart() {
|
|
window.location.reload()
|
|
}
|
|
|
|
Date.prototype.Format = function (fmt) { //author: meizz
|
|
var o = {
|
|
"M+": this.getMonth() + 1, //月份
|
|
"d+": this.getDate(), //日
|
|
"h+": this.getHours(), //小时
|
|
"m+": this.getMinutes(), //分
|
|
"s+": this.getSeconds(), //秒
|
|
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
|
|
"S": this.getMilliseconds() //毫秒
|
|
};//reain
|
|
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
|
for (var k in o)
|
|
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[
|
|
k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
|
return fmt;
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
服务器<input type="text" id="id" value="120.79.220.39" />
|
|
设备<input type="text" id="sn" value="EE64C9DC74BA" />
|
|
<input type="button" value="连接" onclick="blink()" />
|
|
<input type="button" value="断开" onclick="restart()" /><br><br>
|
|
<img id="ab11" style="position:absolute; left: 30px; top:1000px;width: 320px;height: 240px;">
|
|
<h3 id="jishu" style="position:absolute; left: 30px; top:1240px;">张数:0</h3>
|
|
<fieldset>
|
|
<legend>实时值</legend>
|
|
温度<input type="text" id="id1" style="width:80px;" />
|
|
湿度<input type="text" id="id2" style="width:80px;"/><br>
|
|
压力<input type="text" id="id3"/ style="width:80px;">
|
|
当前时间<input type="text" id="id4" style="width:80px;"/><br>
|
|
</fieldset>
|
|
|
|
|
|
<fieldset>
|
|
<legend>控制</legend>
|
|
|
|
温度极限：<input type="text" id="val1" /> <input type="button" value="保存" onclick="k1()" /><br><br>
|
|
湿度极限：<input type="text" id="val2" /><input type="button" value="保存" onclick="k2()" /><br><br>
|
|
|
|
投食定时：<input type="text" id="val3" /><input type="button" value="保存" onclick="k3()" /><br><br>
|
|
时间：<input type="text" id="val4" value="10:01" /><input type="button" value="保存" onclick="k4()" /><br><br>
|
|
<input type="button" value="手动喂食" onclick="k5()" /><br><br>
|
|
</fieldset>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |