您的位置:首页 > 编程语言 > Java开发

Spring WebSocket 使用详解

2016-06-01 12:39 323 查看

一、WebSocket 服务端配置

 1.1 服务注册

   服务注册分为两种模式:注解模式(推荐)、XML配置模式

 

  1.1.1 注解配置模式

 

Java代码  
  1. /** 
  2.  *  
  3.  * @author Goma 
  4.  * 
  5.  */  
  6. @Configuration  
  7. @EnableWebSocket  
  8. public class WebSocketConfig implements WebSocketConfigurer {  
  9.   
  10.     @Override  
  11.     public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {  
  12.         registry.addHandler(myhandler(), "/websocket").addInterceptors(myInterceptors()).setAllowedOrigins("*");  
  13.         registry.addHandler(myhandler(), "/sockjs/websocket").addInterceptors(myInterceptors()).withSockJS();  
  14.     }  
  15.   
  16.     @Bean  
  17.     public WebSocketHandler myhandler() {  
  18.         return new WebsocketEndPoint();  
  19.     }  
  20.   
  21.     @Bean  
  22.     public HandshakeInterceptor myInterceptors() {  
  23.         return new HandshakeInterceptor();  
  24.     }  
  25. }  

   注:该类需要放在SpringMVC扫描路径下

   @Configuration     指明该类为Spring 配置类

   @EnableWebSocket  声明该类支持WebSocket

 

Java代码  
  1. registry.addHandler(myhandler(), "/websocket").addInterceptors(myInterceptors()).setAllowedOrigins("*");  

   用来注册WebSocket Server实现类,第二个参数是访问WebSocket的地址

   注:setAllowedOrigins方法用来设置来自那些域名的请求可访问,默认为localhost

   

Java代码  
  1. registry.addHandler(myhandler(), "/sockjs/websocket").addInterceptors(myInterceptors()).withSockJS();  

   允许客户端使用SockJS

 

  1.1.2 XML配置模式

   更新Spring application.xml namespace,使其支持WebSocket

 

Xml代码  
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <beans xmlns="http://www.springframework.org/schema/beans"  
  3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
  4.     xmlns:context="http://www.springframework.org/schema/context"   
  5.     xmlns:websocket="http://www.springframework.org/schema/websocket"   
  6.     xsi:schemaLocation="http://www.springframework.org/schema/beans  
  7.                            http://www.springframework.org/schema/beans/spring-beans-4.0.xsd  
  8.                            http://www.springframework.org/schema/context  
  9.                            http://www.springframework.org/schema/context/spring-context-4.0.xsd  
  10.                            http://www.springframework.org/schema/websocket   
  11.                            http://www.springframework.org/schema/websocket/spring-websocket.xsd">  

 

 

    namespace中添加

 

Xml代码  
  1. xmlns:websocket="http://www.springframework.org/schema/websocket"   
  2. http://www.springframework.org/schema/websocket   
  3. http://www.springframework.org/schema/websocket/spring-websocket.xsd"  

 

   

Xml代码  
  1. <bean id="websocket" class="com.camelot.lrpportal.web.webapp.controller.WebsocketEndPoint"/>  
  2. <websocket:handlers>  
  3.     <websocket:mapping path="/websocket" handler="websocket"/>  
  4.     <websocket:handshake-interceptors>  
  5.         <bean class="com.camelot.lrpportal.web.webapp.controller.HandshakeInterceptor"/>  
  6.     </websocket:handshake-interceptors>  
  7. </websocket:handlers>  

 

 1.2 服务端编写

 

Java代码  
  1. public class WebsocketEndPoint extends TextWebSocketHandler {  
  2.       
  3.     private Logger logger = Logger.getLogger(getClass());  
  4.       
  5.     @Override  
  6.     protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {  
  7.           
  8.         super.handleTextMessage(session, message);  
  9.         logger.debug("GOMA === > WebSocketEndPoint.handlerTextMessage...");  
  10.           
  11.         TextMessage returnMessage = new TextMessage(message.getPayload()+" received at server");  
  12.         session.sendMessage(returnMessage);  
  13.           
  14.     }  
  15. }  

 

  这个类处理来之浏览器(客户端)的WebSocket请求。在这个例子中,我们创建一个叫WebSocketEndPoint的类,并让它集成TextWebsocketHandler类。然后重写父类方法handlerTextMessage(),每当客户端发送信息过来,都会由这个函数接收并处理。

 

  当然这里还可以重写其他方法,如afterConnectionEstablished、afterConnectionClosed、handleTransportError 等等

 

  扩展:这里可以将登录用户保存到对象中,然后可以实现点对点消息发送、发送所有用户等功能。

 

 1.3 握手拦截器

  WebSocket握手拦截器用来拦截和处理客户端和服务器端分别在握手前和握手后的事件,我们这里添加这个拦截器是为了清晰的知道什么时候以及是否握手成功。

 

