Spring Boot SockJS应用例子

Posted 2022-11-30 exmyth

1.SockJS用javascript实现的socket连接，兼容各种浏览器的WebSocket支持库
2.WebSocket是H5的，不支持H5的浏览器没法使用。
3.SockJS它提供类似于websocket的编程模式但是可以适应不同的浏览器（包括不支持websocket的浏览器）。


后端代码：

Java代码  

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

Java代码  

1. package com.cesmart;  
2.   
3. import org.springframework.boot.SpringApplication;  
4. import org.springframework.boot.autoconfigure.EnableAutoConfiguration;  
5. import org.springframework.context.ApplicationContext;  
6. import org.springframework.context.annotation.ComponentScan;  
7.   
8. @EnableAutoConfiguration  
9. @ComponentScan(basePackages = "com.cesmart") // 扫描那些包得到bean.@ComponentScan("com.teradata.notification","com.teradata.dal")  
10. public class Application   
11.     public static void main(String[] args)   
12.         ApplicationContext applicationContext = SpringApplication.run(Application.class, args);  
13.       
14.   

Java代码  

1. package com.cesmart.config;  
2.   
3. import org.springframework.web.socket.CloseStatus;  
4. import org.springframework.web.socket.TextMessage;  
5. import org.springframework.web.socket.WebSocketHandler;  
6. import org.springframework.web.socket.WebSocketMessage;  
7. import org.springframework.web.socket.WebSocketSession;  
8.   
9. public class MyHandler implements WebSocketHandler   
10.     // 连接继开处理  
11.     @Override  
12.     public void afterConnectionClosed(WebSocketSession arg0, CloseStatus arg1) throws Exception   
13.         // TODO Auto-generated method stub  
14.   
15.         System.out.println("Connection closed..." + arg0.getRemoteAddress().toString());  
16.   
17.       
18.   
19.     // 连接建立处理  
20.     @Override  
21.     public void afterConnectionEstablished(WebSocketSession arg0) throws Exception   
22.         // TODO Auto-generated method stub  
23.         System.out.println("Connection established..." + arg0.getRemoteAddress().toString());  
24.       
25.   
26.     // 接收、发送信息处理  
27.     @Override  
28.     public void handleMessage(WebSocketSession arg0, WebSocketMessage<?> arg1) throws Exception   
29.         // TODO Auto-generated method stub  
30.         try   
31.             System.out.println("Req: " + arg1.getPayload());  
32.             // 发送信息  
33.             TextMessage returnMessage = new TextMessage(arg1.getPayload() + " received at server");  
34.             arg0.sendMessage(returnMessage);  
35.          catch (Exception e)   
36.             e.printStackTrace();  
37.           
38.       
39.   
40.     // 错误处理（客户端突然关闭等接收到的错误）  
41.     @Override  
42.     public void handleTransportError(WebSocketSession arg0, Throwable arg1) throws Exception   
43.         // TODO Auto-generated method stub  
44.         if (arg0.isOpen())   
45.             arg0.close();  
46.           
47.         System.out.println(arg1.toString());  
48.         System.out.println("WS connection error,close...");  
49.       
50.   
51.     @Override  
52.     public boolean supportsPartialMessages()   
53.         // TODO Auto-generated method stub  
54.         return false;  
55.       
56.   

Java代码  

1. package com.cesmart.config;  
2.   
3. import java.util.Map;  
4.   
5. import org.springframework.http.server.ServerHttpRequest;  
6. import org.springframework.http.server.ServerHttpResponse;  
7. import org.springframework.web.socket.WebSocketHandler;  
8. import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;  
9.   
10. /** 
11.  * 类描述：拦截器 
12.  */  
13. public class MyHandshakeInterceptor extends HttpSessionHandshakeInterceptor   
14.   
15.     @Override  
16.     public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler,  
17.             Exception ex)   
18.         // TODO Auto-generated method stub  
19.         System.out.println("After handshake " + request.getRemoteAddress().toString());  
20.         super.afterHandshake(request, response, wsHandler, ex);  
21.       
22.   
23.     @Override  
24.     public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler handler,  
25.             Map<String, Object> map) throws Exception   
26.         // TODO Auto-generated method stub  
27.         System.out.println("Before handshake " + request.getRemoteAddress().toString());  
28.         return super.beforeHandshake(request, response, handler, map);  
29.       
30.   
31.   

Java代码  

