摘要：之前的項(xiàng)目中使用了，趁此機(jī)會(huì)將一些知識(shí)點(diǎn)及資料進(jìn)行整理總結(jié)。瀏覽器向服務(wù)端發(fā)送一個(gè)請(qǐng)求，通過(guò)報(bào)文頭部來(lái)表明需要從切換至協(xié)議。但這樣做的后果就是浪費(fèi)大量流量，對(duì)服務(wù)端造成了巨大壓力。需要注意的是和的前綴表示了和安全協(xié)議的連接。

之前的項(xiàng)目中使用了websocket、socketJS，趁此機(jī)會(huì)將一些知識(shí)點(diǎn)及資料進(jìn)行整理總結(jié)。正所謂溫故而知新~
本文源地址： http://lsxj615.com/2016/08/14...

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

websocket是在html5中提供了一種瀏覽器和服務(wù)器間進(jìn)行全雙工通訊的網(wǎng)絡(luò)技術(shù)。

瀏覽器向服務(wù)端發(fā)送一個(gè)請(qǐng)求，通過(guò)報(bào)文頭部Upgrade來(lái)表明需要從HTTP切換至Websocket協(xié)議。

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

如果服務(wù)端理解websocket協(xié)議，它也是通過(guò)報(bào)文Upgrade從HTTP轉(zhuǎn)換為Websocket協(xié)議。

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

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

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

定期查詢(xún)
每隔一個(gè)時(shí)間段就向服務(wù)器發(fā)送一個(gè)請(qǐng)求，請(qǐng)求服務(wù)器的最新數(shù)據(jù)再進(jìn)行更新。但這樣做的后果就是浪費(fèi)大量流量，對(duì)服務(wù)端造成了巨大壓力。

Comet
基于http長(zhǎng)連接的“服務(wù)器推”技術(shù)。客戶(hù)端與服務(wù)器端保持一個(gè)長(zhǎng)連接，只有客戶(hù)端需要的數(shù)據(jù)更新時(shí)，服務(wù)器才主動(dòng)將數(shù)據(jù)推送給客戶(hù)端。有兩種形式：

基于Ajax的長(zhǎng)輪詢(xún)（long-polling）方式
瀏覽器發(fā)出XMLHttpRequest請(qǐng)求，服務(wù)器端接收到請(qǐng)求后，會(huì)阻塞請(qǐng)求直到有數(shù)據(jù)或者超時(shí)才返回，瀏覽器在處理請(qǐng)求返回信息（超時(shí)或有效數(shù)據(jù)）后再次發(fā)出請(qǐng)求，重新建立連接。在此期間服務(wù)器端可能已經(jīng)有新的數(shù)據(jù)到達(dá)，服務(wù)器會(huì)選擇把數(shù)據(jù)保存，直到重新建立連接，瀏覽器會(huì)把所有數(shù)據(jù)一次性取回。

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

當(dāng)應(yīng)用程序有高吞吐量的需求，Comet的長(zhǎng)輪詢(xún)就不適合了。

SSE
SSE(服務(wù)端推送事件)是一種允許服務(wù)端向客戶(hù)端推送新數(shù)據(jù)的HTML5技術(shù)。與websocket相比，WebSocket相較SSE最大的優(yōu)勢(shì)在于它是雙向交流的，這意味向服務(wù)端發(fā)送數(shù)據(jù)就像從服務(wù)端接收數(shù)據(jù)一樣簡(jiǎn)單。用SSE時(shí)，一般通過(guò)一個(gè)獨(dú)立的Ajax請(qǐng)求從客戶(hù)端向服務(wù)端傳送數(shù)據(jù)。相對(duì)于WebSocket，這樣使用Ajax會(huì)增加開(kāi)銷(xiāo)，但也就多一點(diǎn)點(diǎn)而已。

相比于間斷的輪詢(xún)或長(zhǎng)輪詢(xún)來(lái)模擬全雙工連接的解決方式，Websocket極大的減少了不必要的網(wǎng)絡(luò)流量和延遲。除此之外，Websocket-based的應(yīng)用減輕了服務(wù)器的負(fù)擔(dān)，讓現(xiàn)有的機(jī)器能支持更多的并發(fā)連接。如下圖所示：

【以下例子來(lái)源于http://www.websocket.org/abou...】
只需要?jiǎng)?chuàng)建一個(gè)新的Websocket實(shí)例，提供一個(gè)URL，這個(gè)URL表示的是你希望連接的那個(gè)end-point。如下所示。
需要注意的是: ws://和wss://的前綴表示了Websokcet和安全協(xié)議的Websocket連接。

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

在連接到一個(gè)端點(diǎn)發(fā)送消息之前，你可以將一系列的事件監(jiān)聽(tīng)器來(lái)處理連接的生命周期的每個(gè)階段。如下所示：

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

向服務(wù)端發(fā)送信息，只需要簡(jiǎn)單的send并提供你希望傳遞的內(nèi)容。發(fā)送信息后，close終止連接。如下所示：

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

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

可以看出IE8以及Android 4.3是不支持的。這個(gè)時(shí)候，我們就可以來(lái)看看socketJS的優(yōu)勢(shì)了。

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的一大好處在于提供了瀏覽器兼容性。優(yōu)先使用原生websocket，如果在不支持websocket的瀏覽器中，會(huì)自動(dòng)降為輪詢(xún)的方式。
除此之外，spring也對(duì)socketJS提供了支持。如果代碼中添加了withSockJS()如下，服務(wù)器也會(huì)自動(dòng)降級(jí)為輪詢(xún)。

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();

更多內(nèi)容，可查看github地址：https://github.com/sockjs/soc...

通過(guò)以上部分我們可以知道websocket的優(yōu)勢(shì)，兼容性的問(wèn)題socketJS也幫我們解決了。不過(guò)這個(gè)時(shí)候，我還要安利一個(gè)好東西，也就是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.

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

參考資料：

Spring WebSocket教程（一）

WebSocket詳解（一）：初步認(rèn)識(shí)WebSocket技術(shù)

STOMP Over WebSocket

sockjs/sockjs-client

Spring websocket 使用

Web端即時(shí)通訊技術(shù)盤(pán)點(diǎn)：短輪詢(xún)、Comet、Websocket、SSE

websocket官網(wǎng)About HTML5 WebSocket