websocket的使用

websocket的入门教程推荐阮一峰的 http://www.ruanyifeng.com/blog/2017/05/websocket.html

 

我的实际使用

 

// webSocket连接未创建或者不是连接成功的状态，重新连接
var webSocketUrl = "ws://localhost:8085/device/GasDetection"

var ws = null;
if ('WebSocket' in window) {
    ws = new WebSocket(webSocketUrl);
}
else if ('MozWebSocket' in window) {
    ws = new MozWebSocket(webSocketUrl);
}
else {
    ws = new SockJS(socketJsUrl);
}

ws.onopen = function (evt) {
     console.log("websocket连接成功");
}

ws.onmessage = function(evt) {
    console.log( "websocket消息: " , JSON.parse(evt.data));
    var data = JSON.parse(evt.data)
    if(data.type === "STATUS"){
        var subData = data.data;
        var subString = ''
        $.each(subData,function(ind,va){
            subString += '<p><span>'+va.name+'</span> : <span>'+va.value+'</span><span>'+va.unit+'</span></p>'
        })
        var imgLocat = '<p>'+data.deviceName+'</p>'+
                        '<p>'+data.dateTime+'</p>'+
                        '<div class="sonDiv">' +
                          subString+
                        '</div>'
        $('#'+data.deviceId+'').html(imgLocat);

        // 重新渲染煤气监控点实时数据图表
        reloadGasDetectionChart(data);
    }else if(data.type === "WARNING"){
        console.log("预警消息:",JSON.parse(evt.data));
        var top = 50;
        top += 30;
        var policeData = JSON.parse(evt.data);
        var dd = '<div class="police-pop">'+
            '<div class="pop-left">'+
            '<img src="img/jinggao.png" alt="">'+
            '</div>'+
            '<div class="pop-right">'+
            '<div class="pop-box" style="position:relative">'+
            '<span class="pop-title">'+policeData.deviceTypeName+'</span>'+
              '<span class="pop-time">'+policeData.dateTime+'</span>'+
            '<span class="pop-close" style="position:absolute;right:0;"><img src="img/close.png" alt=""></span>'+
            '</div>'+
            '<div class="pop-detail">'+policeData.message+'</div>'+
            '</div>'+
            '</div>'
         $('#popWrap').append(dd)
        $('.police-pop').slideDown(600).delay(2000).hide(600,function(){
            $(this).remove()
        })
        $('.pop-close').click(function(){
            $(this).parent().parent().parent().remove()
        })
    }
};

ws.onclose = function(evt) {
    console.log("Connection closed.");
};

/**
 * 重新加载煤气监控点实时数据图表
 */
function reloadGasDetectionChart(data) {
    // 更新x轴坐标
    var time = data.dateTime.substring(10);
    var xAxisLength = gasDetection.xAxis.length;
    if(xAxisLength === 20){
        var tempAxis = gasDetection.xAxis.slice(1);
        tempAxis.push(time);
        gasDetection.xAxis = tempAxis;
    }else{
        gasDetection.xAxis.push(time);
    }
    // 更新y轴坐标
    var points = data.data;
    var series = gasDetection.series;
    for(var i in points){
        var point = points[i];
        var encoding = data.deviceId + '-' + point.encoding;
        var targetPoint = findTargetPoint(series, encoding);
        if(targetPoint === null){
            targetPoint = {
                name: data.deviceName + '' + point.name,
                encoding: encoding,
                type:'line',
                data:[]
            };
            if(series.length > 0 && !series[0].encoding.startsWith(data.deviceId)){
                for(var j = 0;j < series[0].data.length; j++){
                    targetPoint.data.push(0);
                }
            }
            series.push(targetPoint);
        }
        if(targetPoint.data.length === 20){
            var tempData = targetPoint.data.slice(1);
            tempData.push(point.value);
            targetPoint.data = tempData;
        }else{
            targetPoint.data.push(point.value);
        }

    }
    for(var z in series){
        var seriesItem = series[z];
        var seriesItemDataLength = seriesItem.data.length;
        if(!seriesItem.encoding.startsWith(data.deviceId)){
            var lastValue = seriesItem.data[seriesItemDataLength - 1];
            if(seriesItemDataLength === 20){
                var tempData = seriesItem.data.slice(1);
                tempData.push(lastValue);
                seriesItem.data = tempData;
            }else{
                seriesItem.data.push(lastValue);
            }
        }
    }

    // 重新渲染图表
    initGasDetectionChart();
}

/**
 * 查找指定编码的点
 * @param points
 * @param encoding
 */
function findTargetPoint(points, encoding) {
    for(var i in points){
        if(points[i].encoding === encoding){
            return points[i];
        }
    }
    return null;
}