基于WebSocket協議的網頁即時通信系統研究與實現

王彬

摘要：隨著用戶對Web信息即時性要求的提高，一種不需要客戶端，完全基于網頁，提供定制化服務，在社區、論壇、電商網站中提供即時交流互動和服務的技術應運而生。對比HTTP和WebSocket 2種協議，文章設計了一種基于WebSocket協議的網頁即時聊天系統，通過全雙工消息傳遞，在瀏覽器和服務器之間創建了一條快速通道，實現了實時性要求，降低了服務器的資源占用率。聊天系統提供了用戶登錄、上線提醒、下線提醒和群發消息等功能，在保持傳統B/S即時通信系統易擴展和易管理特點的同時，在帶寬占用、消息收發時延方面具有顯著的性能優勢。

關鍵詞：即時通信；長輪詢；WebSocket協議；Node.js協議；Socket.io庫

中圖分類號：TP311.1? 文獻標志碼：A

0 引言

隨著互聯網的迅猛發展，Web數據的即時性要求愈發強烈，基于Web的即時通信應用也大量涌現，如在線小游戲、證券、實時直播和即時聊天等。目前，主流Web即時通信應用仍然是基于HTTP協議，通過HTTP請求響應模型，在客戶端和服務器之間進行請求和響應的交互，實現數據的傳輸和通信。為保障實時通信，需在瀏覽器和服務器之間不斷建立連接并響應，由于請求和響應是單向的，這種方式并不能實現真正的實時通信。服務器收到客戶端請求后，若造成阻塞，仍會保持連接，這種方式并不適合實時性要求較高的應用，并且占用服務器的資源。隨著技術的不斷發展，通過使用長輪詢、WebSocket技術［1］可以在HTTP連接上建立雙通信通道，實現實時的雙向數據傳輸。

基于HTML5［2］中定義的WebSocket協議改變了這種現狀，該協議在HTTP的基礎上進行了擴展，而非HTTP本身自帶的功能。該協議將客戶端的請求與服務器的響應這一傳統的工作方式改為雙向消息傳遞，在瀏覽器和服務器之間建立一次握手，即可創建一條快速通道，兩者之間即可直接進行數據交互，滿足了實時性要求，降低了服務器的資源占用。本文設計了一種基于WebSocket協議的網頁即時聊天系統，提供了用戶登錄、上線提醒、下線提醒和群發消息等功能，在保持傳統瀏覽器和服務器架構模式即時通信系統易擴展、易管理的同時［3］，大大提高了即時通信系統的實時性，降低了服務器資源的占用率。

1 相關技術

1.1 WebSocket協議

通常情況下，在傳統的B/S系統通信中，服務端并不會主動與客戶端通信，必須要收到客戶端請求。客戶端首先發送一個請求，服務器端在接收到客戶端請求后，將處理結果返回到客戶端。因此，傳統Web應用滿足不了網頁版的即時通信需求。

WebSocket協議的出現徹底改變了這種通信方式。WebSocket協議是在HTML5規范中提出的一種全雙工通信協議，允許客戶端和服務器之間進行雙向實時通信［4-5］。而傳統的HTTP協議是單向通信，當客戶端HTTP請求發送到服務器端時，客戶端與服務器端將打開TCP連接；當客戶端收到服務器端響應后，TCP連接即終止，每個HTTP請求都會建立單獨的TCP連接。兩者之間的區別如圖1所示。

與HTTP協議不同，WebSocket協議只需要進行一次握手來建立連接，但是握手請求是通過HTTP協議進行的［6］。一旦WebSocket連接建立成功，客戶端和服務器之間可以通過該連接進行雙向通信。客戶端可以向服務器端發送數據，服務器端也可以主動向客戶端發送數據，而且連接可以一直保持開啟，直到其中一方主動斷開連接。

1.2 Socket.io庫

WebSocket雖然在實現實時通信方面有很多優勢，但在即時通信交互系統的消息處理過程中存在一

些局限。因為即時通信不僅涉及簡單的數據傳輸，還需要處理各種控制信息和狀態信息，以便對參與即時通信的用戶進行管理和控制。這些附加信息的處理可能需要額外的邏輯和協議來確保交互系統的完整性和穩定性。Socket.io是一個集成WebSocket協議的JavaScript庫［7］，它不僅是對WebSocket協議的簡單封裝，還在此基礎上又增加了新的功能，并擴展了關于Session、Cookie和 JSON處理的API［8］。Socket.io由2部分組成：客戶端JavaScript庫和基于Node.js的服務器端庫，具有實時性、全雙工和事件驅動等特點，為實現基于網頁的即時通信提供了良好的解決方案。除了WebSocket協議，Socket.io還支持多種實時通信方式，并提供了統一的接口。這些方式包括Adobe Flash Socket、Ajax長輪詢、Ajax多部分流、持久Iframe和JSONP輪詢等。當Socket.io檢測到當前環境不支持WebSocket時，會自動選擇最優方式來實現網絡的實時通信。因此，Socket.io可以在不同環境下提供可靠的實時通信能力。

