WebSocket一篇就夠了

WebSocket protocol 是HTML5一種新的協(xié)議。它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信(full-duplex)。一開(kāi)始的握手需要借助HTTP請(qǐng)求完成。

——百度百科

目的：即時(shí)通訊，替代輪詢

網(wǎng)站上的即時(shí)通訊是很常見(jiàn)的，比如網(wǎng)頁(yè)的QQ，聊天系統(tǒng)等。按照以往的技術(shù)能力通常是采用輪詢、Comet技術(shù)解決。

HTTP協(xié)議是非持久化的，單向的網(wǎng)絡(luò)協(xié)議，在建立連接后只允許瀏覽器向服務(wù)器發(fā)出請(qǐng)求后，服務(wù)器才能返回相應(yīng)的數(shù)據(jù)。當(dāng)需要即時(shí)通訊時(shí)，通過(guò)輪詢?cè)谔囟ǖ臅r(shí)間間隔（如1秒），由瀏覽器向服務(wù)器發(fā)送Request請(qǐng)求，然后將最新的數(shù)據(jù)返回給瀏覽器。這樣的方法最明顯的缺點(diǎn)就是需要不斷的發(fā)送請(qǐng)求，而且通常HTTP request的Header是非常長(zhǎng)的，為了傳輸一個(gè)很小的數(shù)據(jù) 需要付出巨大的代價(jià)，是很不合算的，占用了很多的寬帶。

缺點(diǎn)：會(huì)導(dǎo)致過(guò)多不必要的請(qǐng)求，浪費(fèi)流量和服務(wù)器資源，每一次請(qǐng)求、應(yīng)答，都浪費(fèi)了一定流量在相同的頭部信息上

然而WebSocket的出現(xiàn)可以彌補(bǔ)這一缺點(diǎn)。在WebSocket中，只需要服務(wù)器和瀏覽器通過(guò)HTTP協(xié)議進(jìn)行一個(gè)握手的動(dòng)作，然后單獨(dú)建立一條TCP的通信通道進(jìn)行數(shù)據(jù)的傳送。

原理

WebSocket同HTTP一樣也是應(yīng)用層的協(xié)議，但是它是一種雙向通信協(xié)議，是建立在TCP之上的。

連接過(guò)程 —— 握手過(guò)程

1. 瀏覽器、服務(wù)器建立TCP連接，三次握手。這是通信的基礎(chǔ)，傳輸控制層，若失敗后續(xù)都不執(zhí)行。
   
   
2. TCP連接成功后，瀏覽器通過(guò)HTTP協(xié)議向服務(wù)器傳送WebSocket支持的版本號(hào)等信息。（開(kāi)始前的HTTP握手）
   
   
3. 服務(wù)器收到客戶端的握手請(qǐng)求后，同樣采用HTTP協(xié)議回饋數(shù)據(jù)。
   
   
4. 當(dāng)收到了連接成功的消息后，通過(guò)TCP通道進(jìn)行傳輸通信。

WebSocket與HTTP的關(guān)系

相同點(diǎn)

1. 都是一樣基于TCP的，都是可靠性傳輸協(xié)議。
   
   
2. 都是應(yīng)用層協(xié)議。

不同點(diǎn)

1. WebSocket是雙向通信協(xié)議，模擬Socket協(xié)議，可以雙向發(fā)送或接受信息。HTTP是單向的。
   
   
2. WebSocket是需要握手進(jìn)行建立連接的。

聯(lián)系

WebSocket在建立握手時(shí)，數(shù)據(jù)是通過(guò)HTTP傳輸?shù)摹５墙⒅螅谡嬲齻鬏敃r(shí)候是不需要HTTP協(xié)議的。

WebSocket與Socket的關(guān)系

Socket其實(shí)并不是一個(gè)協(xié)議，而是為了方便使用TCP或UDP而抽象出來(lái)的一層，是位于應(yīng)用層和傳輸控制層之間的一組接口。

Socket是應(yīng)用層與TCP/IP協(xié)議族通信的中間軟件抽象層，它是一組接口。在設(shè)計(jì)模式中，Socket其實(shí)就是一個(gè)門面模式，它把復(fù)雜的TCP/IP協(xié)議族隱藏在Socket接口后面，對(duì)用戶來(lái)說(shuō)，一組簡(jiǎn)單的接口就是全部，讓Socket去組織數(shù)據(jù)，以符合指定的協(xié)議。

