// 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('${prompt}', { title: '提示', icon: 1, title:false }); } }