陳麗楓，鄭力新，王佳斌

　?。ㄈA僑大學(xué) 工學(xué)院，福建 泉州 362021）

       摘要：隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，Web技術(shù)在各個(gè)領(lǐng)域得到了不同程度的運(yùn)用，人們對(duì)于Web應(yīng)用的實(shí)時(shí)性提出了更高的要求，HTML5 WebSocket協(xié)議因此得到了廣泛的關(guān)注。通過(guò)對(duì)基于HTTP的傳統(tǒng)Web實(shí)時(shí)通信方案進(jìn)行分析，針對(duì)其中的不足與缺點(diǎn)，深入介紹了基于HTML5 WebSocket協(xié)議的實(shí)時(shí)通信機(jī)制以及相對(duì)于傳統(tǒng)方案的優(yōu)勢(shì)，并通過(guò)使用Node.js的Express框架和HTML5 WebSocket協(xié)議的第三方應(yīng)用程序編程接口 Socket.io類庫(kù)實(shí)現(xiàn)了一個(gè)基于WebSocket協(xié)議的Web應(yīng)用。經(jīng)實(shí)驗(yàn)表明，所描述的研究能成功地在客戶端和服務(wù)器端完成基于HTML5 WebSocket協(xié)議的實(shí)時(shí)通信過(guò)程并建立連接。

　　關(guān)鍵詞：Web應(yīng)用；WebSocket；實(shí)時(shí)通信；Socket.io

　　0引言

　　隨著互聯(lián)網(wǎng)技術(shù)的高速發(fā)展，人們對(duì)Web應(yīng)用的實(shí)時(shí)性要求越來(lái)越高，傳統(tǒng)的Web實(shí)時(shí)通信方案已經(jīng)無(wú)法滿足一些現(xiàn)實(shí)應(yīng)用的需求。在長(zhǎng)期的Web應(yīng)用過(guò)程中該傳統(tǒng)方案逐漸露出資源浪費(fèi)、實(shí)時(shí)性不高等問(wèn)題，這些問(wèn)題的出現(xiàn)對(duì)一些實(shí)時(shí)性要求較高的Web應(yīng)用（如在線游戲、在線證券、設(shè)備監(jiān)控等）造成了不好的用戶體驗(yàn)。除此之外，這些不足還會(huì)制約Web實(shí)時(shí)通信的性能，對(duì)通信效率造成影響。面對(duì)這種情況，HTML5規(guī)范中定義了WebSocket協(xié)議來(lái)實(shí)現(xiàn)更好的用戶體驗(yàn)和實(shí)時(shí)通信功能，并針對(duì)傳統(tǒng)的Web實(shí)時(shí)通信方案在實(shí)際運(yùn)用中產(chǎn)生的資源浪費(fèi)問(wèn)題進(jìn)行改善，提高通信效率。

　　目前，WebSocket協(xié)議的實(shí)現(xiàn)主要分為客戶端和服務(wù)器端兩部分。對(duì)于其客戶端而言，許多的主流瀏覽器(包括個(gè)人電腦和移動(dòng)終端)如谷歌、火狐、IE等都在不同的版本上支持WebSocket客戶端應(yīng)用程序編程接口。而對(duì)于其服務(wù)器端而言，也有許多常見(jiàn)的應(yīng)用服務(wù)器如WebSphere、WebLogic、Tomcat等在不同的版本上支持WebSocket服務(wù)器端應(yīng)用程序編程接口。綜上所述，本文從傳統(tǒng)的Web實(shí)時(shí)通信方案出發(fā)，針對(duì)其在Web應(yīng)用中所體現(xiàn)的不足與缺點(diǎn)，深入研究WebSocket協(xié)議在Web實(shí)時(shí)通信方面的原理與優(yōu)勢(shì)，并根據(jù)該協(xié)議的通信機(jī)制進(jìn)行實(shí)現(xiàn)。

1傳統(tǒng)的Web實(shí)時(shí)通信方案

　　1.1輪詢

