websocket应用

        由于做数据大屏展示，需要实时刷新数据（按秒），AJAX请求实现长轮询效率太低，所以就想到了websocket长连接，WebSocket 连接允许客户端和服务器之间进行全双工通信，以便任一方都可以通过建立的连接将数据推送到另一端，只需要一次连接，还有心跳检测，重新连接等。

　　我们这里采用服务器端主动向客户端消息推送。（广播方式）

       不多说，直接上代码！

     springboot项目，引入组件

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

       服务端代码：

       1.socket配置文件

@Configuration  
@EnableWebSocketMessageBroker  //注解开启STOMP协议来传输基于代理的消息，此时控制器支持使用@MessageMapping
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer  {

     @Override  
        public void configureMessageBroker(MessageBrokerRegistry registry) {
             registry.enableSimpleBroker("/queue","/topic");//topic用来广播，订阅，推送，prefix(topic)，queue用来实现p2p
             //全局使用消息订阅前缀
//             例如客户端发送消息的目的地为/app/send，则对应控制层@MessageMapping(“/send”) 
//             客户端订阅主题的目的地为/app/subscribe，则对应控制层@SubscribeMapping(“/subscribe”)
            registry.setApplicationDestinationPrefixes("/app");
            //点对点配置消息前缀
            //registry.setUserDestinationPrefix("/user");
     }  
     
     
      
        @Override  
        public void registerStompEndpoints(StompEndpointRegistry registry) {  
            //用于客户端连接地址
            registry.addEndpoint("/webServer")
            //处理接口请求
//            .setHandshakeHandler(new MsgHandler())
            //解决跨域问题
            .setAllowedOrigins("*");
            //拦截器，拦截握手前后消息
//            .addInterceptors(new MyHandshakeInterceptor());
            //withSockJS 由于使用reconnection-websocket.min.js,暂时不需要
            //registry.addEndpoint("/queueServer").withSockJS();//注册两个STOMP的endpoint，分别用于广播和点对点  
        }

2.服务端消息推送

　　　　
　　　　@Autowired
　　　　private SimpMessagingTemplate template;

　　　   //订阅消息
        @MessageMapping("/screen1/order/all/info/{date}")
        public void allOrder(@DestinationVariable("date") String date) {
            logger.info("订阅交易汇总统计:{}",date);
            Map<String,Object> map = null;
            if("day".equals(date)){
                map = screenController.getAmtDayAll();
            }else{
                map = screenController.getAmtMonthAll();
            }
            template.convertAndSend("/topic/info/"+date,map);
        }

引入客户端JS结合echarts进行数据实时展现

有个头疼的问题，浏览器总是打印服务器端返回的数据，打开浏览器调试工具，发现在stomp.min.js中打印的，接下来看看怎么去掉呢？

 定位了一下，发现是stomp.min.js 中118行。跟踪后，e.log(t)是罪魁祸首，t就是打印的数据。改为""，很棒！你们是怎么解决这个问题的呢

发现这种写法很棒：(e = window.console) != null

        r.prototype.debug = function(t) {
            var e;
118　　　　　return typeof window !== "undefined" && window !== null ? (e = window.console) != null ? "" : void 0 : void 0
119　　　　//return typeof window !== "undefined" && window !== null ? (e = window.console) != null ? e.log(t) : void 0 : void 0
         };

<script src="../js/websocket/reconnecting-websocket.min.js"  type="text/javascript"></script>//解决服务器断开，客户端主动重连问题
<script src="../js/websocket/stomp.min.js"  type="text/javascript"></script>
<script src="../js/jquery/jquery.min.js"  type="text/javascript"></script> 

/**********************************************websocket****************************************/
var stompClient = null;

function connect() {
//如果掉线5秒尝试重连
    var socket = new ReconnectingWebSocket("ws://localhost:8888/webServer", null, {debug: false, reconnectInterval: 5000});
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function(frame) {
        
        //订阅消息
        subscribeAddTotalData();

    });
}

function sendInfo(sendPath){
    var messageJson = JSON.stringify({});
    stompClient.send(sendPath,{},messageJson);
}
20　　//主动发送消息
　　function getAddTotalData() {
　　　　sendInfo("/app/info/");
  }

21
function subscribeAddTotalData() { 
//订阅消息路径 
stompClient.subscribe('/topic/info/',function (response) { 
//获取终端详细数据 
var body = response.body; 
var data = JSON.parse(body); 
//处理数据 

 }); 
 }
效果图