260 lines
8.4 KiB
JavaScript
260 lines
8.4 KiB
JavaScript
// var stompClient = null;
|
||
// //加载完浏览器后 调用connect（），打开双通道
|
||
// $(function () {
|
||
// //打开双通道
|
||
// connectWs()
|
||
// })
|
||
// //强制关闭浏览器 调用websocket.close（）,进行正常关闭
|
||
// window.onunload = function () {
|
||
// disconnect()
|
||
// }
|
||
//
|
||
// function connectWs() {
|
||
// // var socket = new SockJS(dataUrl+"webSocket"); //连接SockJS的endpoint名称为"endpointOyzc"
|
||
// var socket = new SockJS("http://192.168.0.110:18887/rearScreen/webSocket"); //连接SockJS的endpoint名称为"endpointOyzc"
|
||
// stompClient = Stomp.over(socket);//使用STMOP子协议的WebSocket客户端
|
||
// stompClient.connect({}, function (frame) {//连接WebSocket服务端
|
||
// console.log('Connected:' + frame);
|
||
// //通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息
|
||
// stompClient.subscribe('/topic/fence', function (response) {//防区告警
|
||
// window.frames["indexName"].webscoketIndexSvg(response.body);
|
||
// });
|
||
// })
|
||
// // ,
|
||
// // function connectCallback (success) {
|
||
// // console.log('webSocket连接成功:', success)
|
||
// // },
|
||
// // // 连接失败时的回调函数
|
||
// // function errorCallBack (error) {
|
||
// // console.log('webSocket连接失败:', error)
|
||
// // })
|
||
// }
|
||
//
|
||
// //关闭双通道
|
||
// function disconnect() {
|
||
// if (stompClient != null) {
|
||
// stompClient.disconnect();
|
||
// }
|
||
// console.log("Disconnected");
|
||
// }
|
||
//
|
||
//
|
||
// // var stomp = null;
|
||
// // function connect(){
|
||
// // if (stomp == null || !stomp.connected){
|
||
// // var ws = new WebSocket('ws://92.168.0.59:8081/webSocket');
|
||
// // // 获得Stomp client对象
|
||
// // stomp = Stomp.over(ws);
|
||
// // stomp.connect('admin', 'admin', on_connect, on_error, '/');
|
||
// // console.log(">>>连接上http://127.0.0.1:8081/webSocket");
|
||
// // }
|
||
// // }
|
||
//
|
||
// // // 定义连接成功回调函数
|
||
// // var on_connect = function(x) {
|
||
// // // data.body是接收到的数据
|
||
// // stomp.subscribe("/fence/status", function(data) {
|
||
// // var msg = data.body;
|
||
// // console.log("收到数据：" + msg);
|
||
// // });
|
||
// // };
|
||
//
|
||
// // // 定义错误时回调函数
|
||
// // var on_error = function(error) {
|
||
// // connect();
|
||
// // console.log('error 重新连接' + error);
|
||
// // };
|
||
// // // 创建链接
|
||
// // connect();
|
||
//
|
||
$(function () {
|
||
mqttConnect();
|
||
});
|
||
|
||
function mqttConnect() {
|
||
const options = {
|
||
clean: true,
|
||
connectTimeout: 4000,
|
||
clientId: 'jyyweb-cs',
|
||
username: "admin",
|
||
password: 'hqjyymq@bns!'
|
||
// password: 'bonus@admin'
|
||
}
|
||
const connectUrl = 'ws://192.168.0.110:8083/mqtt'
|
||
//const connectUrl = 'ws://192.168.0.176:8083/mqtt'
|
||
const client = mqtt.connect(connectUrl, options);
|
||
|
||
//当重新连接启动触发回调
|
||
client.on('reconnect', () => {
|
||
// console.log("正在重连.....")
|
||
});
|
||
//连接断开后触发的回调
|
||
client.on("close",function () {
|
||
// console.log("客户端已断开连接.....")
|
||
});
|
||
//从broker接收到断开连接的数据包后发出。MQTT 5.0特性
|
||
client.on("disconnect",function (packet) {
|
||
// console.log("从broker接收到断开连接的数据包....."+packet);
|
||
});
|
||
//客户端脱机下线触发回调
|
||
client.on("offline",function () {
|
||
console.log("客户端脱机下线.....")
|
||
});
|
||
//当客户端无法连接或出现错误时触发回调
|
||
client.on("error",(error) =>{
|
||
// console.log("客户端出现错误....."+error)
|
||
});
|
||
//当客户端发送任何数据包时发出。这包括published()包以及MQTT用于管理订阅和连接的包
|
||
client.on("packetsend",(packet)=>{
|
||
/**
|
||
* packet包数据格式
|
||
*
|
||
* cmd: "publish"
|
||
* dup: false
|
||
* messageId: 18467
|
||
* payload: "111"
|
||
* qos: 2
|
||
* retain: false
|
||
* topic: "/tra_topic"
|
||
*/
|
||
// console.log("客户端已发出数据包....."+packet.payload);
|
||
// console.log(packet)
|
||
});
|
||
//当客户端接收到任何数据包时发出。这包括来自订阅主题的信息包以及MQTT用于管理订阅和连接的信息包
|
||
client.on("packetreceive",(packet)=>{
|
||
// console.log(packet);
|
||
});
|
||
|
||
//成功连接后触发的回调
|
||
client.on("connect",function (connack) {
|
||
// console.log("成功连接上服务器"+new Date())
|
||
/**
|
||
* 订阅某主题s
|
||
* client.subscribe(topic/topic array/topic object, [options], [callback])
|
||
* topic:一个string类型的topic或者一个topic数组,也可以是一个对象
|
||
* options
|
||
* ["iotSecurity9","fireAlarm"]
|
||
*/
|
||
client.subscribe(["Security11", "lineFireAlarm111","storeConsumption3","temperatureSetting"], {qos: 2});
|
||
|
||
});
|
||
|
||
//当客户端接收到发布消息时触发回调
|
||
/**
|
||
* topic:收到的数据包的topic
|
||
* message:收到的数据包的负载playload
|
||
* packet:收到的数据包
|
||
*/
|
||
|
||
const idMap = new Map([
|
||
|
||
|
||
|
||
|
||
[0, 'auto'],
|
||
[1, 'l'],
|
||
[2, 'r'],
|
||
])
|
||
|
||
client.on('message', (topic, message,packet) => {
|
||
console.log("客户端收到订阅消息,topic="+topic+";消息数据:"+message+";数据包:"+packet)
|
||
console.log("客户端收到订阅消息,message=" + message.toString())
|
||
if ("Security11" === topic) {
|
||
//处理
|
||
window.frames["indexName"].webscoketIndexSvg(message.toString());
|
||
//放入缓存
|
||
}
|
||
var arr = message.toString().split(",");//uuid-deviceId,uuid-deviceId-deviceId
|
||
console.log(arr)
|
||
if ("lineFireAlarm111" === topic) {
|
||
//处理
|
||
var length = 0;
|
||
if (arr.length > 4) {
|
||
length = 3;
|
||
} else {
|
||
length = arr.length;
|
||
}
|
||
for (var i = 0; i < length; i++) {
|
||
var w = idMap.get(i);
|
||
// localStorage.setItem("puid" + (i+1), arr[i]);
|
||
var index = layer.open({
|
||
title: ['火灾现场视频', 'color: #fff'],
|
||
type: 2,
|
||
closeBtn: 2,
|
||
offset: w,
|
||
content: "./fireVideo.html" + '?uuid=' + arr[i],
|
||
area: ["1169px", "684px"],
|
||
maxmin: false
|
||
});
|
||
console.log(index)
|
||
}
|
||
}
|
||
if ("storeConsumption3" === topic) {
|
||
console.log("收到xx"+message)
|
||
console.log(packet)
|
||
|
||
var arr = message.toString().split(",");
|
||
let countOnline = 0;
|
||
let countOffline = 0;
|
||
for (var i = 8; i < arr.length -2; i++) {
|
||
if (arr[i].substring(arr[i].indexOf(":")+1)==="1"){
|
||
countOnline++;
|
||
}else if (arr[i].substring(arr[i].indexOf(":")+1)==="0"){
|
||
countOffline++;
|
||
}
|
||
}
|
||
console.log(countOffline)
|
||
console.log(countOnline)
|
||
|
||
console.log(JSON.parse(message.toString()).LJYL)
|
||
localStorage.setstoreLJYL = JSON.parse(message.toString()).LJYL
|
||
localStorage.setItem("countOnline", countOnline)
|
||
localStorage.setItem("countOffline", countOffline)
|
||
}
|
||
if("temperatureSetting" === topic){
|
||
// dataWatcher.receiveData({ topic, message });
|
||
handleData(message);
|
||
}
|
||
});
|
||
//页面离开自动断开连接
|
||
$(window).bind("beforeunload",()=>{
|
||
client.disconnect();
|
||
})
|
||
|
||
|
||
function createDataWatcher(onDataStart, onDataEnd, idleTimeout = 3000) {
|
||
let timer = null;
|
||
let isReceiving = false;
|
||
let lastData = null;
|
||
|
||
return function(data) {
|
||
if (!isReceiving) {
|
||
isReceiving = true;
|
||
onDataStart(data);
|
||
}
|
||
|
||
clearTimeout(timer);
|
||
lastData = data;
|
||
|
||
timer = setTimeout(() => {
|
||
isReceiving = false;
|
||
onDataEnd(lastData);
|
||
}, idleTimeout);
|
||
};
|
||
}
|
||
|
||
const handleData = createDataWatcher(
|
||
firstData => console.log('开始:', firstData),
|
||
lastData =>alert(lastData)
|
||
);
|
||
|
||
function promptMessage(prompt){
|
||
layer.alert('<span style="color: #fff!important">${prompt}</span>', {
|
||
title: '提示',
|
||
icon: 1,
|
||
title:false
|
||
});
|
||
}
|
||
|
||
}
|