場(chǎng)景

websocket是Html5新增加特性之一，目的是瀏覽器與服務(wù)端建立全雙工的通信方式，解決http請(qǐng)求-響應(yīng)帶來過多的資源消耗，同時(shí)對(duì)特殊場(chǎng)景應(yīng)用提供了全新的實(shí)現(xiàn)方式，比如聊天、股票交易、游戲等對(duì)對(duì)實(shí)時(shí)性要求較高的行業(yè)領(lǐng)域。

背景

在瀏覽器中通過http僅能實(shí)現(xiàn)單向的通信,comet可以一定程度上模擬雙向通信,但效率較低,并需要服務(wù)器有較好的支持; flash中的socket和xmlsocket可以實(shí)現(xiàn)真正的雙向通信,通過 flex ajax bridge,可以在javascript中使用這兩項(xiàng)功能. 可以預(yù)見,如果websocket一旦在瀏覽器中得到實(shí)現(xiàn),將會(huì)替代上面兩項(xiàng)技術(shù),得到廣泛的使用.面對(duì)這種狀況，HTML5定義了WebSocket協(xié)議，能更好的節(jié)省服務(wù)器資源和帶寬并達(dá)到實(shí)時(shí)通訊。目前各大主流瀏覽器都支持websocket，IE瀏覽器要IE10+

一、POM依賴

POM依賴，spring4.1.4.RELEASE，spring核心依賴請(qǐng)自行添加，下面是websocket相關(guān)jar

<dependency>      <groupId>javax.websocket</groupId>      <artifactId>javax.websocket-api</artifactId>      <version>1.0</version>      <scope>provided</scope>  </dependency>  <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-websocket</artifactId>      <version>4.1.4.RELEASE</version>  </dependency>

二、WebSocket入口

@Configuration  @EnableWebMvc  @EnableWebSocket  public class WebSocketConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer {      @Override      public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {          //允許連接的域,只能以http或https開頭          String[] allowsOrigins = {"http://www.xxx.com"};                   //WebIM WebSocket通道          registry.addHandler(chatWebSocketHandler(),"/           webSocketIMServer").setAllowedOrigins(allowsOrigins).addInterceptors(myInterceptor());          registry.addHandler(chatWebSocketHandler(), "/sockjs/w          ebSocketIMServer").setAllowedOrigins(allowsOrigins).addInterceptors(myInterceptor()).withSockJS();      }      @Bean      public ChatWebSocketHandler chatWebSocketHandler() {          return new ChatWebSocketHandler();      }      @Bean      public WebSocketHandshakeInterceptor myInterceptor(){          return new WebSocketHandshakeInterceptor();      }  }

1. 實(shí)現(xiàn)WebSocketConfigurer接口，重寫registerWebSocketHandlers方法，這是一個(gè)核心實(shí)現(xiàn)方法，配置websocket入口，允許訪問的域、注冊(cè)Handler、SockJs支持和攔截器。

2. registry.addHandler注冊(cè)和路由的功能，當(dāng)客戶端發(fā)起websocket連接，把/path交給對(duì)應(yīng)的handler處理，而不實(shí)現(xiàn)具體的業(yè)務(wù)邏輯，可以理解為收集和任務(wù)分發(fā)中心。

3. setAllowedOrigins(String[] domains),允許指定的域名或IP(含端口號(hào))建立長(zhǎng)連接，如果只允許自家域名訪問，這里輕松設(shè)置。如果不限時(shí)使用"*"號(hào)，如果指定了域名，則必須要以http或https開頭。

4. addInterceptors，顧名思義就是為handler添加攔截器，可以在調(diào)用handler前后加入我們自己的邏輯代碼。

5. spring websocket也支持STOMP協(xié)議，下回再分享。

三、攔截器實(shí)現(xiàn)

public class WebSocketHandshakeInterceptor implements HandshakeInterceptor {        @Override      public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map<String, Object                  > attributes) throws Exception {          if (request instanceof ServletServerHttpRequest) {              attributes.put("username",userName);          }          return true;      }        @Override      public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception exception) {        }  }

beforeHandshake，在調(diào)用handler前處理方法。常用在注冊(cè)用戶信息，綁定WebSocketSession，在handler里根據(jù)用戶信息獲取WebSocketSession發(fā)送消息。

四、Handler處理類

public class ChatWebSocketHandler extends TextWebSocketHandler{            private final static List<WebSocketSession> sessions = Collections.synchronizedList(new ArrayList<WebSocketSession>());      //接收文本消息，并發(fā)送出去      @Override      protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {          chatTextMessageHandler(message.getPayload());          super.handleTextMessage(session, message);      }      //連接建立后處理      @SuppressWarnings("unchecked")      @Override      public void afterConnectionEstablished(WebSocketSession session) throws Exception {          logger.debug("connect to the websocket chat success......");          sessions.add(session);          //處理離線消息      }      //拋出異常時(shí)處理      @Override      public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {          if(session.isOpen()){              session.close();          }          logger.debug("websocket chat connection closed......");          sessions.remove(session);      }      //連接關(guān)閉后處理      @Override      public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {          logger.debug("websocket chat connection closed......");          sessions.remove(session);      }        @Override      public boolean supportsPartialMessages() {          return false;      }  }

五、客戶端連接

var host = window.location.host;  var websocket;  if ('WebSocket' in window) {      websocket = new ReconnectingWebSocket("ws://"          + host + "/webSocketIMServer", null, {debug:true, maxReconnectAttempts:4});  } else if ('MozWebSocket' in window) {      websocket = new MozWebSocket("ws://" + host          + "/webSocketIMServer");  } else {      websocket = new SockJS("http://" + host              + "/sockjs/webSocketIMServer");  }  websocket.onopen = function(evnt) {      console.log("websocket連接上");  };  websocket.onmessage = function(evnt) {      messageHandler(evnt.data);  };  websocket.onerror = function(evnt) {      console.log("websocket錯(cuò)誤");  };  websocket.onclose = function(evnt) {      console.log("websocket關(guān)閉");  }

這里用到了ReconnectingWebSocket.js,對(duì)瀏覽器自帶websocket添加了擴(kuò)展，例如重連，連接超時(shí)時(shí)間，失敗重連間隔，嘗試連接最大次數(shù)等。
項(xiàng)目主頁:ReconnectingWebSocket