一.什么是webSocket?
众所周知,大家都知道浏览器支持无状态的http协议,用户在浏览器端发送一个请求,服务端返回一个响应。这种响应是基于用户不断的请求才能发送。在html5之前,要实现一个实时获取业务数据的功能,或许还只能用轮询的方式,每次去发送一个请求去获取服务器响应的数据。那html5到来之时,带来了一个便利的技术 webSocket.它不像http请求那样,每次要获取数据,就建立一次连接,获取完后连接就断开。webSocket 只建立一次和客户端的长连接,以后的每次活动,都无需再和流量器客户端建立连接,提高了这种频繁请求的效率。
二.webSocket 在项目中的运用
最近项目上有个需求,要获取电源设备的实时电流值,并以可视化的折线图展示出来。基于这块业务需求,我用webSocket实现了该功能,废话不多说了,直接贴上干货!
(1)准备webSocket所需的后台jar包。
这里我需要说明下,该jar包与 tomcat 自身的jar有冲突,建议不要在本项目内引用,可外置放在其他项目中引用过来。
(2)前端js代码块
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); }
/** * webSocket.readyState 状态值 CONNECTING 0 连接还没开启。 OPEN 1 连接已开启并准备好进行通信。 CLOSING 2 连接正在关闭的过程中。 CLOSED 3 连接已经关闭,或者连接无法建立。 */ vm.testScoket = function(obj){ var json_str = {"type":obj.NUMPLATE}; if(webSocket == null){ webSocket = new WebSocket(webScoket_url); $timeout(function(){ initWebSocket(); if(webSocket.readyState == 1){ webSocket.send(JSON.stringify(json_str)); } },1000) } else if(webSocket != null && webSocket.readyState == 1){ initWebSocket(); webSocket.send(JSON.stringify(json_str)); } else if(webSocket.readyState == 2 || webSocket.readyState == 3){ webSocket = new WebSocket(webScoket_url); $timeout(function(){ initWebSocket(); if(webSocket.readyState == 1){ webSocket.send(JSON.stringify(json_str)); } },1000) } //QuestionService.initModal("views/power/failure/msgModal.html","ModalController",null); }
(3)后台的webSocket
package com.zdwl.scoket; import java.io.IOException; import java.util.Date; import javax.websocket.OnClose; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.ServerEndpoint; import net.sf.json.JSONObject; import net.sf.json.JsonConfig; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.EnableWebMvc; import com.zdwl.comm.JqgridPage; import com.zdwl.comm.util.JsonDateValueProcessor; import com.zdwl.comm.util.SpringUtil; import com.zdwl.model.vo.power.PowerEvent; import com.zdwl.service.power.PowerEventQueryServiceImpl; @Configuration @EnableWebMvc @ServerEndpoint(value = "/websocket") public class BusPowerWebScoket extends SpringUtil{ @OnMessage public void onMessage(String message, Session session) throws IOException, InterruptedException { PowerEventQueryServiceImpl eventQueryService=(PowerEventQueryServiceImpl)super.getBean("powerEventQueryService"); //接受前端的web 消息 System.out.println("接收: " + message); JSONObject jo=null; try { jo = new JSONObject().fromObject(message); System.out.println("==="+jo.get("rows")+"======"+jo.toString()); PowerEvent event=new PowerEvent(); String beginTime =jo.get("beginDate")+""; String date = null;//shoveFrontSecondForGetDate(5*60); event.setBeginDate(date); JqgridPage page = new JqgridPage(); String pageSize = jo.get("rows")+""; String curPageNo =jo.get("page")+""; if (curPageNo != null) { page.setCurPageNo(new Integer(curPageNo)); } if (pageSize != null) { page.setPageSize(new Integer(pageSize)); } int sentMessages = 0; while(true){ Thread.sleep(3000); eventQueryService.queryRealTimeCurrentInfo(page, event, null); JsonConfig jsonConfig = new JsonConfig(); jsonConfig.registerJsonValueProcessor(Date.class, new JsonDateValueProcessor()); JSONObject json = JSONObject.fromObject(page,jsonConfig); String str = json.toString(); //发送文本消息 session.getBasicRemote().sendText(str); sentMessages++; } } catch (Exception e) { e.printStackTrace(); } } @OnOpen public void onOpen() { System.out.println("客户端链接。。。"); } @OnClose public void onClose() { System.out.println("链接关闭。。。。"); } /*public static void main(String[] args) { shoveFrontSecondForGetDate(120); }*/ /*public static String shoveFrontSecondForGetDate(int secs){ Date date = new Date(); Long ll = date.getTime() - secs*1000L; SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); // System.out.println("当前时间:"+sdf.format(date)); date= new Date(ll); System.out.println("推前"+secs+"秒的时间:"+sdf.format(date)); return sdf.format(date); }*/ }
原文:http://www.cnblogs.com/sumingk/p/6294458.html