當(dāng)兩臺(tái)主機(jī)通信時(shí)，必須通過(guò)Socket連接，Socket則利用TCP/IP協(xié)議建立TCP連接。TCP連接則更依靠于底層的IP協(xié)議，IP協(xié)議的連接則依賴于鏈路層等更低層次。

WebSocket則是一個(gè)典型的應(yīng)用層協(xié)議。

區(qū)別

Socket是傳輸控制層協(xié)議，WebSocket是應(yīng)用層協(xié)議。

HTML5與WebSocket的關(guān)系

WebSocket API 是 HTML5 標(biāo)準(zhǔn)的一部分， 但這并不代表 WebSocket 一定要用在 HTML 中，或者只能在基于瀏覽器的應(yīng)用程序中使用。

實(shí)際上，許多語(yǔ)言、框架和服務(wù)器都提供了 WebSocket 支持，例如：

• * 基于 C 的 libwebsocket.org
• * 基于 Node.js 的 Socket.io
• * 基于 Python 的 ws4py
• * 基于 C++ 的 WebSocket++
• * Apache 對(duì) WebSocket 的支持：Apache Module mod_proxy_wstunnel
• * Nginx 對(duì) WebSockets 的支持：NGINX as a WebSockets Proxy 、 NGINX Announces Support for WebSocket Protocol 、WebSocket proxying
• * lighttpd 對(duì) WebSocket 的支持：mod_websocket

WebSocket 機(jī)制

以下簡(jiǎn)要介紹一下 WebSocket 的原理及運(yùn)行機(jī)制。

WebSocket 是 HTML5 一種新的協(xié)議。它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信，能更好的節(jié)省服務(wù)器資源和帶寬并達(dá)到實(shí)時(shí)通訊，它建立在 TCP 之上，同 HTTP 一樣通過(guò) TCP 來(lái)傳輸數(shù)據(jù)，但是它和 HTTP 最大不同是：

• WebSocket 是一種雙向通信協(xié)議，在建立連接后，WebSocket 服務(wù)器和 Browser/Client Agent 都能主動(dòng)的向?qū)Ψ桨l(fā)送或接收數(shù)據(jù)，就像 Socket 一樣；
• WebSocket 需要類似 TCP 的客戶端和服務(wù)器端通過(guò)握手連接，連接成功后才能相互通信。

非 WebSocket 模式傳統(tǒng) HTTP 客戶端與服務(wù)器的交互如下圖所示：

圖 1. 傳統(tǒng) HTTP 請(qǐng)求響應(yīng)客戶端服務(wù)器交互圖

使用 WebSocket 模式客戶端與服務(wù)器的交互如下圖：

圖 2.WebSocket 請(qǐng)求響應(yīng)客戶端服務(wù)器交互圖

上圖對(duì)比可以看出，相對(duì)于傳統(tǒng) HTTP 每次請(qǐng)求-應(yīng)答都需要客戶端與服務(wù)端建立連接的模式，WebSocket 是類似 Socket 的 TCP 長(zhǎng)連接的通訊模式，一旦 WebSocket 連接建立后，后續(xù)數(shù)據(jù)都以幀序列的形式傳輸。在客戶端斷開(kāi) WebSocket 連接或 Server 端斷掉連接前，不需要客戶端和服務(wù)端重新發(fā)起連接請(qǐng)求。在海量并發(fā)及客戶端與服務(wù)器交互負(fù)載流量大的情況下，極大的節(jié)省了網(wǎng)絡(luò)帶寬資源的消耗，有明顯的性能優(yōu)勢(shì)，且客戶端發(fā)送和接受消息是在同一個(gè)持久連接上發(fā)起，實(shí)時(shí)性優(yōu)勢(shì)明顯。

我們?cè)偻ㄟ^(guò)客戶端和服務(wù)端交互的報(bào)文看一下 WebSocket 通訊與傳統(tǒng) HTTP 的不同：

