jyyhq/witDisplay/js/webSocket/webSocket.js

// 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
        });
    }

}