Springboot-webscoket with sockjs

新建springboot maven工程，引入以下包
  1. <dependency>
  2. 			<groupId>org.springframework.boot</groupId>
  3. 			<artifactId>spring-boot-starter-websocket</artifactId>
  4. 		</dependency>
新建WebSocket配置类
  1. package com.example.demo.config;
  3. import org.springframework.context.annotation.Bean;
  4. import org.springframework.context.annotation.Configuration;
  5. import org.springframework.web.socket.WebSocketHandler;
  6. import org.springframework.web.socket.config.annotation.EnableWebSocket;
  7. import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
  8. import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
  10. /**
  11.  * Created by dingshuo on 2017/5/18.
  12.  */
  13. @Configuration
  14. @EnableWebSocket
  15. public class WebsocketConfig  implements WebSocketConfigurer{
  16.     @Override
  17.     public void registerWebSocketHandlers(WebSocketHandlerRegistry webSocketHandlerRegistry) {
  18.         webSocketHandlerRegistry.addHandler(myHandler(),"/ws").setAllowedOrigins("*").withSockJS();
  19.     }
  21.     @Bean
  22.     public WebSocketHandler myHandler(){
  23.         return new com.example.demo.config.WebSocketHandler();
  24.     }
  25. }
根据配置类中的Handler定义，进行具体代码编写
  1. package com.example.demo.config;
  3. import org.springframework.stereotype.Component;
  4. import org.springframework.web.socket.CloseStatus;
  5. import org.springframework.web.socket.TextMessage;
  6. import org.springframework.web.socket.WebSocketMessage;
  7. import org.springframework.web.socket.WebSocketSession;
  8. import org.springframework.web.socket.handler.TextWebSocketHandler;
  10. import java.util.HashMap;
  11. import java.util.Map;
  12. import java.util.UUID;
  14. /**
  15.  * Created by dingshuo on 2017/5/18.
  16.  */
  17. @Component
  18. public class WebSocketHandler extends TextWebSocketHandler{
  20.     public static final Map<Object, WebSocketSession> userSocketSessionMap;
  21.     static {
  22.         userSocketSessionMap = new HashMap<Object, WebSocketSession>();
  23.     }
  26.     @Override
  27.     public void afterConnectionEstablished(WebSocketSession session) throws Exception {
  28.         userSocketSessionMap.put(UUID.randomUUID(),session);
  29.         System.out.println("建立连接完成");
  30.     }
  32.     @Override
  33.     public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
  34.         switch (message.getPayload().toString()){
  35.             case "1":
  36.                 sendMsg(session,new TextMessage("A"));
  37.                 break;
  38.             case "2":
  39.                 sendMsg(session,new TextMessage("B"));
  40.                 break;
  41.         }
  42.         System.out.println("处理消息");
  43.     }
  45.     @Override
  46.     public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
  47.         System.out.println("处理消息传出错误");
  48.     }
  50.     @Override
  51.     public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
  52.         System.out.println("处理连接关闭");
  53.     }
  55.     private void sendMsg(WebSocketSession session,TextMessage message) throws Exception {
  56.         for (int i=0;i<100;i++){
  57.             Thread.sleep(1000);
  58.             session.sendMessage(message);
  59.         }
  60.     }
  61. }
在Handler里可以看出每个连接的连接-接收消息-关闭连接等过程，只需要在相应的函数中完成具体方法即可
此处简单模拟，客户端连接后，发送一个连接字符，然后服务器根据连接字符不断的推送消息（这里是发送“1”或“2”）

新建一个测试用的html静态页面（这里引用了sockjs），代码是抄网上的。。。
注意修改url地址信息
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
  5.     <script src="http://cdn.jsdelivr.net/sockjs/1.0.1/sockjs.min.js"></script>  
  6.     <style>  
  7.       .box {  
  8.           width: 300px;  
  9.           float: left;  
  10.           margin: 0 20px 0 20px;  
  11.       }  
  12.       .box div, .box input {  
  13.           border: 1px solid;  
  14.           -moz-border-radius: 4px;  
  15.           border-radius: 4px;  
  16.           width: 100%;  
  17.           padding: 0px;  
  18.           margin: 5px;  
  19.       }  
  20.       .box div {  
  21.           border-color: grey;  
  22.           height: 300px;  
  23.           overflow: auto;  
  24.       }  
  25.       .box input {  
  26.           height: 30px;  
  27.       }  
  28.       h1 {  
  29.           margin-left: 30px;  
  30.       }  
  31.       body {  
  32.           background-color: #F0F0F0;  
  33.           font-family: "Arial";  
  34.       }  
  35.     </style>  
  36. </head>  
  37. <body lang="en">  
  38.     <h1>Index</h1>  
  39.     <div id="first" class="box">  
  40.       <div></div>  
  41.       <form><input autocomplete="off" value="Type here..."></input></form>  
  42.     </div>  
  43.     <script>  
  44.         var sockjs_url = 'http://127.0.0.1:8080/ws';  
  45.         var sockjs = new SockJS(sockjs_url);  
  46.         $('#first input').focus();  
  47.   
  48.         var div  = $('#first div');  
  49.         var inp  = $('#first input');  
  50.         var form = $('#first form');  
  51.   
  52.         var print = function(m, p) {  
  53.             p = (p === undefined) ? '' : JSON.stringify(p);  
  54.             div.append($("<code>").text(m + ' ' + p));  
  55.             div.append($("<br>"));  
  56.             div.scrollTop(div.scrollTop()+10000);  
  57.         };  
  58.   
  59.         sockjs.onopen    = function()  {print('[*] open', sockjs.protocol);};  
  60.         sockjs.onmessage = function(e) {print('[.] message', e.data);};  
  61.         sockjs.onclose   = function()  {print('[*] close');};  
  62.   
  63.         form.submit(function() {  
  64.             print('[ ] sending', inp.val());  
  65.             sockjs.send(inp.val());  
  66.             inp.val('');  
  67.             return false;  
  68.         });  
  69.     </script>  
  70. </body>  
  71. </html>





posted @ 2017-05-18 15:47  二刀  阅读(1073)  评论(0)  编辑  收藏  举报