在客戶端，new WebSocket 實(shí)例化一個(gè)新的 WebSocket 客戶端對(duì)象，連接類似 ws://yourdomain:port/path 的服務(wù)端 WebSocket URL，WebSocket 客戶端對(duì)象會(huì)自動(dòng)解析并識(shí)別為 WebSocket 請(qǐng)求，從而連接服務(wù)端端口，執(zhí)行雙方握手過(guò)程，客戶端發(fā)送數(shù)據(jù)格式類似：

清單 1.WebSocket 客戶端連接報(bào)文

GET?/webfin/websocket/?HTTP/1.1
Host:?localhost
Upgrade:?websocket
Connection:?Upgrade
Sec-WebSocket-Key:?xqBt3ImNzJbYqRINxEFlkg==
Origin:?http://localhost:8080
Sec-WebSocket-Version:?13

可以看到，客戶端發(fā)起的 WebSocket 連接報(bào)文類似傳統(tǒng) HTTP 報(bào)文，”Upgrade：websocket”參數(shù)值表明這是 WebSocket 類型請(qǐng)求，“Sec-WebSocket-Key”是 WebSocket 客戶端發(fā)送的一個(gè) base64 編碼的密文，要求服務(wù)端必須返回一個(gè)對(duì)應(yīng)加密的“Sec-WebSocket-Accept”應(yīng)答，否則客戶端會(huì)拋出“Error during WebSocket handshake”錯(cuò)誤，并關(guān)閉連接。

服務(wù)端收到報(bào)文后返回的數(shù)據(jù)格式類似：

清單 2.WebSocket 服務(wù)端響應(yīng)報(bào)文

HTTP/1.1?101?Switching?Protocols
Upgrade:?websocket
Connection:?Upgrade
Sec-WebSocket-Accept:?K7DJLdLooIwIG/MOpvWFB3y3FE8=

“Sec-WebSocket-Accept”的值是服務(wù)端采用與客戶端一致的密鑰計(jì)算出來(lái)后返回客戶端的,“HTTP/1.1 101 Switching Protocols”表示服務(wù)端接受 WebSocket 協(xié)議的客戶端連接，經(jīng)過(guò)這樣的請(qǐng)求-響應(yīng)處理后，客戶端服務(wù)端的 WebSocket 連接握手成功, 后續(xù)就可以進(jìn)行 TCP 通訊了。

在開(kāi)發(fā)方面，WebSocket API 也十分簡(jiǎn)單，我們只需要實(shí)例化 WebSocket，創(chuàng)建連接，然后服務(wù)端和客戶端就可以相互發(fā)送和響應(yīng)消息，在下文 WebSocket 實(shí)現(xiàn)及案例分析部分，可以看到詳細(xì)的 WebSocket API 及代碼實(shí)現(xiàn)。

WebSocket 實(shí)現(xiàn)

如上文所述，WebSocket 的實(shí)現(xiàn)分為客戶端和服務(wù)端兩部分，客戶端（通常為瀏覽器）發(fā)出 WebSocket 連接請(qǐng)求，服務(wù)端響應(yīng)，實(shí)現(xiàn)類似 TCP 握手的動(dòng)作，從而在瀏覽器客戶端和 WebSocket 服務(wù)端之間形成一條 HTTP 長(zhǎng)連接快速通道。兩者之間后續(xù)進(jìn)行直接的數(shù)據(jù)互相傳送，不再需要發(fā)起連接和相應(yīng)。

以下簡(jiǎn)要描述 WebSocket 服務(wù)端 API 及客戶端 API。

WebSocket 服務(wù)端 API

WebSocket 服務(wù)端在各個(gè)主流應(yīng)用服務(wù)器廠商中已基本獲得符合 JEE JSR356 標(biāo)準(zhǔn)規(guī)范 API 的支持，以下列舉了部分常見(jiàn)的商用及開(kāi)源應(yīng)用服務(wù)器對(duì) WebSocket Server 端的支持情況：

表 1.WebSocket 服務(wù)端支持

以下我們使用 Tomcat7.0.5 版本的服務(wù)端示例代碼說(shuō)明 WebSocket 服務(wù)端的實(shí)現(xiàn)：