1. package com.cesmart.config;  
2.   
3. import org.springframework.context.annotation.Bean;  
4. import org.springframework.context.annotation.Configuration;  
5. import org.springframework.web.socket.config.annotation.EnableWebSocket;  
6. import org.springframework.web.socket.config.annotation.WebSocketConfigurer;  
7. import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;  
8.   
9. @Configuration // 配置类  
10. @EnableWebSocket // 声明支持websocket  
11. public class WebSocketConfig implements WebSocketConfigurer   
12.   
13.     @Override  
14.     public void registerWebSocketHandlers(WebSocketHandlerRegistry registry)   
15.         // 注册websocket实现类，指定参数访问地址;allowed-origins="*" 允许跨域  
16.         // addHandler是增加处理接口和设定URL  
17.         // addInterceptors是增加拦截器处理（可以不用）  
18.         registry.addHandler(myHandler(), "/ws").addInterceptors(myHandshake()).setAllowedOrigins("*");  
19.         registry.addHandler(myHandler(), "/sockjs/ws").addInterceptors(myHandshake()).withSockJS();  
20.   
21.         registry.addHandler(myHandler(), "/ws2").setAllowedOrigins("*");  
22.         registry.addHandler(myHandler(), "/sockjs/ws2").setAllowedOrigins("*").withSockJS();  
23.       
24.   
25.     @Bean  
26.     public MyHandler myHandler()   
27.         return new MyHandler();  
28.       
29.   
30.     @Bean  
31.     public MyHandshakeInterceptor myHandshake()   
32.         return new MyHandshakeInterceptor();  
33.       
34.   

前端代码：

Java代码  

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>Insert title here</title>  
6.     <script type="text/javascript" src="//cdn.bootcss.com/sockjs-client/1.1.1/sockjs.min.js"></script>  
7.     <script type="text/javascript">  
8.         var url = "127.0.0.1:8090/";  
9.         var websocket = null;  
10.         if (‘WebSocket‘ in window)   
11.             websocket = new WebSocket("ws://" + url + "/ws");//建立连接  
12.          else   
13.             websocket = new SockJS("http://" + url + "/sockjs/ws");//建立连接  
14.           
15.         //建立连接处理  
16.         websocket.onopen = onOpen;  
17.         //接收处理  
18.         websocket.onmessage = onMessage;  
19.         //错误处理  
20.         websocket.onerror = onError;  
21.         //断开连接处理  
22.         websocket.onclose = onClose;  
23.   
24.         function onOpen(openEvent)   
25.             document.getElementById("console").innerHTML = document.getElementById("console").innerHTML+ "OPEN<br/>";  
26.           
27.   
28.         function onMessage(event)   
29.             document.getElementById("console").innerHTML = document.getElementById("console").innerHTML+ event.data+"<br/>";  
30.           
31.         function onError()   
32.           
33.         function onClose()   
34.             document.getElementById("console").innerHTML = document.getElementById("console").innerHTML+ "CLOSE<br/>";  
35.           
36.   
37.         function doSend()   
38.             console.log(websocket.readyState);  
39.             if (websocket.readyState == SockJS.OPEN)   
40.                 var msg = document.getElementById("message").value;  
41.                 //发送消息  
42.                 websocket.send(msg);  
43.              else   
44.                 alert("连接失败!");  
45.               
46.           
47.   
48.   
49.         function disconnect()  
50.             if (websocket != null)   
51.                 websocket.close();  
52.                 websocket = null;  
53.               
54.           
55.   
56.         function reconnect()  
57.             if (websocket != null)   
58.                 websocket.close();  
59.                 websocket = null;  
60.               
61.             if (‘WebSocket‘ in window)   
62.                websocket = new WebSocket("ws://" + url + "/ws");  
63.              else   
64.                 websocket = new SockJS("http://" + url + "/sockjs/ws");  
65.               
66.             websocket.onopen = onOpen;  
67.             websocket.onmessage = onMessage;  
68.             websocket.onerror = onError;  
69.             websocket.onclose = onClose;  
70.           
71.     </script>  
72. </head>  
73. <body>  
74. <div>  
75.     <button id="disconnect" onclick="disconnect()">断开连接</button>  
76.     <button id="send" onclick="doSend()">发送消息</button>  
77.     <button id="reconnect" onclick="reconnect()">重新连接</button>  
78. </div>  
79. <div>  
80.     <textarea id="message" style="width: 350px">Here is a message!</textarea>  
81. </div>  
82. <div>日志信息：</div>  
83. <p id="console" width="600px"></p>  
84. </body>  
85. </html>  

参考（websocket简单应用）：http://wiselyman.iteye.com/blog/2003336
参考（应用例子）：http://768992698.iteye.com/blog/2338250
参考（应用例子（TextWebSocketHandler ））：http://www.cnblogs.com/likun10579/p/5594828.html