Socket.io在實現網絡即時通信時具有以下特點：（1）如果不能建立 WebSocket 連接，連接將退回到 HTTP 長輪詢。（2）在某些特定條件下，服務器端和客戶端之間的 WebSocket 連接可能會被中斷，雙方都不知道連接處于斷開狀態。而 http：//Socket.io包含一個heartbeat機制，該機制定期檢查連接的狀態，當客戶端最終斷開連接時，它會自動重新連接，同時數據包將自動緩沖，并在重新連接時發送。（3）Socket.io客戶端和服務器端都具備了收到消息的回調功能。

（4）Socket.io服務器端提供了消息的廣播功能。

2 服務器端設計

基于Web頁面的即時通信服務器端主要采用了Node.js［9］結合Express和Socket.io來實現，服務器端主要包含3個功能：建立連接、監聽請求和斷開連接，具體如圖2所示。

當新用戶登錄時，服務器端通過獲取用戶的昵稱和用戶唯一標識，與當前請求的Socket對象進行綁定，更新在線人數，并向所有在線用戶推送用戶登錄信息和在線人數。網頁即時通信消息傳遞時序如圖3所示。

當服務器端監聽到客戶端發送的信息請求時，將用戶發送的信息轉發給所有在線用戶。當客戶端斷開連接時，從當前的在線用戶列表中將用戶信息刪除，并將用戶的退出信息和在線人數推送給在線用戶。

3 客戶端設計

網頁即時聊天的客戶端設計主要包括了用戶登錄模塊和監聽服務器端消息模塊，其中監聽服務器端消息模塊包括了監聽服務器端推送消息、在線人數和用戶退出信息，具體如圖4所示。

當用戶輸入昵稱登錄后，首先創建WebSocket客戶端對象，創建成功后，將用戶的昵稱和根據當前時間生成的唯一編號發送到服務器端，然后開始監聽服務器端的消息。

當客戶端接收到服務器端發送的信息時，再利用客戶端的DOM技術進行頁面渲染，將信息顯示到聊天窗口中，程序運行效果如圖5所示。

4 結語

本文提出的一種基于Node.js和WebSocket協議的網頁即時通信系統，實現了用戶在瀏覽網頁的同時，可與其他用戶進行即時通信，通信的實時性和高效性在實際使用中得到了驗證。隨著技術的不斷發? 展，基于WebSocket技術的語音、視頻、單聊、直播和文件傳輸功能也將進一步完善。

參考文獻

［1］浪潮軟件股份有限公司.一種基于websocket的android客戶端遠程調試系統：CN201911127153.1［P］.2020-04-17.

［2］孫善毅.車輛主動安全視頻監控系統平臺關鍵技術研究與開發［D］.徐州：中國礦業大學，2020.

［3］李仲岐.基于WebSocket即時通信系統設計與實現：第三十七屆中國（天津）2023IT、網絡、信息技術、電子、儀器儀表創新學術會議論文集［C］.天津：天津市電子學會，2023.

［4］茆玉庭.基于Node.js和WebSocket的即時通信系統的設計與實現［D］.南京：南京郵電大學，2018.

［5］杜明遠.基于WebSocket的即時通信系統設計與實現［D］.大連：大連理工大學，2016.

［6］高銳，閆光輝，羅浩，等.基于WebSocket技術無線頻譜大數據實時監測系統設計與實現［J］.蘭州交通大學學報，2022（1）：52-60.

［7］張藝.基于WebSocket的即時通信系統研究與實現［J］.軟件，2015（3）：89-94.

［8］陸屹，趙巍.基于WebSocket的電信運營商視頻營業廳模式的研究與實現［J］.計算機時代，2023（7）：77-81.

［9］馬行健.利用WebSocket技術實現房源網小程序的即時通信［J］.河北軟件職業技術學院學報，2022（4）：23-26.

（編輯 王雪芬編輯）

Research and implementation of Web instant communication based on WebSocket protocol

Wang? Bin

（Department of Information Technology， Xuzhou Finance Branch， Jiangsu Union Technical Institute， Xuzhou 221008， China）

Abstract： With the increasing demand of users for the immediacy of web information， a technology that does not require a client， is completely based on web pages， providing customized services， and providing instant communication， interaction， and services in communities， forums， and e-commerce websites has emerged. This article compares HTTP and WebSocket protocols and designs a web instant messaging system based on the WebSocket protocol. Through full duplex messaging， it creates a fast channel between the browser and the server， achieving real-time requirements and reducing server resource usage. The chat system provides functions such as user login， online reminders， offline reminders， and group messaging. While maintaining the scalability and ease of management of traditional B/S instant messaging systems， it has significant performance advantages in bandwidth utilization and message transmission latency.

Key words： instant messaging; long poll; WebSocket protocol; Node.js protocol; Socket.io base