JSR356 的 WebSocket 規(guī)范使用 javax.websocket.*的 API，可以將一個(gè)普通 Java 對(duì)象（POJO）使用 @ServerEndpoint 注釋作為 WebSocket 服務(wù)器的端點(diǎn)，代碼示例如下：

清單 3.WebSocket 服務(wù)端 API 示例

?@ServerEndpoint("/echo")
?public?class?EchoEndpoint?{

?@OnOpen
?public?void?onOpen(Session?session)?throws?IOException?{
?//以下代碼省略...
?}

?@OnMessage
?public?String?onMessage(String?message)?{
?//以下代碼省略...
?}

?@Message(maxMessageSize=6)
?public?void?receiveMessage(String?s)?{
?//以下代碼省略...
?}?

?@OnError
?public?void?onError(Throwable?t)?{
?//以下代碼省略...
?}

?@OnClose
?public?void?onClose(Session?session,?CloseReason?reason)?{
?//以下代碼省略...
?}?

?}

代碼解釋：

上文的簡(jiǎn)潔代碼即建立了一個(gè) WebSocket 的服務(wù)端，@ServerEndpoint(“/echo”) 的 annotation 注釋端點(diǎn)表示將 WebSocket 服務(wù)端運(yùn)行在 ws://[Server 端 IP 或域名]:[Server 端口]/websockets/echo 的訪問(wèn)端點(diǎn)，客戶端瀏覽器已經(jīng)可以對(duì) WebSocket 客戶端 API 發(fā)起 HTTP 長(zhǎng)連接了。

使用 ServerEndpoint 注釋的類必須有一個(gè)公共的無(wú)參數(shù)構(gòu)造函數(shù)，@onMessage 注解的 Java 方法用于接收傳入的 WebSocket 信息，這個(gè)信息可以是文本格式，也可以是二進(jìn)制格式。

OnOpen 在這個(gè)端點(diǎn)一個(gè)新的連接建立時(shí)被調(diào)用。參數(shù)提供了連接的另一端的更多細(xì)節(jié)。Session 表明兩個(gè) WebSocket 端點(diǎn)對(duì)話連接的另一端，可以理解為類似 HTTPSession 的概念。

OnClose 在連接被終止時(shí)調(diào)用。參數(shù) closeReason 可封裝更多細(xì)節(jié)，如為什么一個(gè) WebSocket 連接關(guān)閉。

更高級(jí)的定制如 @Message 注釋，MaxMessageSize 屬性可以被用來(lái)定義消息字節(jié)最大限制，在示例程序中，如果超過(guò) 6 個(gè)字節(jié)的信息被接收，就報(bào)告錯(cuò)誤和連接關(guān)閉。

注意：早期不同應(yīng)用服務(wù)器支持的 WebSocket 方式不盡相同，即使同一廠商，不同版本也有細(xì)微差別，如 Tomcat 服務(wù)器 7.0.5 以上的版本都是標(biāo)準(zhǔn) JSR356 規(guī)范實(shí)現(xiàn)，而 7.0.2x/7.0.3X 的版本使用自定義 API （WebSocketServlet 和 StreamInbound， 前者是一個(gè)容器，用來(lái)初始化 WebSocket 環(huán)境；后者是用來(lái)具體處理 WebSocket 請(qǐng)求和響應(yīng)，詳見(jiàn)案例分析部分），且 Tomcat7.0.3x 與 7.0.2x 的 createWebSocketInbound 方法的定義不同，增加了一個(gè) HttpServletRequest 參數(shù)，使得可以從 request 參數(shù)中獲取更多 WebSocket 客戶端的信息，如下代碼所示：

清單 4.Tomcat7.0.3X 版本 WebSocket API

public?class?EchoServlet?extends?WebSocketServlet?{
@Override
protected?StreamInbound?createWebSocketInbound(String?subProtocol,
HttpServletRequest?request)?{
?//以下代碼省略....
return?new?MessageInbound()?{
?//以下代碼省略....
}
protected?void?onBinaryMessage(ByteBuffer?buffer)
throws?IOException?{
?//以下代碼省略...
}
protected?void?onTextMessage(CharBuffer?buffer)?throws?IOException?{
?getWsOutbound().writeTextMessage(buffer);
?//以下代碼省略...
}
};
}
}

