參考路徑:https://www.cnblogs.com/zhjh256/p/6052102.html

spring通過兩種模式支援websocket，一種是通過原生websocket規範的ws://協議訪問（個人認為如果確定只用標準websocket訪問，還不如tomcat升級到8.x（tomcat 8原生支援JSR 356註解），spring的大量封裝畢竟增加了不少額外負載）；另一種則是通過sockjs（也就是js）訪問，兩者目前暫時無法做到相容。


先完整說明第一種：


1、搭建spring mvc環境，這一點假設讀者已知；


2、pom.xml中引入上面兩個jar包；


3、spring支援websocket總共分為四個小步驟，handler、interceptor、config、web.xml，基本上可以認為spring mvc的翻版。


3.1、建立WebSocketHandler，spring支援兩種方式，一種是實現org.springframework.web.socket.WebSocketHandler介面，另外一種則是繼承TextWebSocketHandler或BinaryWebSocketHandler（現在大部分模板式框架或者外掛通常都是在提供了API的基礎上提供了抽象類，把一些能統一的工作提前預置了，以便應用只需要關心業務，我們自己公司的中介軟體框架很多也是用這個模式實現了）。


複製程式碼
/**
 * 
 */
package com.ld.net.spider.demo.ws;


/**
 * @author

[email protected]
 * {@link} http://www.cnblogs.com/zhjh256
 */
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.WebSocketMessage;
import org.springframework.web.socket.WebSocketSession;


public class DemoWSHandler implements WebSocketHandler {  
  
    @Override  
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {  
        System.out.println("connect to the websocket success......");  
        session.sendMessage(new TextMessage("Server:connected OK!"));  
    }  
  
    @Override  
    public void handleMessage(WebSocketSession wss, WebSocketMessage<?> wsm) throws Exception {  
        TextMessage returnMessage = new TextMessage(wsm.getPayload()  
                + " received at server");  
        System.out.println(wss.getHandshakeHeaders().getFirst("Cookie"));  
        wss.sendMessage(returnMessage);  
    }  
  
    @Override
    public void handleTransportError(WebSocketSession wss, Throwable thrwbl) throws Exception {  
        if(wss.isOpen()){  
            wss.close();  
        }  
       System.out.println("websocket connection closed......");  
    }  
  
    @Override  
    public void afterConnectionClosed(WebSocketSession wss, CloseStatus cs) throws Exception {  
        System.out.println("websocket connection closed......");  
    }  
  
    @Override  
    public boolean supportsPartialMessages() {  
        return false;  
    }
}
複製程式碼
3.2、建立攔截器


複製程式碼
/**
 * 
 */
package com.ld.net.spider.demo.ws;


import java.util.Map;


import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;


/**
 * @author

[email protected] 
 * {@link} http://www.cnblogs.com/zhjh256
 */
public class HandshakeInterceptor extends HttpSessionHandshakeInterceptor {


    @Override
    public boolean beforeHandshake(ServerHttpRequest request,
            ServerHttpResponse response, WebSocketHandler wsHandler,
            Map<String, Object> attributes) throws Exception {


        // 解決The extension [x-webkit-deflate-frame] is not supported問題
        if (request.getHeaders().containsKey("Sec-WebSocket-Extensions")) {
            request.getHeaders().set("Sec-WebSocket-Extensions",
                    "permessage-deflate");
        }


        System.out.println("Before Handshake");
        return super.beforeHandshake(request, response, wsHandler, attributes);
    }


    @Override
    public void afterHandshake(ServerHttpRequest request,
            ServerHttpResponse response, WebSocketHandler wsHandler,
            Exception ex) {
        System.out.println("After Handshake");
        super.afterHandshake(request, response, wsHandler, ex);
    }
}
複製程式碼
3.3、bean配置


複製程式碼
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:mongo="http://www.springframework.org/schema/data/mongo"
xmlns:cache="http://www.springframework.org/schema/cache"
xmlns:c="http://www.springframework.org/schema/c"
xmlns:amq="http://activemq.apache.org/schema/core"
xmlns:websocket="http://www.springframework.org/schema/websocket"
xmlns:jms="http://www.springframework.org/schema/jms"
xmlns:util="http://www.springframework.org/schema/util"   
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/websocket
http://www.springframework.org/schema/websocket/spring-websocket.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/data/mongo       
http://www.springframework.org/schema/data/mongo/spring-mongo-1.0.xsd   
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/cache
http://www.springframework.org/schema/cache/spring-cache.xsd
http://activemq.apache.org/schema/core 
http://activemq.apache.org/schema/core/activemq-core.xsd
http://www.springframework.org/schema/jms 
http://www.springframework.org/schema/jms/spring-jms.xsd
http://www.springframework.org/schema/util
http://www.springframework.org/schema/util/spring-util.xsd">
    <websocket:handlers allowed-origins="*">
        <websocket:mapping path="/springws/websocket.ws" handler="demoWSHandler"/>
         <websocket:handshake-interceptors>
            <bean class="com.ld.net.spider.demo.ws.HandshakeInterceptor"/>
        </websocket:handshake-interceptors>
    </websocket:handlers>


    <bean id="demoWSHandler" class="com.ld.net.spider.demo.ws.DemoWSHandler"/>
