websocket資料總結

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

websocket是什麼

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

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呢？除了websocket以外，瀏覽器進行即時通訊的方式還有如下幾種：

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

• Comet
  基於http長鏈接的「服務器推」技術。客戶端與服務器端保持一個長鏈接，只有客戶端須要的數據更新時，服務器才主動將數據推送給客戶端。有兩種形式：

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

  • 基於Iframe及htmlfile的流（http streaming）方式
    一般的作法是在頁面中嵌入一個隱藏的iframe,而後讓這個iframe的src屬性指向咱們請求的一個服務端地址，而且爲了數據更新，咱們將頁面上數據更新操做封裝爲一個js函數，將函數名當作參數傳遞到這個地址當中。服務端收到請求後解析地址取出參數（客戶端js函數調用名），每當有數據更新的時候，返回對客戶端函數的調用，而且將要跟新的數據以js函數的參數填入到返回內容當中，例如返回「<script type="text/javascript">update("data")</script>」這樣一個字符串，意味着以data爲參數調用客戶端update函數進行客戶端view更新。

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

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

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

如何使用websocket

【如下例子來源於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();

socketJS

咱們都知道，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();

如何使用socketJS

<script src="//cdn.jsdelivr.net/sockjs/1.0.0/sockjs.min.js"></script>

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...

什麼是Stomp

經過以上部分咱們能夠知道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...。或者等我下一篇文章詳談吧~

參考資料：

1. Spring WebSocket教程（一）

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

3. STOMP Over WebSocket

4. sockjs/sockjs-client

5. Spring websocket 使用

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

7. websocket官網About HTML5 WebSocket