因此選擇 WebSocket 的 Server 端重點(diǎn)需要選擇其版本，通常情況下，更新的版本對(duì) WebSocket 的支持是標(biāo)準(zhǔn) JSR 規(guī)范 API，但也要考慮開(kāi)發(fā)易用性及老版本程序移植性等方面的問(wèn)題，如下文所述的客戶案例，就是因?yàn)榭蛻粢蠼y(tǒng)一應(yīng)用服務(wù)器版本所以使用的 Tomcat 7.0.3X 版本的 WebSocketServlet 實(shí)現(xiàn)，而不是 JSR356 的 @ServerEndpoint 注釋端點(diǎn)。

WebSocket 客戶端 API

對(duì)于 WebSocket 客戶端，主流的瀏覽器（包括 PC 和移動(dòng)終端）現(xiàn)已都支持標(biāo)準(zhǔn)的 HTML5 的 WebSocket API，這意味著客戶端的 WebSocket JavaScirpt 腳本具備良好的一致性和跨平臺(tái)特性，以下列舉了常見(jiàn)的瀏覽器廠商對(duì) WebSocket 的支持情況：

表 2.WebSocket 客戶端支持

客戶端 WebSocket API 基本上已經(jīng)在各個(gè)主流瀏覽器廠商中實(shí)現(xiàn)了統(tǒng)一，因此使用標(biāo)準(zhǔn) HTML5 定義的 WebSocket 客戶端的 JavaScript API 即可，當(dāng)然也可以使用業(yè)界滿足 WebSocket 標(biāo)準(zhǔn)規(guī)范的開(kāi)源框架，如 Socket.io。

以下以一段代碼示例說(shuō)明 WebSocket 的客戶端實(shí)現(xiàn)：

清單 5.WebSocket 客戶端 API 示例

var?ws?=?new?WebSocket(“ws://echo.websocket.org”);?
?ws.onopen?=?function(){ws.send(“Test!”);?};?
?ws.onmessage?=?function(evt){console.log(evt.data);ws.close();};?
?ws.onclose?=?function(evt){console.log(“WebSocketClosed!”);};?
?ws.onerror?=?function(evt){console.log(“WebSocketError!”);};

第一行代碼是在申請(qǐng)一個(gè) WebSocket 對(duì)象，參數(shù)是需要連接的服務(wù)器端的地址，同 HTTP 協(xié)議開(kāi)頭一樣，WebSocket 協(xié)議的 URL 使用 ws://開(kāi)頭，另外安全的 WebSocket 協(xié)議使用 wss://開(kāi)頭。

第二行到第五行為 WebSocket 對(duì)象注冊(cè)消息的處理函數(shù)，WebSocket 對(duì)象一共支持四個(gè)消息 onopen, onmessage, onclose 和 onerror，有了這 4 個(gè)事件，我們就可以很容易很輕松的駕馭 WebSocket。

當(dāng) Browser 和 WebSocketServer 連接成功后，會(huì)觸發(fā) onopen 消息；如果連接失敗，發(fā)送、接收數(shù)據(jù)失敗或者處理數(shù)據(jù)出現(xiàn)錯(cuò)誤，browser 會(huì)觸發(fā) onerror 消息；當(dāng) Browser 接收到 WebSocketServer 發(fā)送過(guò)來(lái)的數(shù)據(jù)時(shí)，就會(huì)觸發(fā) onmessage 消息，參數(shù) evt 中包含 Server 傳輸過(guò)來(lái)的數(shù)據(jù)；當(dāng) Browser 接收到 WebSocketServer 端發(fā)送的關(guān)閉連接請(qǐng)求時(shí)，就會(huì)觸發(fā) onclose 消息。我們可以看出所有的操作都是采用異步回調(diào)的方式觸發(fā)，這樣不會(huì)阻塞 UI，可以獲得更快的響應(yīng)時(shí)間，更好的用戶體驗(yàn)。

原文鏈接：https://blog.csdn.net/qq_35812160/article/details/78225823

更多信息請(qǐng)關(guān)注公眾號(hào)：「軟件老王」，關(guān)注不迷路，軟件老王和他的IT朋友們，分享一些他們的技術(shù)見(jiàn)解和生活故事。