　　在早期的Web應(yīng)用中，所采用的Web實(shí)時(shí)通信方案是輪詢。在使用輪詢時(shí)，客戶端需要頻繁地向服務(wù)器端發(fā)送HTTP請(qǐng)求來(lái)保持客戶端和服務(wù)器端的同步以便不斷地刷新客戶端所要呈現(xiàn)的信息。在這個(gè)過(guò)程中，客戶端無(wú)法確定合適的時(shí)間間隔向服務(wù)器端發(fā)送HTTP請(qǐng)求。若間隔的時(shí)間太短，客戶端頻繁的請(qǐng)求將會(huì)給服務(wù)器端造成巨大的壓力；若間隔的時(shí)間太長(zhǎng)，就無(wú)法滿足客戶端和服務(wù)器端實(shí)時(shí)通信的要求。由于客戶端在頻繁地發(fā)送請(qǐng)求時(shí)服務(wù)器端的數(shù)據(jù)可能還未進(jìn)行更新，導(dǎo)致服務(wù)器端返回的大部分應(yīng)答包中的數(shù)據(jù)域?yàn)榭?，因而產(chǎn)生了很多無(wú)謂的網(wǎng)絡(luò)傳輸，浪費(fèi)了大量的帶寬資源和其他網(wǎng)絡(luò)資源。對(duì)于圖1客戶端與服務(wù)器端的交互圖每次的HTTP請(qǐng)求而言，過(guò)長(zhǎng)的HTTP頭信息也會(huì)占用不必要的帶寬資源。因此，這是一種缺乏靈活性又低效的Web實(shí)時(shí)通信方案。其中客戶端和服務(wù)器端的交互過(guò)程如圖1(a)所示。

　　1.2Comet技術(shù)

　　目前，Comet技術(shù)［1］的實(shí)現(xiàn)方式包括基于異步JavaScript和可擴(kuò)展標(biāo)記語(yǔ)言(Asynchronous JavaScript and Extensible Markup Language,AJAX)的長(zhǎng)輪詢方式和基于Iframe的流方式。這兩種方式針對(duì)輪詢都做出了較大的改進(jìn)。

　　1.2.1基于AJAX的長(zhǎng)輪詢方式

　　基于AJAX的長(zhǎng)輪詢方式［2］通過(guò)采用AJAX技術(shù)讓客戶端向服務(wù)器端發(fā)送HTTP請(qǐng)求，進(jìn)而與服務(wù)器端建立連接，且該連接會(huì)在服務(wù)器端保持一段時(shí)間。若服務(wù)器端檢測(cè)到有新數(shù)據(jù)產(chǎn)生，那么它會(huì)將這些數(shù)據(jù)通過(guò)連接發(fā)送至客戶端，然后關(guān)閉連接；若服務(wù)器端在連接存在期間都沒(méi)有產(chǎn)生新的數(shù)據(jù)發(fā)送至客戶端，那么它將會(huì)向客戶端發(fā)送一個(gè)超時(shí)信息，然后關(guān)閉連接。無(wú)論服務(wù)器端的數(shù)據(jù)是否還在更新，在連接關(guān)閉之后，客戶端都需要重新向服務(wù)器端發(fā)送HTTP請(qǐng)求來(lái)建立連接。其中客戶端和服務(wù)器端的交互過(guò)程如圖1(b)所示。

　　雖然這種方式能夠?qū)蛻舳说牟糠猪?yè)面進(jìn)行更新，減少服務(wù)器端發(fā)送的數(shù)據(jù)量，降低客戶端請(qǐng)求的頻率，減少無(wú)效的網(wǎng)絡(luò)傳輸，但當(dāng)服務(wù)器端更新數(shù)據(jù)的速度較快時(shí)，基于AJAX的長(zhǎng)輪詢方式將變成普通的輪詢，不僅會(huì)降低其性能，而且還會(huì)對(duì)服務(wù)器端造成較大的處理壓力。除此之外，為了保持HTTP連接長(zhǎng)時(shí)間處于打開(kāi)狀態(tài)，服務(wù)器端也需要消耗一定的服務(wù)器資源。因此，使用基于AJAX的長(zhǎng)輪詢方式會(huì)產(chǎn)生資源浪費(fèi)的問(wèn)題。

　　1.2.2基于Iframe的流方式

