摘要：在尚未被眾多瀏覽器實(shí)現(xiàn)和發(fā)布的時(shí)期，開(kāi)發(fā)者在開(kāi)發(fā)需要接收來(lái)自服務(wù)器的實(shí)時(shí)通知應(yīng)用程序時(shí)，不得不求助于一些來(lái)模擬實(shí)時(shí)連接以實(shí)現(xiàn)實(shí)時(shí)通信，最流行的一種方式是長(zhǎng)輪詢。

1.前言
本文先講解WebSocket的應(yīng)用場(chǎng)景和特點(diǎn)，然后通過(guò)前后端示例代碼講解，展示在實(shí)際的開(kāi)發(fā)中的應(yīng)用。
1.1. 應(yīng)用場(chǎng)景
WebSocket是一種在單個(gè)TCP連接上進(jìn)行全雙工通信的協(xié)議, 是為了滿足基于 Web 的日益增長(zhǎng)的實(shí)時(shí)通信需求而產(chǎn)生的。我們平時(shí)接觸的大多數(shù)是HTTP的接口，但是在有些業(yè)務(wù)場(chǎng)景中滿足不了我們的需求，這時(shí)候就需要用到WebSocket。簡(jiǎn)單舉兩個(gè)例子：

（1） 頁(yè)面地圖上要實(shí)時(shí)顯示在線人員坐標(biāo)：傳統(tǒng)基于HTTP接口的處理方式是輪詢，每次輪詢更新最新的坐標(biāo)信息。

（2）手機(jī)的付款碼頁(yè)面，在外界設(shè)備掃描付款碼支付成功后，手機(jī)付款碼頁(yè)面提示“支付成功”并自動(dòng)關(guān)閉：傳統(tǒng)方式還是輪詢，付款碼頁(yè)面一直調(diào)用接口，直到從服務(wù)器獲取成功支付的狀態(tài)后，手機(jī)提示“支付成功”并關(guān)閉付款碼頁(yè)面。

HTTP 協(xié)議有一個(gè)缺陷：通信只能由客戶端發(fā)起。這種單向請(qǐng)求的特點(diǎn)，注定了如果服務(wù)器有連續(xù)的狀態(tài)變化，客戶端要獲知就非常麻煩。我們只能使用"輪詢"：每隔一段時(shí)候，就發(fā)出一個(gè)詢問(wèn)，了解服務(wù)器有沒(méi)有新的信息。但這種方式即浪費(fèi)帶寬（HTTP HEAD 是比較大的），又消耗服務(wù)器 CPU 占用（沒(méi)有信息也要接受請(qǐng)求）。

在WebSocket API尚未被眾多瀏覽器實(shí)現(xiàn)和發(fā)布的時(shí)期，開(kāi)發(fā)者在開(kāi)發(fā)需要接收來(lái)自服務(wù)器的實(shí)時(shí)通知應(yīng)用程序時(shí)，不得不求助于一些“hacks”來(lái)模擬實(shí)時(shí)連接以實(shí)現(xiàn)實(shí)時(shí)通信，最流行的一種方式是長(zhǎng)輪詢?。?長(zhǎng)輪詢主要是發(fā)出一個(gè)HTTP請(qǐng)求到服務(wù)器，然后保持連接打開(kāi)以允許服務(wù)器在稍后的時(shí)間響應(yīng)（由服務(wù)器確定）。為了這個(gè)連接有效地工作，許多技術(shù)需要被用于確保消息不錯(cuò)過(guò)，如需要在服務(wù)器端緩存和記錄多個(gè)的連接信息（每個(gè)客戶）。雖然長(zhǎng)輪詢是可以解決這一問(wèn)題的，但它會(huì)耗費(fèi)更多的資源，如CPU、內(nèi)存和帶寬等，要想很好的解決實(shí)時(shí)通信問(wèn)題就需要設(shè)計(jì)和發(fā)布一種新的協(xié)議

