首页 > Web开发 > 详细

webSocket 使用

时间:2017-01-17 21:21:46      阅读:164      评论:0      收藏:0      [点我收藏+]

一.什么是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);
            }
View Code
技术分享
                /**
              * 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);
             }            
View Code

 (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);
    }*/
}
View Code

 

webSocket 使用

原文:http://www.cnblogs.com/sumingk/p/6294458.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!