　　基于Iframe的流方式［3］通過(guò)客戶端頁(yè)面上內(nèi)嵌的一個(gè)Iframe標(biāo)簽向服務(wù)器端發(fā)送HTTP請(qǐng)求，服務(wù)器端在響應(yīng)該請(qǐng)求后與客戶端建立一條長(zhǎng)連接。連接建立后，服務(wù)器端通過(guò)不斷地更新該連接的狀態(tài)以保持其不過(guò)期。當(dāng)服務(wù)器端檢測(cè)到有新數(shù)據(jù)產(chǎn)生時(shí)，它會(huì)將新數(shù)據(jù)通過(guò)該連接發(fā)送給客戶端；當(dāng)客戶端和服務(wù)器端之間的通信出現(xiàn)問(wèn)題導(dǎo)致連接出現(xiàn)錯(cuò)誤或者關(guān)閉時(shí)，客戶端會(huì)立即發(fā)出連接請(qǐng)求與服務(wù)器端重新建立連接，否則該連接會(huì)一直持續(xù)，不會(huì)關(guān)閉。其中客戶端和服務(wù)器端的交互過(guò)程如圖1(c)所示。

　　雖然這種方式有利于減少客戶端的請(qǐng)求次數(shù)，減輕客戶端和服務(wù)器端之間的網(wǎng)絡(luò)負(fù)擔(dān)，避免因頻繁的建立連接和關(guān)閉連接所帶來(lái)的資源浪費(fèi)，但由于基于Iframe的流方式在連接過(guò)程中始終只維持一個(gè)長(zhǎng)連接，因此客戶端頁(yè)面會(huì)一直處于加載過(guò)程中而無(wú)法顯示頁(yè)面加載完成，從而影響用戶體驗(yàn)。且當(dāng)有多個(gè)客戶端同時(shí)向服務(wù)器端發(fā)送HTTP請(qǐng)求時(shí)，由于服務(wù)器端長(zhǎng)期只維持一個(gè)連接，因此會(huì)導(dǎo)致服務(wù)器端在這種高并發(fā)狀態(tài)下的處理能力降低，造成大量的服務(wù)器資源和其他網(wǎng)絡(luò)資源被消耗。

　　由于基于AJAX的長(zhǎng)輪詢方式和基于Iframe的流方式在通信過(guò)程中一直采用HTTP作為通信協(xié)議，因此每次的HTTP請(qǐng)求和應(yīng)答所攜帶的完整的HTTP頭信息不僅增加了實(shí)時(shí)更新信息時(shí)的數(shù)據(jù)傳輸量，還造成帶寬資源的浪費(fèi)。此外，為了維持和協(xié)調(diào)通信過(guò)程中HTTP連接隨時(shí)處于可用狀態(tài)，服務(wù)器端也需要消耗資源。對(duì)于HTTP連接的建立和關(guān)閉過(guò)程而言，服務(wù)器端新產(chǎn)生的數(shù)據(jù)有可能會(huì)因?yàn)闊o(wú)法及時(shí)發(fā)送到客戶端而導(dǎo)致客戶端的數(shù)據(jù)丟失。由于這兩種方式對(duì)Web應(yīng)用中的實(shí)時(shí)信息和非實(shí)時(shí)信息的請(qǐng)求/響應(yīng)方式都未發(fā)生改變，因此，當(dāng)實(shí)時(shí)信息的請(qǐng)求較為頻繁時(shí)，可能會(huì)造成服務(wù)器端較大的處理壓力，從而影響非實(shí)時(shí)信息的呈現(xiàn)。其中基于HTTP的Web實(shí)時(shí)應(yīng)用模型如圖2所示。

2傳統(tǒng)的Web實(shí)時(shí)通信方案

　　WebSocket協(xié)議［45］是HTML5規(guī)范中的一種新的通信協(xié)議，是能夠在客戶端和服務(wù)器端進(jìn)行異步通信的一種方法。它支持客戶端與服務(wù)器端通過(guò)全雙工通信的方式實(shí)現(xiàn)實(shí)時(shí)通信，本質(zhì)上是一個(gè)基于傳輸控制協(xié)議的協(xié)議。因此，WebSocket連接的建立過(guò)程與傳輸控制協(xié)議連接的建立過(guò)程有些相似，客戶端和服務(wù)器端需要通過(guò)“握手”來(lái)建立WebSocket連接。