複製程式碼
上述需要注意的是，1、spring javadoc的說明是預設情況下，允許所有來源訪問，但我們跑下來發現不配置allowed-origins的話總是報403錯誤。


2、sockjs是不允許有後綴的，否則將無法匹配，後面會專門講到。


3.4、web.xml配置


在web.xml中增加*.ws對映即可（如果原來不是/*的話），如下：


    <servlet-mapping>
        <servlet-name>springMVC</servlet-name>
        <url-pattern>*.ws</url-pattern>
    </servlet-mapping>
上述配置完成之後，就可以通過標準的websocket介面進行訪問了，如下所示。


4、websocket客戶端


複製程式碼
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Web Socket JavaScript Echo Client</title>
  <script src="http://cdn.jsdelivr.net/sockjs/1/sockjs.min.js"></script>
  <script language="javascript" type="text/javascript">
    var echo_websocket;
    function init() {
      output = document.getElementById("output");
    }


    function send_echo() {
      var wsUri = "ws://localhost:28080/springws/websocket.ws";
      writeToScreen("Connecting to " + wsUri);
      echo_websocket = new WebSocket(wsUri);
      echo_websocket.onopen = function (evt) {
        writeToScreen("Connected !");
        doSend(textID.value);
      };
      echo_websocket.onmessage = function (evt) {
        writeToScreen("Received message: " + evt.data);
        echo_websocket.close();
      };
      echo_websocket.onerror = function (evt) {
        writeToScreen('<span style="color: red;">ERROR:</span> '
          + evt.data);
        echo_websocket.close();
      };
    }
    function doSend(message) {
      echo_websocket.send(message);
      writeToScreen("Sent message: " + message);
    }
    function writeToScreen(message) {
      var pre = document.createElement("p");
      pre.style.wordWrap = "break-word";
      pre.innerHTML = message;
      output.appendChild(pre);
    }
    window.addEventListener("load", init, false);
  </script>
</head>
<body>
<h1>Echo Server</h1>
<div style="text-align: left;">
  <form action="">
    <input onclick="send_echo()" value="傳送socket請求" type="button">
    <input id="textID" name="message" value="Hello World, Web Sockets" type="text">
    <br>
  </form>
</div>
<div id="output"></div>
</body>
</html>
複製程式碼
上述前後端均配置完成後，基於標準websocket api的搭建就完成了，試試吧。。


現在再來看下sockjs的配置。


spring對sockjs和websocket支援的差別在於配置，web.xml，以及客戶端，服務實現無差別。


3.3需要調整為如下：


複製程式碼
    <websocket:handlers>
        <websocket:mapping path="/springws/websocket" handler="demoWSHandler"/>
         <websocket:handshake-interceptors>
            <bean class="com.ld.net.spider.demo.ws.HandshakeInterceptor"/>
        </websocket:handshake-interceptors>
        <websocket:sockjs/>
    </websocket:handlers>


    <bean id="demoWSHandler" class="com.ld.net.spider.demo.ws.DemoWSHandler"/>
複製程式碼
3.4 一定要有到/xxx/*的對映，簡單的可以直接/*，如下所示：


    <servlet-mapping>
        <servlet-name>springMVC</servlet-name>
        <url-pattern>/*</url-pattern>
    </servlet-mapping>
上述配置完成後，就sockjs直接性的支援而言，就可以沒有問題了。


客戶端則為如下：


複製程式碼
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Web Socket JavaScript Echo Client</title>
  <script src="http://cdn.jsdelivr.net/sockjs/1/sockjs.min.js"></script>
  <script language="javascript" type="text/javascript">
    var echo_websocket;
    function init() {
      output = document.getElementById("output");
    }
    function send_echo() {
      echo_websocket = new SockJS("http://localhost:28080/springws/websocket") ;   //初始化 websocket


      echo_websocket.onopen = function () {
        console.log('Info: connection opened.');
      };


      echo_websocket.onmessage = function (event) {
        console.log('Received: ' + event.data); //處理服務端返回訊息
      };


      echo_websocket.onclose = function (event) {
        console.log('Info: connection closed.');
        console.log(event);
      };


      ws.send("abcabc");
    }
    
    function doSend(message) {
      echo_websocket.send(message);
      writeToScreen("Sent message: " + message);
    }
    function writeToScreen(message) {
      var pre = document.createElement("p");
      pre.style.wordWrap = "break-word";
      pre.innerHTML = message;
      output.appendChild(pre);
    }
    window.addEventListener("load", init, false);
  </script>
</head>
<body>
<h1>Echo Server</h1>
<div style="text-align: left;">
  <form action="">
    <input onclick="send_echo()" value="send websocket request" type="button">
    <input id="textID" name="message" value="Hello world, Web Sockets" type="text">
    <br>
  </form>
</div>
<div id="output"></div>
</body>
</html>
複製程式碼
上述配置完成後，如果訪問沒有CORS異常的話，基於sockjs的websocket就完成了。試試吧。。。


典型錯誤及原因、解決方法如下：


Error during WebSocket handshake: Unexpected response code: 404
檢查web.xml servlet-mapping包含了到websocket路徑的對映，比如如果請求不含字尾，就必須包含/*的對映


 


WebSocket connection to 'ws://localhost:8080/springwebsocket/websocket' failed: Error during WebSocket handshake: Unexpected response code: 403
<websocket:handlers allowed-origins="*">,javadoc說明預設代表所有站點,實際好像並不是,所以需要配置*


 


sockjs啟用
啟用sockjs後，直接用websocket協議訪問會報
html5ws.html:15 WebSocket connection to 'ws://localhost:28080/springws/websocket.ws' failed: Error during WebSocket handshake: Unexpected response code: 200


 


直接改為sockjs後，會報
XMLHttpRequest cannot load http://localhost:28080/springws/websocket.ws/info?t=1478758042205. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. The response had HTTP status code 404.
需要在web.xml中配置CORS過濾（注意，如果apache有自帶的類庫，建議直接使用，不要隨意聽信網上的自己實現過濾器的搞法，這些庫一天的執行次數可能就比自己寫的執行到淘汰還多，所以幾乎常見的問題都不可能遺漏）：


複製程式碼
    <filter>
        <filter-name>CorsFilter</filter-name>
        <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
        <init-param>
            <param-name>cors.allowed.methods</param-name>
            <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
        </init-param>
        <init-param>
            <param-name>cors.allowed.headers</param-name>
            <!--注意，若你的應用中不只有這些檔案頭，則需要將你應用中需要傳的檔案頭也加上； 例如：我的應用中需要在header中傳token，所以這裡的值就應該是下面的配置，在原有基礎上將token加上，否則，應用就不會被允許呼叫 
                <param-value>token,Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value> -->
            <param-value>Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
        </init-param>
        <async-supported>true</async-supported>
    </filter>
    <filter-mapping>
        <filter-name>CorsFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
複製程式碼
使用sockjs還有一點需要注意的是：
因為sockjs會自動在url之後增加/info?t=XXXX等路徑，如果這裡url-pattern攔截類似於*.ws這種帶字尾的就找不到對映,比如想通過sockjs訪問地址/springws/websocket.ws，但是sockjs框架會先訪問/springws/websocket.ws/info這個地址，但是這個地址又不可被spring框架識別，所以導致不可用。


到此為止，tomcat 7下spring 4.x mvc整合websocket以及sockjs的配置就全部介紹完成。


今天看群裡一個訊息的時候，提到HA時一臺伺服器掛掉的問題，這就回到socket的思路了，客戶端也得加上個定時的心跳邏輯，萬一某臺伺服器掛了或者斷網可以failover並自動重新建立連線。在我們的業務中，可靠性這一點是很關鍵的。


預設情況下，ws://走的時候http協議，即使主頁面是通過https訪問，此時會出現連線時異常"[blocked] The page at 'https://localhost:8443/endpoint-wss/index.jsp' was loaded over HTTPS, but ran insecure content from 'ws://localhost:8080/endpoint-wss/websocket': this content should also be loaded over HTTPS.Uncaught SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS."，此時需要使用如下連線：


websocket:wss://localhost:8080/endpoint-wss/websocket


sockJS:https://localhost:8080/endpoint-wss/socketJS


 


配置nginx支援websocket，預設情況下，nginx不支援自動升級至websocket協議，否則js中會出現連線時異常"Error during WebSocket handshake: Unexpected response code: 400"，需在恰當的位置加上如下設定：


server {
    listen 8020;
    location / {
        proxy_pass http://websocket;
        proxy_set_header Host $host:8020; #注意, 原host必須配置, 否則傳遞給後臺的值是websocket,埠如果沒有輸入的話會是80, 這會導致連線失敗
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }
}
upstream websocket {
    server 192.168.100.10:8081;
}


經上述調整後，websocket就可以同時支援通過nginx代理的https協議，結合MQ機制，可以做到B端實時推送、B端/C端實時通訊。
nginx的https（自動跳轉http->https）+nginx+websocket的完整配置可參考http://www.cnblogs.com/zhjh256/p/6262620.html