websocket应用

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

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

不多说，直接上一套简单代码！

springboot项目，引入组件

1 <dependency>
2 <groupId>org.springframework.boot</groupId>
3 <artifactId>spring-boot-starter-websocket</artifactId>
4 </dependency>

服务端代码：

1.socket配置文件

 1 @Configuration  
 2 @EnableWebSocketMessageBroker  //注解开启STOMP协议来传输基于代理的消息，此时控制器支持使用@MessageMapping
 3 public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer  {
 4 
 5      @Override  
 6         public void configureMessageBroker(MessageBrokerRegistry registry) {
 7              registry.enableSimpleBroker("/queue","/topic");//topic用来广播，订阅，推送，prefix(topic)，queue用来实现p2p
 8              //全局使用消息订阅前缀
 9 //             例如客户端发送消息的目的地为/app/send，则对应控制层@MessageMapping(“/send”) 
10 //             客户端订阅主题的目的地为/app/subscribe，则对应控制层@SubscribeMapping(“/subscribe”)
11             registry.setApplicationDestinationPrefixes("/app");
12             //点对点配置消息前缀
13             //registry.setUserDestinationPrefix("/user");
14      }  
15      
16      
17       
18         @Override  
19         public void registerStompEndpoints(StompEndpointRegistry registry) {  
20             //用于客户端连接地址
21             registry.addEndpoint("/webServer")
22             //处理接口请求
23 //            .setHandshakeHandler(new MsgHandler())
24             //解决跨域问题
25             .setAllowedOrigins("*");
26             //拦截器，拦截握手前后消息
27 //            .addInterceptors(new MyHandshakeInterceptor());
28             //withSockJS 由于使用reconnection-websocket.min.js,暂时不需要
29             //registry.addEndpoint("/queueServer").withSockJS();//注册两个STOMP的endpoint，分别用于广播和点对点  
30         }

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

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

 1 /**********************************************websocket****************************************/
 2 var stompClient = null;
 3 
 4 function connect() {
 5 //如果掉线5秒尝试重连
 6     var socket = new ReconnectingWebSocket("ws://localhost:8888/webServer", null, {debug: false, reconnectInterval: 5000});
 7     stompClient = Stomp.over(socket);
 8     stompClient.connect({}, function(frame) {
 9         
10         //订阅消息
11         subscribeAddTotalData();
12 
13     });
14 }
15 
16 function sendInfo(sendPath){
17     var messageJson = JSON.stringify({});
18     stompClient.send(sendPath,{},messageJson);
19 }
20　　//主动发送消息
　　function getAddTotalData() {
　　　　sendInfo("/app/info/");
  }

21
22 function subscribeAddTotalData() { 
23 //订阅消息路径 
24 stompClient.subscribe('/topic/info/',function (response) { 
25 //获取终端详细数据 
26 var body = response.body; 
27 var data = JSON.parse(body); 
28 //处理数据 
29 
30  }); 
31 }

猜你喜欢