　　首先由客戶端向服務(wù)器端發(fā)送一個(gè)HTTP請(qǐng)求，該請(qǐng)求不同于一般的HTTP請(qǐng)求，它包含了一些附加的HTTP頭信息，其中一條信息“Upgrade:WebSocket”表明這是一個(gè)申請(qǐng)將當(dāng)前HTTP協(xié)議升級(jí)為WebSocket協(xié)議的HTTP請(qǐng)求。若服務(wù)器端收到該請(qǐng)求后能正確解讀其HTTP頭信息，那么它會(huì)返回一個(gè)基于HTTP的應(yīng)答報(bào)文給客戶端，此時(shí)連接建立成功［6］，之后，客戶端和服務(wù)器端便可以通過(guò)該連接主動(dòng)向?qū)Ψ桨l(fā)送或者接收數(shù)據(jù)，直到其中一方主動(dòng)關(guān)閉該連接。其中客戶端和服務(wù)器端的交互過(guò)程如圖3所示。

　　通過(guò)WebSocket協(xié)議，客戶端和服務(wù)器端之間只要做一個(gè)“握手”的動(dòng)作就可以建立一條雙向通信的通道。這不僅讓服務(wù)器端可以主動(dòng)與客戶端互發(fā)信息，而且還避免了因客戶端頻繁請(qǐng)求而造成的網(wǎng)絡(luò)資源浪費(fèi)、實(shí)時(shí)通信效率低、服務(wù)器處理壓力大等問(wèn)題［7］。由于WebSocket連接采用WebSocket協(xié)議作為通信協(xié)議，因此在傳輸過(guò)程中數(shù)據(jù)幀的頭部信息所占的字節(jié)數(shù)將大大降低，從而有效地減小了通信過(guò)程中傳輸?shù)臄?shù)據(jù)量和網(wǎng)絡(luò)負(fù)載，節(jié)約了帶寬資源。在基于WebSocket協(xié)議的實(shí)時(shí)通信方案中，Web應(yīng)用中的實(shí)時(shí)部分和非實(shí)時(shí)部分被加以區(qū)分。客戶端使用WebSocket協(xié)議獲取實(shí)時(shí)內(nèi)容，使用HTTP協(xié)議獲取非實(shí)時(shí)內(nèi)容。而服務(wù)器端則采用兩種不同的模塊來(lái)處理實(shí)時(shí)的WebSocket請(qǐng)求和非實(shí)時(shí)的HTTP請(qǐng)求，其應(yīng)用模型如圖4所示?！?/p>

　　通過(guò)上述模型可以看出，該實(shí)時(shí)通信方案使服務(wù)器端的結(jié)構(gòu)更加明確，不僅讓W(xué)ebSocket協(xié)議和HTTP協(xié)議各司其職、互不干擾，而且還降低了系統(tǒng)的耦合性，在最大程度上發(fā)揮了兩個(gè)模塊的功能。此外，由于采用以傳輸控制協(xié)議為基礎(chǔ)的WebSocket協(xié)議來(lái)處理實(shí)時(shí)服務(wù)，因此可以保證傳輸數(shù)據(jù)過(guò)程中的穩(wěn)定性和及時(shí)性，在較大程度上提高了實(shí)時(shí)通信的性能。相對(duì)于傳統(tǒng)方案來(lái)說(shuō)，該方案不僅減小了對(duì)服務(wù)器資源的浪費(fèi)，也減輕了服務(wù)器端的處理壓力。

3基于WebSocket的Web實(shí)時(shí)通信應(yīng)用實(shí)例

