王彬

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

關(guān)鍵詞：即時(shí)通信；長(zhǎng)輪詢；WebSocket協(xié)議；Node.js協(xié)議；Socket.io庫(kù)

中圖分類號(hào)：TP311.1? 文獻(xiàn)標(biāo)志碼：A

0 引言

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

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

1 相關(guān)技術(shù)

1.1 WebSocket協(xié)議

通常情況下，在傳統(tǒng)的B/S系統(tǒng)通信中，服務(wù)端并不會(huì)主動(dòng)與客戶端通信，必須要收到客戶端請(qǐng)求。客戶端首先發(fā)送一個(gè)請(qǐng)求，服務(wù)器端在接收到客戶端請(qǐng)求后，將處理結(jié)果返回到客戶端。因此，傳統(tǒng)Web應(yīng)用滿足不了網(wǎng)頁(yè)版的即時(shí)通信需求。

WebSocket協(xié)議的出現(xiàn)徹底改變了這種通信方式。WebSocket協(xié)議是在HTML5規(guī)范中提出的一種全雙工通信協(xié)議，允許客戶端和服務(wù)器之間進(jìn)行雙向?qū)崟r(shí)通信［4-5］。而傳統(tǒng)的HTTP協(xié)議是單向通信，當(dāng)客戶端HTTP請(qǐng)求發(fā)送到服務(wù)器端時(shí)，客戶端與服務(wù)器端將打開TCP連接；當(dāng)客戶端收到服務(wù)器端響應(yīng)后，TCP連接即終止，每個(gè)HTTP請(qǐng)求都會(huì)建立單獨(dú)的TCP連接。兩者之間的區(qū)別如圖1所示。

與HTTP協(xié)議不同，WebSocket協(xié)議只需要進(jìn)行一次握手來(lái)建立連接，但是握手請(qǐng)求是通過(guò)HTTP協(xié)議進(jìn)行的［6］。一旦WebSocket連接建立成功，客戶端和服務(wù)器之間可以通過(guò)該連接進(jìn)行雙向通信?？蛻舳丝梢韵蚍?wù)器端發(fā)送數(shù)據(jù)，服務(wù)器端也可以主動(dòng)向客戶端發(fā)送數(shù)據(jù)，而且連接可以一直保持開啟，直到其中一方主動(dòng)斷開連接。

1.2 Socket.io庫(kù)

WebSocket雖然在實(shí)現(xiàn)實(shí)時(shí)通信方面有很多優(yōu)勢(shì)，但在即時(shí)通信交互系統(tǒng)的消息處理過(guò)程中存在一

些局限。因?yàn)榧磿r(shí)通信不僅涉及簡(jiǎn)單的數(shù)據(jù)傳輸，還需要處理各種控制信息和狀態(tài)信息，以便對(duì)參與即時(shí)通信的用戶進(jìn)行管理和控制。這些附加信息的處理可能需要額外的邏輯和協(xié)議來(lái)確保交互系統(tǒng)的完整性和穩(wěn)定性。Socket.io是一個(gè)集成WebSocket協(xié)議的JavaScript庫(kù)［7］，它不僅是對(duì)WebSocket協(xié)議的簡(jiǎn)單封裝，還在此基礎(chǔ)上又增加了新的功能，并擴(kuò)展了關(guān)于Session、Cookie和 JSON處理的API［8］。Socket.io由2部分組成：客戶端JavaScript庫(kù)和基于Node.js的服務(wù)器端庫(kù)，具有實(shí)時(shí)性、全雙工和事件驅(qū)動(dòng)等特點(diǎn)，為實(shí)現(xiàn)基于網(wǎng)頁(yè)的即時(shí)通信提供了良好的解決方案。除了WebSocket協(xié)議，Socket.io還支持多種實(shí)時(shí)通信方式，并提供了統(tǒng)一的接口。這些方式包括Adobe Flash Socket、Ajax長(zhǎng)輪詢、Ajax多部分流、持久Iframe和JSONP輪詢等。當(dāng)Socket.io檢測(cè)到當(dāng)前環(huán)境不支持WebSocket時(shí)，會(huì)自動(dòng)選擇最優(yōu)方式來(lái)實(shí)現(xiàn)網(wǎng)絡(luò)的實(shí)時(shí)通信。因此，Socket.io可以在不同環(huán)境下提供可靠的實(shí)時(shí)通信能力。

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

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

2 服務(wù)器端設(shè)計(jì)

基于Web頁(yè)面的即時(shí)通信服務(wù)器端主要采用了Node.js［9］結(jié)合Express和Socket.io來(lái)實(shí)現(xiàn)，服務(wù)器端主要包含3個(gè)功能：建立連接、監(jiān)聽請(qǐng)求和斷開連接，具體如圖2所示。

