webSocket 使用 - 爱码网

一.什么是webSocket?

众所周知，浏览器支持无状态的http协议，用户在浏览器端发送一个请求，服务端返回一个响应。这种响应是基于用户不断的请求才能返回。在html5之前，要实现一个实时获取业务数据的功能，或许还只能用轮询的方式，每次去发送一个请求获取服务器响应的数据。那html5到来之时，带来了一个便利的技术 webSocket.它不像http请求那样，每次要获取数据，就建立一次连接，获取完后连接就断开。webSocket 只建立一次和客户端的长连接，以后的每次活动，都无需再和浏览器客户端建立连接，提高了这种频繁请求的效率，减少了网络带宽的损耗。

二.webSocket 在项目中的运用

最近项目上有个需求，要获取电源设备的实时电流值，并以可视化的折线图展示出来。基于这块业务需求，我用webSocket实现了该功能，废话不多说了，直接贴上干货！

（1）准备webSocket所需的jar包。

webSocket 使用

这里我需要说明下，该jar包与 tomcat 自身的jar有冲突，建议不要在本项目内引用，可外置放在其他项目中引用过来。

（2）前端js代码块

            //========== WebScoket 通信地址
            var webScoket_url = "ws://"+location.host+"/PowerDemo/websocket_login";
            var webSocket = new WebSocket(webScoket_url);
            //js 客户端初始化WebSocket自身事件方法
            function initWebSocket(){
                //接受服务端返回的消息
                webSocket.onerror = function(event) {
                  console.log("webSocket异常",event);
                };
                 
                 //我们创建一个连接到服务器的连接时将会调用此方法。
                webSocket.onopen = function(event) {
                  //onOpen(event)
                  console.log("创建连接打开",event);
                };
                 
                 //接收消息事件。
                webSocket.onmessage = function(event) {
                  onMessage(event)
                };
                
                webSocket.onclose = function(event){
                    console.log("页面的关闭",event);
                    webSocket = null;
                }
            }
            
             
            function onMessage(event) {
               // document.getElementById('messages').innerHTML +=event.data+'<br />';
               // console.log(event+"==="+event.data);
                commonService.publishNotify("getMessageEvent", event.data);
            }

View Code