1.2. WebSocket定義
WebSocket是一種協(xié)議，是一種與HTTP 同等的網(wǎng)絡(luò)協(xié)議，兩者都是應(yīng)用層協(xié)議，都基于 TCP 協(xié)議。但是 WebSocket 是一種雙向通信協(xié)議，在建立連接之后，WebSocket 的 server 與 client 都能主動(dòng)向?qū)Ψ桨l(fā)送或接收數(shù)據(jù)。同時(shí)，WebSocket在建立連接時(shí)需要借助 HTTP 協(xié)議，連接建立好了之后 client 與 server 之間的雙向通信就與 HTTP 無(wú)關(guān)了。

相比于傳統(tǒng)HTTP 的每次“請(qǐng)求-應(yīng)答”都要client 與 server 建立連接的模式，WebSocket 是一種長(zhǎng)連接的模式。就是一旦WebSocket 連接建立后，除非client 或者 server 中有一端主動(dòng)斷開(kāi)連接，否則每次數(shù)據(jù)傳輸之前都不需要HTTP 那樣請(qǐng)求數(shù)據(jù)。

WebSocket 對(duì)象提供了一組 API，用于創(chuàng)建和管理 WebSocket 連接，以及通過(guò)連接發(fā)送和接收數(shù)據(jù)。瀏覽器提供的WebSocket API很簡(jiǎn)潔，調(diào)用示例如下：

HTTP、WebSocket 等應(yīng)用層協(xié)議，都是基于 TCP 協(xié)議來(lái)傳輸數(shù)據(jù)的。我們可以把這些高級(jí)協(xié)議理解成對(duì) TCP 的封裝。既然大家都使用 TCP 協(xié)議，那么大家的連接和斷開(kāi)，都要遵循 TCP 協(xié)議中的三次握手和四次握手 ，只是在連接之后發(fā)送的內(nèi)容不同，或者是斷開(kāi)的時(shí)間不同。對(duì)于 WebSocket 來(lái)說(shuō)，它必須依賴 HTTP 協(xié)議進(jìn)行一次握手 ，握手成功后，數(shù)據(jù)就直接從 TCP 通道傳輸，與 HTTP 無(wú)關(guān)了。

2.后端WebSocket服務(wù)（SpringBoot）
pom.xml

在配置類@Configuration下注冊(cè)ServerEndpointExporter的Bean，這個(gè)bean會(huì)自動(dòng)注冊(cè)使用了@ServerEndpoint注解聲明的Websocket endpoint

創(chuàng)建WebSocket的工具類WebSocket.java

3.到此WebSocket的代碼就結(jié)束了，運(yùn)行該SpringBoot項(xiàng)目，對(duì)應(yīng)的WebSocket地址為：ws://127.0.0.1:port/websocket/{userId}
可以在 WebSocket在線測(cè)試網(wǎng)站 上測(cè)試后端接口。

前端WebSocket調(diào)用（Angular）
3.1. npm依賴
安裝 rxjs 的依賴庫(kù)

安裝websocket 依賴庫(kù)

安裝類型定義文件

3.2. WebSocket Service
創(chuàng)建 WebSocket 的Service文件

上述命令生成了websocket.service.ts文件，示例代碼為：

3.3. Demo演示
簡(jiǎn)單做個(gè)demo頁(yè)面，有留言板和輸入框。同時(shí)開(kāi)多個(gè)瀏覽器頁(yè)面，只要在任意一個(gè)頁(yè)面的輸入框中輸入文字，所有頁(yè)面的留言板上都會(huì)實(shí)時(shí)顯示出來(lái)。

示例的代碼提供，app.component.html

app.component.ts

app.component.css

本人創(chuàng)業(yè)團(tuán)隊(duì)產(chǎn)品MadPecker，主要做BUG管理、測(cè)試管理、應(yīng)用分發(fā)，網(wǎng)址:www.madpecker.com，有需要的朋友歡迎試用、體驗(yàn)！
本文為MadPecker團(tuán)隊(duì)技術(shù)人員編寫，轉(zhuǎn)載請(qǐng)標(biāo)明出處