摘要：之前的項目中使用了，趁此機會將一些知識點及資料進行整理總結。瀏覽器向服務端發送一個請求，通過報文頭部來表明需要從切換至協議。但這樣做的后果就是浪費大量流量，對服務端造成了巨大壓力。需要注意的是和的前綴表示了和安全協議的連接。

之前的項目中使用了websocket、socketJS，趁此機會將一些知識點及資料進行整理總結。正所謂溫故而知新~
本文源地址： http://lsxj615.com/2016/08/14...

按照慣例，在使用之前，先了解一下概念。

websocket是在html5中提供了一種瀏覽器和服務器間進行全雙工通訊的網絡技術。

瀏覽器向服務端發送一個請求，通過報文頭部Upgrade來表明需要從HTTP切換至Websocket協議。

GET ws://echo.websocket.org/?encoding=text HTTP/1.1
Origin: http://websocket.org
Cookie: __utma=99as
Connection: Upgrade
Host: echo.websocket.org
Sec-WebSocket-Key: uRovscZjNol/umbTt5uKmw==
Upgrade: websocket
Sec-WebSocket-Version: 13

如果服務端理解websocket協議，它也是通過報文Upgrade從HTTP轉換為Websocket協議。

HTTP/1.1 101 WebSocket Protocol Handshake
Date: Fri, 10 Feb 2012 17:38:18 GMT
Connection: Upgrade
Server: Kaazing Gateway
Upgrade: WebSocket
Access-Control-Allow-Origin: http://websocket.org
Access-Control-Allow-Credentials: true
Sec-WebSocket-Accept: rLHCkw/SKsO9GAH/ZSFhBATDKrU=
Access-Control-Allow-Headers: content-type

這個時候就建立起了websocket連接，基于TCP/IP。使用端口與HTTP(80)和HTTPS(443)一樣。

知道了什么是websocket，那么為什么要使用websocket呢？除了websocket之外，瀏覽器進行即時通信的方式還有以下幾種：

定期查詢
每隔一個時間段就向服務器發送一個請求，請求服務器的最新數據再進行更新。但這樣做的后果就是浪費大量流量，對服務端造成了巨大壓力。

Comet
基于http長連接的“服務器推”技術。客戶端與服務器端保持一個長連接，只有客戶端需要的數據更新時，服務器才主動將數據推送給客戶端。有兩種形式：

基于Ajax的長輪詢（long-polling）方式
瀏覽器發出XMLHttpRequest請求，服務器端接收到請求后，會阻塞請求直到有數據或者超時才返回，瀏覽器在處理請求返回信息（超時或有效數據）后再次發出請求，重新建立連接。在此期間服務器端可能已經有新的數據到達，服務器會選擇把數據保存，直到重新建立連接，瀏覽器會把所有數據一次性取回。

基于Iframe及htmlfile的流（http streaming）方式
通常的做法是在頁面中嵌入一個隱藏的iframe,然后讓這個iframe的src屬性指向我們請求的一個服務端地址，并且為了數據更新，我們將頁面上數據更新操作封裝為一個js函數，將函數名當做參數傳遞到這個地址當中。服務端收到請求后解析地址取出參數（客戶端js函數調用名），每當有數據更新的時候，返回對客戶端函數的調用，并且將要跟新的數據以js函數的參數填入到返回內容當中，例如返回“”這樣一個字符串，意味著以data為參數調用客戶端update函數進行客戶端view更新。

當應用程序有高吞吐量的需求，Comet的長輪詢就不適合了。

SSE
SSE(服務端推送事件)是一種允許服務端向客戶端推送新數據的HTML5技術。與websocket相比，WebSocket相較SSE最大的優勢在于它是雙向交流的，這意味向服務端發送數據就像從服務端接收數據一樣簡單。用SSE時，一般通過一個獨立的Ajax請求從客戶端向服務端傳送數據。相對于WebSocket，這樣使用Ajax會增加開銷，但也就多一點點而已。

相比于間斷的輪詢或長輪詢來模擬全雙工連接的解決方式，Websocket極大的減少了不必要的網絡流量和延遲。除此之外，Websocket-based的應用減輕了服務器的負擔，讓現有的機器能支持更多的并發連接。如下圖所示：

【以下例子來源于http://www.websocket.org/abou...】
只需要創建一個新的Websocket實例，提供一個URL，這個URL表示的是你希望連接的那個end-point。如下所示。
需要注意的是: ws://和wss://的前綴表示了Websokcet和安全協議的Websocket連接。

var myWebsocket = new Websocket("ws://www.websocket.org");

在連接到一個端點發送消息之前，你可以將一系列的事件監聽器來處理連接的生命周期的每個階段。如下所示：

myWebSocket.onopen = function(evt) { 
    alert("Connection open ..."); 
};
myWebSocket.onmessage = function(evt) { 
    alert( "Received Message: " + evt.data); 
};
myWebSocket.onclose = function(evt) { 
    alert("Connection closed."); 
};

向服務端發送信息，只需要簡單的send并提供你希望傳遞的內容。發送信息后，close終止連接。如下所示：

myWebSocket.send("Hello WebSockets!");
myWebSocket.close();

我們都知道，webscoket是HTML5的新玩意，那么兼容性方面，如下圖所示：

可以看出IE8以及Android 4.3是不支持的。這個時候，我們就可以來看看socketJS的優勢了。

SockJS is a browser JavaScript library that provides a WebSocket-like object. SockJS gives you a coherent, cross-browser, Javascript API which creates a low latency, full duplex, cross-domain communication channel between the browser and the web server.

socketJS的一大好處在于提供了瀏覽器兼容性。優先使用原生websocket，如果在不支持websocket的瀏覽器中，會自動降為輪詢的方式。
除此之外，spring也對socketJS提供了支持。如果代碼中添加了withSockJS()如下，服務器也會自動降級為輪詢。

registry.addEndpoint("/coordination").withSockJS();  

var sock = new SockJS("/coordination");  
sock.onopen = function() {
    console.log("open");
};
sock.onmessage = function(e) {
    console.log("message", e.data);
};
sock.onclose = function() {
    console.log("close");
};
sock.send("test");
sock.close();

更多內容，可查看github地址：https://github.com/sockjs/soc...

通過以上部分我們可以知道websocket的優勢，兼容性的問題socketJS也幫我們解決了。不過這個時候，我還要安利一個好東西，也就是Stomp。

STOMP is a simple text-orientated messaging protocol. It defines an interoperable wire format so that any of the available STOMP clients can communicate with any STOMP message broker to provide easy and widespread messaging interoperability among languages and platforms (the STOMP web site has a list of STOMP client and server implementations.

具體內容，可查看官網：http://jmesnil.net/stomp-webs...?；蛘叩任蚁乱黄恼略斦劙蓗

參考資料：

Spring WebSocket教程（一）

WebSocket詳解（一）：初步認識WebSocket技術

STOMP Over WebSocket

sockjs/sockjs-client

Spring websocket 使用

Web端即時通訊技術盤點：短輪詢、Comet、Websocket、SSE

websocket官網About HTML5 WebSocket