Java代码  
  1. public class HandshakeInterceptor extends HttpSessionHandshakeInterceptor {  
  2.       
  3.     private Logger logger = Logger.getLogger(getClass());  
  4.       
  5.     @Override  
  6.     public boolean beforeHandshake(ServerHttpRequest request,  
  7.             ServerHttpResponse response, WebSocketHandler wsHandler,  
  8.             Map<String, Object> attributes) throws Exception {  
  9.         logger.debug("GOMA ===> Before Handshake");  
  10.         return super.beforeHandshake(request, response, wsHandler, attributes);  
  11.     }  
  12.   
  13.     @Override  
  14.     public void afterHandshake(ServerHttpRequest request,  
  15.             ServerHttpResponse response, WebSocketHandler wsHandler,  
  16.             Exception ex) {  
  17.         logger.debug("GOMA ===> After Handshake");  
  18.         super.afterHandshake(request, response, wsHandler, ex);  
  19.     }  
  20. }  

 

 二、WebSocket 客户端配置

 

Html代码  
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>Insert title here</title>  
  6.   
  7.   
  8.   
  9. <script type="text/javascript">  
  10.         function setConnected(connected) {  
  11.             document.getElementById('connect').disabled = connected;  
  12.             document.getElementById('disconnect').disabled = !connected;  
  13.             document.getElementById('response').innerHTML = '';  
  14.         }  
  15.   
  16.         function connect() {  
  17.             if ('WebSocket' in window){  
  18.                   console.log('Websocket supported');  
  19.                   socket = new WebSocket('ws://localhost:8080/lrpportal-web-webapp/websocket');  
  20.   
  21.                   console.log('Connection attempted');  
  22.   
  23.                   socket.onopen = function(){  
  24.                        console.log('Connection open!');  
  25.                        setConnected(true);  
  26.                     }  
  27.   
  28.                   socket.onclose = function(){  
  29.                       console.log('Disconnecting connection');  
  30.                   }  
  31.   
  32.                   socket.onmessage = function (evt)   
  33.                      {   
  34.                         var received_msg = evt.data;  
  35.                         console.log(received_msg);  
  36.                         console.log('message received!');  
  37.                         showMessage(received_msg);  
  38.                      }  
  39.   
  40.                 } else {  
  41.                   console.log('Websocket not supported');  
  42.                 }  
  43.         }  
  44.   
  45.         function disconnect() {  
  46.             setConnected(false);  
  47.             console.log("Disconnected");  
  48.         }  
  49.   
  50.         function sendName() {  
  51.             var message = document.getElementById('message').value;  
  52.             socket.send(JSON.stringify({ 'message': message }));  
  53.         }  
  54.   
  55.         function showMessage(message) {  
  56.             var response = document.getElementById('response');  
  57.             var p = document.createElement('p');  
  58.             p.style.wordWrap = 'break-word';  
  59.             p.appendChild(document.createTextNode(message));  
  60.             response.appendChild(p);  
  61.         }  
  62.   
  63. /*   
  64. 1. new WebSocket('ws://localhost:8080//websocket')尝试与服务器建立连接;  
  65. 2. 握手成功并建立连接后,socket.onopen被调用  
  66. 3. 当接收来自服务器的消息,socket.onmessage被调用  
  67. 4. socket.send()用来发送消息至服务端  
  68. */  
  69. </script>  
  70. </head>  
  71. <body>  
  72.   
  73. <button id="connect" onclick="connect()">connect</button>  
  74. <button id="disconnect" onclick="disconnect()"/>disconnect</button><br>  
  75. <input id="message" value="send message"/>  
  76. <button onclick="sendName()">发送消息</button>  
  77. <div id="response"></div>  
  78. </body>  
  79. </html>  

 

 

 

 

 

 参考文档:

 http://segmentfault.com/a/1190000000610456

 http://blog.csdn.net/heng_ji/article/details/39007227

 http://my.oschina.net/ldl123292/blog/304360?fromerr=VA5k7FnU

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: