Websocket的环境搭建与测试

Spring websocket环境配置及简单示例

1，准备好相关依赖包，spring核心包以及spring-websocket-4.3.6release.jar, javax.websocket-api-1.0.jar。导入项目。

2，新建一个WebSocketConfig.java放在mvc自动扫描的Controller中，详细代码如下:

import org.springframework.context.annotation.Bean;  import com.database.websocket.*;import org.springframework.context.annotation.Configuration;  import org.springframework.web.servlet.config.annotation.EnableWebMvc;  import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;  import org.springframework.web.socket.config.annotation.EnableWebSocket;  import org.springframework.web.socket.config.annotation.WebSocketConfigurer;  import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;  @Configuration  @EnableWebMvc  @EnableWebSocket  public class WebSocketConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer {      @Override      public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {          //允许连接的域,只能以http或https开头      //   String[] allowsOrigins = {"http://www.xxx.com"};          String[] allowsOrigins ={"*"};         //WebIM WebSocket通道         registry.addHandler(chatWebSocketHandler(),"/webSocketIMServer").setAllowedOrigins(allowsOrigins).addInterceptors(myInterceptor());         registry.addHandler(chatWebSocketHandler(),"/sockjs/webSocketIMServer").setAllowedOrigins(allowsOrigins).addInterceptors(myInterceptor()).withSockJS();      }      @Bean      public ChatWebSocketHandler chatWebSocketHandler() {          return new ChatWebSocketHandler();      }      @Bean      public WebSocketHandshakeInterceptor myInterceptor(){          return new WebSocketHandshakeInterceptor();      }  }  

3，新建一个websocket的包，新建一个WebSocketHandshakeInterceptor.java文件作为握手拦截器，WebSocket握手拦截器用来拦截和处理客户端和服务器端分别在握手前和握手后的事件，我们这里添加这个拦截器是为了清晰的知道什么时候以及是否握手成功。详细代码如下：

import java.util.Map;  import javax.servlet.http.HttpSession;  import org.springframework.http.server.ServerHttpRequest;  import org.springframework.http.server.ServerHttpResponse;  import org.springframework.http.server.ServletServerHttpRequest;  import org.springframework.web.socket.WebSocketHandler;  import org.springframework.web.socket.server.HandshakeInterceptor;  public class WebSocketHandshakeInterceptor implements HandshakeInterceptor {  private static final String SESSION_NAME ="username";  private String userName;    @Override      public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler,Map<String, Object> attributes) throws Exception {          if (request instanceof ServletServerHttpRequest) {          HttpSession session = ((ServletServerHttpRequest)request).getServletRequest().getSession();          userName= (String) session.getAttribute(SESSION_NAME);                 if(userName == null) {                          userName= "访客" + session.getId() ;                          session.setAttribute(SESSION_NAME,userName);                 }             attributes.put("username",userName);          }          return true;      }    @Override      public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response,WebSocketHandler wsHandler, Exception exception) {      }}

4，新建一个ChatWebSocketHandler.java文件用于处理收发消息以及处理连接成功和断开连接的操作，详细代码如下：

import java.io.IOException;import java.util.ArrayList;import java.util.Collections;import java.util.List;import org.springframework.web.socket.CloseStatus;import org.springframework.web.socket.TextMessage;import org.springframework.web.socket.WebSocketSession;import org.springframework.web.socket.handler.TextWebSocketHandler;public class ChatWebSocketHandler extends TextWebSocketHandler{     private final static List<WebSocketSession> sessions =Collections.synchronizedList(new ArrayList<WebSocketSession>());     //接收文本消息，并发送出去     @Override     protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {          super.handleTextMessage(session,message);        message=new TextMessage("hello:"+message.getPayload());        sendMessageToUsers(session,message);//发送所有人     }     //连接建立后处理     @Override     public void afterConnectionEstablished(WebSocketSession session) throws Exception {          System.out.println("connect to thewebsocket chat success......");          sessions.add(session);          //处理离线消息     }     //抛出异常时处理     public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {          if(session.isOpen()){              session.close();          }          System.out.println("websocket chatconnection closed......");          sessions.remove(session);     }     //连接关闭后处理     public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {          System.out.println("websocket chatconnection closed......");          sessions.remove(session);     }     @Override     public boolean supportsPartialMessages() {          return false;     }           //发送消息方法        private void sendMessageToUsers(WebSocketSession session,TextMessage message) throws IOException {                  //循环在线会话，发送消息                 for (WebSocketSession itemSession : sessions) {                          if(itemSession.isOpen()) {                                    itemSession.sendMessage(message);                          }                 }        }  }  

5，最后，就是做客户端页面的请求发送以及消息接受，这里新添加一个reconnecting-websocket.min.js。这个js文件对websocket做了比较好的封装，更为方便的使用。前端页面和js代码如下：

<%@page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>  <!DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  <title>Inserttitle here</title>  </head>  <body>  Welcome<br/><input id="text"type="text"/>      <button onclick="send()">发送消息</button>      <hr/>      <button onclick="closeWebSocket()">关闭WebSocket连接</button>      <hr/>      <div id="message"></div>      <script type="text/javascript" src="js/reconnecting-websocket.min.js"></script><script type="text/javascript">    var websocket = null;      //判断当前浏览器是否支持WebSocket      if('WebSocket' in window) {         websocket = new WebSocket("ws://192.168.0.174:8080/Journal/webSocketIMServer");      }      else{         alert('当前浏览器 Not support websocket')      }      //连接发生错误的回调方法     websocket.onerror = function () {               //需要部署在Tomcat7.0.47以上的版本才能运行          setMessageInnerHTML("WebSocket连接发生错误");      };      //连接成功建立的回调方法     websocket.onopen = function () {         setMessageInnerHTML("WebSocket连接成功");      }      //接收到消息的回调方法     websocket.onmessage = function (event) {         setMessageInnerHTML(event.data);      }      //连接关闭的回调方法     websocket.onclose = function () {         setMessageInnerHTML("WebSocket连接关闭");      }      //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。     window.onbeforeunload = function () {         closeWebSocket();      }      //将消息显示在网页上     function setMessageInnerHTML(innerHTML) {         document.getElementById('message').innerHTML += innerHTML +'<br/>';      }      //关闭WebSocket连接     function closeWebSocket() {         websocket.close();      }      //发送消息     function send() {         var message = document.getElementById('text').value;         websocket.send(message);      }  </script>  </body>  </html>  

最后，在js的请求发送那里记得改为服务器上的 IP地址就可以实现websocket之间的简单通信啦。