基於 SockJS 的 WebSocket

在學習 《Spring實戰》 第18章的時候才知道，原來在不支援WebSocket的情況下，也可以很簡單地實現WebSocket的功能的，方法就是使用 SockJS。它會優先選擇WebSocket進行連線，但是當伺服器或客戶端不支援WebSocket時，會自動在 XHR流、XDR流、iFrame事件源、iFrame HTML檔案、XHR輪詢、XDR輪詢、iFrame XHR輪詢、JSONP輪詢 這幾個方案中擇優進行連線。

幸運的是，我們不需要知道這些方案都代表什麼，只需要簡單地設定就可以使用了。

服務端

在啟動WebSocket的配置中，你需要做的所有事情就是加上 withSockJS()

@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry webSocketHandlerRegistry) {
    // withSockJS 宣告啟用支援 sockJS
    webSocketHandlerRegistry.addHandler(marcoHandler(), "/echo").withSockJS();
}

客戶端

在客戶端需要引入SockJS庫，然後把 new WebSocket(url); 替換成 new SockJS(url);

SockJS類和WebSocket類是相容的，所以可以直接替換

<script type="text/javascript" src="/resources/js/sockjs-1.0.0.min.js"></script>
var sock = new SockJS(url);

需要做的事情就是這麼多

效果展示

支援WebSocket

當瀏覽器和伺服器都支援 websocket 的時候，直接使用websocket連線

不支援WebSocket

不支援WebSocket的場景有：

1. 瀏覽器不支援
2. Web容器不支援，如tomcat7以前的版本不支援WebSocket
3. 防火牆不允許
4. Nginx沒有開啟WebSocket支援

當遇到不支援WebSocket的情況時，SockJS會嘗試使用其他的方案來連線，剛開始開啟的時候因為需要嘗試各種方案，所以會阻塞一會兒，之後可以看到連線有異常，那就是嘗試失敗的情況。

為了測試，我使用Nginx做反向代理，把www.test.com指到專案啟動的埠上，然後本地配HOST來達到模擬真實場景的效果。因為Nginx預設是不支援WebSocket的，所以這裡模擬出了伺服器不支援WebSocket的場景。

完整例項

完整的例項已經上傳到GitHub上，你可以檢視。如果對你有幫助，記得 Star 哦！