WebSocket，再也不「輪詢」

1.前言
本文先講解WebSocket的應用場景和特色，而後經過先後端示例代碼講解，展現在實際的開發中的應用。
1.1. 應用場景
WebSocket是一種在單個TCP鏈接上進行全雙工通訊的協議, 是爲了知足基於 Web 的日益增加的實時通訊需求而產生的。咱們平時接觸的大多數是HTTP的接口，可是在有些業務場景中知足不了咱們的需求，這時候就須要用到WebSocket。簡單舉兩個例子：

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

（2）手機的付款碼頁面，在外界設備掃描付款碼支付成功後，手機付款碼頁面提示「支付成功」並自動關閉：傳統方式仍是輪詢，付款碼頁面一直調用接口，直到從服務器獲取成功支付的狀態後，手機提示「支付成功」並關閉付款碼頁面。

HTTP 協議有一個缺陷：通訊只能由客戶端發起。這種單向請求的特色，註定了若是服務器有連續的狀態變化，客戶端要獲知就很是麻煩。咱們只能使用"輪詢"：每隔一段時候，就發出一個詢問，瞭解服務器有沒有新的信息。但這種方式即浪費帶寬（HTTP HEAD 是比較大的），又消耗服務器 CPU 佔用（沒有信息也要接受請求）。

在WebSocket API還沒有被衆多瀏覽器實現和發佈的時期，開發者在開發須要接收來自服務器的實時通知應用程序時，不得不求助於一些「hacks」來模擬實時鏈接以實現實時通訊，最流行的一種方式是長輪詢 。 長輪詢主要是發出一個HTTP請求到服務器，而後保持鏈接打開以容許服務器在稍後的時間響應（由服務器肯定）。爲了這個鏈接有效地工做，許多技術須要被用於確保消息不錯過，如須要在服務器端緩存和記錄多個的鏈接信息（每一個客戶）。雖然長輪詢是能夠解決這一問題的，但它會耗費更多的資源，如CPU、內存和帶寬等，要想很好的解決實時通訊問題就須要設計和發佈一種新的協議

1.2. WebSocket定義
WebSocket是一種協議，是一種與HTTP 同等的網絡協議，二者都是應用層協議，都基於 TCP 協議。可是 WebSocket 是一種雙向通訊協議，在創建鏈接以後，WebSocket 的 server 與 client 都能主動向對方發送或接收數據。同時，WebSocket在創建鏈接時須要藉助 HTTP 協議，鏈接創建好了以後 client 與 server 之間的雙向通訊就與 HTTP 無關了。

相比於傳統HTTP 的每次「請求-應答」都要client 與 server 創建鏈接的模式，WebSocket 是一種長鏈接的模式。就是一旦WebSocket 鏈接創建後，除非client 或者 server 中有一端主動斷開鏈接，不然每次數據傳輸以前都不須要HTTP 那樣請求數據。

WebSocket 對象提供了一組 API，用於建立和管理 WebSocket 鏈接，以及經過鏈接發送和接收數據。瀏覽器提供的WebSocket API很簡潔，調用示例以下：

HTTP、WebSocket 等應用層協議，都是基於 TCP 協議來傳輸數據的。咱們能夠把這些高級協議理解成對 TCP 的封裝。既然你們都使用 TCP 協議，那麼你們的鏈接和斷開，都要遵循 TCP 協議中的三次握手和四次握手 ，只是在鏈接以後發送的內容不一樣，或者是斷開的時間不一樣。對於 WebSocket 來講，它必須依賴 HTTP 協議進行一次握手 ，握手成功後，數據就直接從 TCP 通道傳輸，與 HTTP 無關了。

2.後端WebSocket服務（SpringBoot）
pom.xml

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

建立WebSocket的工具類WebSocket.java

3.到此WebSocket的代碼就結束了，運行該SpringBoot項目，對應的WebSocket地址爲：ws://127.0.0.1:port/websocket/{userId}
能夠在 WebSocket在線測試網站 上測試後端接口。

前端WebSocket調用（Angular）
3.1. npm依賴
安裝 rxjs 的依賴庫

安裝websocket 依賴庫

安裝類型定義文件

3.2. WebSocket Service
建立 WebSocket 的Service文件

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

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

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

app.component.ts

app.component.css

本人創業團隊產品MadPecker，主要作BUG管理、測試管理、應用分發，網址:www.madpecker.com，有須要的朋友歡迎試用、體驗！本文爲MadPecker團隊技術人員編寫，轉載請標明出處