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

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

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

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

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

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

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

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

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

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

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

在配置類@Configuration下注冊ServerEndpointExporter的Bean，這個bean會自動注冊使用了@ServerEndpoint注解聲明的Websocket endpoint

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

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

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

安裝websocket 依賴庫

安裝類型定義文件

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

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

3.3. Demo演示
簡單做個demo頁面，有留言板和輸入框。同時開多個瀏覽器頁面，只要在任意一個頁面的輸入框中輸入文字，所有頁面的留言板上都會實時顯示出來。

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

app.component.ts

app.component.css

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