作者：wcx7758258 | 更新時(shí)間：2017-11-30 | 瀏覽量：2125
直接上源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WebSocket</title>
<!--
WebSocket實(shí)現(xiàn)溫濕度的模擬上傳
version：1.0
author:wcx0407@gamil.com
-->
</head>
<body>
<div id="getMsg">
<p id="printMsg">心跳次數(shù)：0</p>
<p id="printMsg1">非心跳返回值：0</p>
返回內(nèi)容：<p id="printMsg2">null</p>
</div>
<form>
<input type="text" id="text1">
<input type="button" id="send1" value="發(fā)送溫度" onclick="sendTem()"><br><br>
<input type="text" id="text2">
<input type="button" id="send1" value="發(fā)送濕度" onclick="sendHum()"><br><br>
<input type="button" id="send2" value="查看是否在線" onclick="isOL()">
<input type="button" id="log" value="登陸溫濕度傳感器" onclick="logo()">
<input type="button" id="close" value="關(guān)閉連接" onclick="socket.close()">
</form>
<script>
var socket=new WebSocket("ws://m.placeboworld.cn:8383");
var temAndHumLogo="{\"M\":\"checkin\",\"ID\":\"xx1\",\"K\":\"xx2\"}\n"; //xx1為：設(shè)備ID ,xx2為：該設(shè)備的apikey
var tem1="{\"M\":\"update\",\"ID\":\"xx1\",\"V\":{\"xx3\":\""; //xx3為：該設(shè)備的溫度數(shù)據(jù)接口id
var hum1="{\"M\":\"update\",\"ID\":\"xx1\",\"V\":{\"xx4\":\""; //xx4為：該設(shè)備的濕度接口id
var temAndHum="\"}}\n";
var isol="{\"M\":\"isOL\",\"ID\":[\"xx5\"]}\n"; //xx5為：要查詢的設(shè)備id
var tem=0;
var hum=0;
//監(jiān)聽WebSocket打開時(shí)的操作
socket.onopen=function(){
alert("WebSocket已打開！");
}
//監(jiān)聽WebSocket關(guān)閉時(shí)的操作
socket.onclose=function(){
alert("WebSocket已關(guān)閉！");
}
//登陸溫濕度傳感器設(shè)備
function logo(){
socket.send(temAndHumLogo);
}
//查詢當(dāng)前設(shè)備是否在線
function isOL(){
socket.send(isol);
}
//發(fā)送溫度數(shù)據(jù)
function sendTem(){
tem=document.getElementById("text1").value;
socket.send(tem1+tem+temAndHum);
}
//發(fā)送濕度數(shù)據(jù)
function sendHum(){
hum=document.getElementById("text2").value;
socket.send(hum1+hum+temAndHum);
}
//監(jiān)聽服務(wù)器傳回信息時(shí)的操作，心跳保持在線，輸出返回信息
socket.onmessage=function(msg){
document.getElementById("printMsg2").innerHTML=msg.data;
if(msg.data=="{\"M\":\"ping\"}"){
document.getElementById("printMsg").innerHTML="心跳次數(shù)："+(i++);
socket.send("ping");
}else{
document.getElementById("printMsg1").innerHTML="非心跳返回值："+(j++);
socket.send("ping");
}
}
</script>
</body>
</html>