　　本文采用基于Node.js［8］的Express框架和Socket.io類庫(kù)來(lái)實(shí)現(xiàn)基于WebSocket的Web實(shí)時(shí)通信應(yīng)用。其中，Node.js是一個(gè)JavaScript運(yùn)行平臺(tái)，可用于構(gòu)建響應(yīng)速度快、容易擴(kuò)展的網(wǎng)絡(luò)程序。但由于Node.js中只提供了大量的低端功能，因此文中將使用Express框架進(jìn)行Web實(shí)時(shí)通信應(yīng)用的開(kāi)發(fā)。Express是一個(gè)能夠在Node.js中使用的 Web應(yīng)用程序開(kāi)發(fā)框架，它提供的一系列強(qiáng)大的特性，能夠讓W(xué)eb應(yīng)用程序的開(kāi)發(fā)變得更加方便、快速。

　　Socket.io是一個(gè)開(kāi)源、跨平臺(tái)且支持客戶端和服務(wù)器端進(jìn)行實(shí)時(shí)雙向通信的WebSocket庫(kù)［9-10］。它包括客戶端的JavaScript庫(kù)和服務(wù)器端的Node.js模塊。它能夠根據(jù)不同的客戶端自動(dòng)在一些實(shí)時(shí)通信機(jī)制中選擇合適的一個(gè)來(lái)實(shí)現(xiàn)Web實(shí)時(shí)應(yīng)用。當(dāng)使用支持HTML5技術(shù)的瀏覽器客戶端進(jìn)行實(shí)時(shí)通信時(shí)，Socket.io會(huì)選譯效率最高、消耗服務(wù)器資源最少的WebSocket協(xié)議來(lái)實(shí)現(xiàn)實(shí)時(shí)通信，并在瀏覽器客戶端發(fā)生變化時(shí)自動(dòng)選擇其他方式進(jìn)行通信。因此，Socket.io能有效解決跨平臺(tái)的實(shí)時(shí)通信問(wèn)題。

　　3.1在線聊天室的設(shè)計(jì)

　　在線聊天室的設(shè)計(jì)分為客戶端與服務(wù)器端兩個(gè)部分，其實(shí)時(shí)通信過(guò)程如圖5所示。

3.2在線聊天室的實(shí)現(xiàn)

　　在線聊天室的實(shí)現(xiàn)也分為客戶端和服務(wù)器端兩個(gè)部分。其中客戶端通過(guò)使用HTML5、層疊樣式表以及JavaScript來(lái)實(shí)現(xiàn)用戶名的驗(yàn)證功能、消息顯示功能和數(shù)據(jù)傳送功能。服務(wù)器端通過(guò)JavaScript來(lái)實(shí)現(xiàn)與客戶端的實(shí)時(shí)通信功能、廣播功能以及在線用戶列表的管理功能。圖8用戶登錄成功時(shí)客戶端與服務(wù)器端的交互圖3.2.1客戶端的實(shí)現(xiàn)過(guò)程

　　當(dāng)有新的客戶端用戶加入聊天室時(shí)，已在聊天室的用戶將會(huì)接收到新用戶加入聊天室的消息且用戶列表會(huì)被即時(shí)更新以顯示新加入的用戶名。新用戶所在頁(yè)面也會(huì)被更新以顯示所有在線用戶。當(dāng)有客戶端用戶在聊天室發(fā)送聊天消息時(shí)，該消息會(huì)被即時(shí)廣播給所有在線用戶。當(dāng)有客戶端用戶退出聊天室時(shí)，其他在線用戶將會(huì)接收到該用戶退出聊天室的消息且用戶列表會(huì)被實(shí)時(shí)更新以移除下線用戶的用戶名。下線用戶所在的頁(yè)面也會(huì)進(jìn)行相應(yīng)的調(diào)整。若用戶在聊天過(guò)程中直接退出聊天室頁(yè)面，則所有在線用戶都會(huì)收到該用戶退出聊天室的消息?？蛻舳说木唧w實(shí)現(xiàn)流程如圖6所示。

　　3.2.2服務(wù)器端的實(shí)現(xiàn)過(guò)程

　　當(dāng)有多個(gè)客戶端用戶存在時(shí)，服務(wù)器端的主要功能包括管理所有在線用戶的用戶列表以及廣播它們之間的聊天消息。服務(wù)器端的具體實(shí)現(xiàn)流程如圖7所示。