當(dāng)新用戶登錄時(shí)，服務(wù)器端通過(guò)獲取用戶的昵稱和用戶唯一標(biāo)識(shí)，與當(dāng)前請(qǐng)求的Socket對(duì)象進(jìn)行綁定，更新在線人數(shù)，并向所有在線用戶推送用戶登錄信息和在線人數(shù)。網(wǎng)頁(yè)即時(shí)通信消息傳遞時(shí)序如圖3所示。

當(dāng)服務(wù)器端監(jiān)聽到客戶端發(fā)送的信息請(qǐng)求時(shí)，將用戶發(fā)送的信息轉(zhuǎn)發(fā)給所有在線用戶。當(dāng)客戶端斷開連接時(shí)，從當(dāng)前的在線用戶列表中將用戶信息刪除，并將用戶的退出信息和在線人數(shù)推送給在線用戶。

3 客戶端設(shè)計(jì)

網(wǎng)頁(yè)即時(shí)聊天的客戶端設(shè)計(jì)主要包括了用戶登錄模塊和監(jiān)聽服務(wù)器端消息模塊，其中監(jiān)聽服務(wù)器端消息模塊包括了監(jiān)聽服務(wù)器端推送消息、在線人數(shù)和用戶退出信息，具體如圖4所示。

當(dāng)用戶輸入昵稱登錄后，首先創(chuàng)建WebSocket客戶端對(duì)象，創(chuàng)建成功后，將用戶的昵稱和根據(jù)當(dāng)前時(shí)間生成的唯一編號(hào)發(fā)送到服務(wù)器端，然后開始監(jiān)聽服務(wù)器端的消息。

當(dāng)客戶端接收到服務(wù)器端發(fā)送的信息時(shí)，再利用客戶端的DOM技術(shù)進(jìn)行頁(yè)面渲染，將信息顯示到聊天窗口中，程序運(yùn)行效果如圖5所示。

4 結(jié)語(yǔ)

本文提出的一種基于Node.js和WebSocket協(xié)議的網(wǎng)頁(yè)即時(shí)通信系統(tǒng)，實(shí)現(xiàn)了用戶在瀏覽網(wǎng)頁(yè)的同時(shí)，可與其他用戶進(jìn)行即時(shí)通信，通信的實(shí)時(shí)性和高效性在實(shí)際使用中得到了驗(yàn)證。隨著技術(shù)的不斷發(fā)? 展，基于WebSocket技術(shù)的語(yǔ)音、視頻、單聊、直播和文件傳輸功能也將進(jìn)一步完善。

參考文獻(xiàn)

［1］浪潮軟件股份有限公司.一種基于websocket的android客戶端遠(yuǎn)程調(diào)試系統(tǒng)：CN201911127153.1［P］.2020-04-17.

［2］孫善毅.車輛主動(dòng)安全視頻監(jiān)控系統(tǒng)平臺(tái)關(guān)鍵技術(shù)研究與開發(fā)［D］.徐州：中國(guó)礦業(yè)大學(xué)，2020.

［3］李仲岐.基于WebSocket即時(shí)通信系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)：第三十七屆中國(guó)（天津）2023IT、網(wǎng)絡(luò)、信息技術(shù)、電子、儀器儀表創(chuàng)新學(xué)術(shù)會(huì)議論文集［C］.天津：天津市電子學(xué)會(huì)，2023.

［4］茆玉庭.基于Node.js和WebSocket的即時(shí)通信系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)［D］.南京：南京郵電大學(xué)，2018.

［5］杜明遠(yuǎn).基于WebSocket的即時(shí)通信系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)［D］.大連：大連理工大學(xué)，2016.

［6］高銳，閆光輝，羅浩，等.基于WebSocket技術(shù)無(wú)線頻譜大數(shù)據(jù)實(shí)時(shí)監(jiān)測(cè)系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)［J］.蘭州交通大學(xué)學(xué)報(bào)，2022（1）：52-60.

［7］張藝.基于WebSocket的即時(shí)通信系統(tǒng)研究與實(shí)現(xiàn)［J］.軟件，2015（3）：89-94.

［8］陸屹，趙巍.基于WebSocket的電信運(yùn)營(yíng)商視頻營(yíng)業(yè)廳模式的研究與實(shí)現(xiàn)［J］.計(jì)算機(jī)時(shí)代，2023（7）：77-81.

［9］馬行健.利用WebSocket技術(shù)實(shí)現(xiàn)房源網(wǎng)小程序的即時(shí)通信［J］.河北軟件職業(yè)技術(shù)學(xué)院學(xué)報(bào)，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