WebSocket使用方法-详解

因为我们做的是物联网项目，所以在项目中有一个需求，时刻监视硬件设备是否报警，如果报警，后端主动推送报警消息给客户端，然后报警铃声响起。

要实现服务端主动推送消息给浏览器端，必须是WebSocket啊，先来看看概念：这是官方文档，在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

看代码

var webSocketListen = function () {   
    var ws;
    function openWebSocket() {
        if ('WebSocket' in window) {              //  判断是否支持WebSocket
            ws = new WebSocket("ws://" + window.location.host + "/ws");
        }else {
            alert('当前浏览器 Not support websocket')
        }
        //ws = new WebSocket("ws://" + window.location.host + "/ws");
        ws.onopen = function (evt) {        //  打开连接
            console.log("Connection open ...");
        };
        ws.onmessage = function (evt) {     // 接收报警消息
            if (document.fullscreenElement) {        //  这一段判断是我的项目所需 退出全屏，不要就删掉
                document.exitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            };
            $(".alarmDialog").show( function () {       //  在后端推送报警消息给前端，报警audio响起
                var audio = document.getElementById('alarmMusic');
                    audio.play()   
            });
            $(".alarmContent").html(evt.data);     //  获取报警信息
        };
        ws.onclose = function (evt) {       // 监听连接中断关闭，提示用户
            console.log("Connection closed.");
            console.log('websocket 断开: ' + evt.code + ' ' + evt.reason + ' ' + evt.wasClean)
            $("#dlg").html('网络已断开或者信号不稳定！<br/>请确保网络连接稳定之后，再手动刷新一次页面！').dialog('open')
        };
    }
    function checkWebSocket() {     //  连接中断后试图重启连接
        try {
            ws.send(""); //心跳
        } catch (e) {         
            openWebSocket(); //出现异常重新打开WebSocket
        }
    }
    openWebSocket();
    var t1 = window.setInterval(checkWebSocket, 5000);    // 轮询监测连接中断重启
    //  报警响起后，用户可以点击确定按钮关闭响铃
    var audio = document.getElementById('alarmMusic');
    $("#almConfirm").click(function () {
        audio.pause();
        $(".alarmDialog").hide();        
    })
};

//  在需要调用的地方  一般都是在页面加载完就调用
webSocketListen()

就是这么多，注释已经很详细了，结合这个菜鸟教程会更清楚。

拜了个拜