　　3.2.3客戶端和服務(wù)器端的交互過(guò)程

　　本文主要針對(duì)用戶成功登錄進(jìn)聊天室的情況進(jìn)行介紹。當(dāng)用戶成功登錄在線聊天室時(shí)，客戶端和服務(wù)器端通過(guò)觸發(fā)事件進(jìn)行實(shí)時(shí)交互，其具體交互過(guò)程如圖8所示。

4結(jié)論

　　傳統(tǒng)的Web實(shí)時(shí)通信方案是在長(zhǎng)期的應(yīng)用實(shí)踐中發(fā)展出來(lái)的，其中比較常用的是基于AJAX的長(zhǎng)輪詢方式和基于Iframe的流方式。但由于這兩種方案都是采用基于HTTP的通信方式，因此當(dāng)Web實(shí)時(shí)應(yīng)用采用這兩種方案時(shí)會(huì)產(chǎn)生難以解決的問(wèn)題。而WebSocket協(xié)議的出現(xiàn)適時(shí)地提供了一種新的Web實(shí)時(shí)通信方案，它能夠更加快捷有效地構(gòu)建出簡(jiǎn)單高效的Web實(shí)時(shí)應(yīng)用。因此，本文通過(guò)分析傳統(tǒng)的Web實(shí)時(shí)通信方案的不足之處，不僅從理論層面分析了基于WebSocket的Web實(shí)時(shí)通信方案的優(yōu)勢(shì)，而且還通過(guò)使用HTML5、層疊樣式表和JavaScript編寫(xiě)了具體的應(yīng)用實(shí)例簡(jiǎn)單的實(shí)現(xiàn)了該方案。隨著WebSocket協(xié)議的不斷發(fā)展，基于WebSocket的Web實(shí)時(shí)通信方案將會(huì)被廣泛應(yīng)用。

參考文獻(xiàn)

　?。?］ 蔡驥然，曹海傳.B/S架構(gòu)下基于OPC與Comet技術(shù)的實(shí)時(shí)監(jiān)控系統(tǒng)［J］.計(jì)算機(jī)應(yīng)用，2012,32(z2):214216.

　?。?］ 文愛(ài)平，文德民.基于IE瀏覽器的Ajax Comet架構(gòu)［J］.電腦知識(shí)與技術(shù)，2010,6(17):46464648.

　?。?］ 張家愛(ài)，孫飛.Comet技術(shù)在Web開(kāi)發(fā)中的研究與應(yīng)用［J］.煤炭技術(shù)，2011,30(12):153154.

　?。?］ 陸晨，馮向陽(yáng),蘇厚勤.HTML5 WebSocket握手協(xié)議的研究與實(shí)現(xiàn)［J］.計(jì)算機(jī)應(yīng)用與軟件，2015,32(1):128131,178.

　?。?］ 李代立，陳榕.WebSocket在Web實(shí)時(shí)通信領(lǐng)域的研究［J］.電腦知識(shí)與技術(shù)，2010,6(28):79237925,7935.

　?。?］ 周東仿，孟寧.基于WebSocket的網(wǎng)絡(luò)設(shè)備自發(fā)現(xiàn)機(jī)制［J］.計(jì)算機(jī)工程與設(shè)計(jì)，2013,34(2):392396,438.

　?。?］ 溫照松，易仁偉，姚寒冰.基于WebSocket的實(shí)時(shí)Web應(yīng)用解決方案［J］.電腦知識(shí)與技術(shù),2012,8(16):38263828.

　?。?］ 王金龍，宋斌，丁銳.Node.js:一種新的Web應(yīng)用構(gòu)建技術(shù)［J］.現(xiàn)代電子技術(shù)，2015,38(6):7073.

　　［9］ 李廣文.基于Socket.io的互動(dòng)教學(xué)即時(shí)反饋系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)［J］.中國(guó)現(xiàn)代教育裝備，2012(18):1012.

　　［10］ 黃經(jīng)贏.基于Socket.io+Node.js+Redis構(gòu)建高效即時(shí)通訊系統(tǒng)［J］.現(xiàn)代計(jì)算機(jī)(專業(yè)版)，2014(19):6264,69.