基于WebRTC的瀏覽器端Web服務(wù)器的設(shè)計(jì)與實(shí)現(xiàn)*

繆 進(jìn)，何加銘

（1. 寧波大學(xué)通信技術(shù)研究所，浙江 寧波 315211；2. 浙江省移動(dòng)網(wǎng)應(yīng)用技術(shù)重點(diǎn)實(shí)驗(yàn)室，浙江 寧波 315211）

基于WebRTC的瀏覽器端Web服務(wù)器的設(shè)計(jì)與實(shí)現(xiàn)*

繆 進(jìn)1,2，何加銘1,2

（1. 寧波大學(xué)通信技術(shù)研究所，浙江 寧波 315211；2. 浙江省移動(dòng)網(wǎng)應(yīng)用技術(shù)重點(diǎn)實(shí)驗(yàn)室，浙江 寧波 315211）

WebRTC具有簡(jiǎn)單易擴(kuò)展、開放標(biāo)準(zhǔn)、開源免費(fèi)的特點(diǎn)。通過介紹利用WebRTC提供的標(biāo)準(zhǔn)API快速開發(fā)Web應(yīng)用，研究了傳統(tǒng)Web服務(wù)器存在的問題，分析了其存在問題的瓶頸，并實(shí)現(xiàn)了基于瀏覽器的Web服務(wù)器。系統(tǒng)地實(shí)現(xiàn)WebRTC技術(shù)可以為Web服務(wù)器提供支持，并能為信息的傳播和分享帶來更多的解決方案。

WebRTC Web服務(wù)器 瀏覽器 Nodejs

1 引言

WWW[1]從首次亮相以來20多年過去了，如今萬維網(wǎng)給全世界人民的信息獲取、檢索和發(fā)布帶來了極大的便利。不同地域、民族和年齡段的人們可以通過網(wǎng)絡(luò)交流并分享信息。網(wǎng)絡(luò)改變了人們的日常生活方式，且不斷向傳統(tǒng)行業(yè)滲透，越來越多的行業(yè)都在使用萬維網(wǎng)來提升自己的競(jìng)爭(zhēng)力。

隨著通信網(wǎng)絡(luò)和互聯(lián)網(wǎng)的飛速發(fā)展，基于瀏覽器的實(shí)時(shí)通信技術(shù)RTC Web[2]或者是WebRTC[3-4]受到了各大IT巨頭和初創(chuàng)公司的青睞。這種技術(shù)使得瀏覽器之間有了對(duì)等通信的能力，使用該技術(shù)瀏覽器可以運(yùn)用P2P的特性實(shí)時(shí)傳送內(nèi)容。和目前基于瀏覽器的準(zhǔn)實(shí)時(shí)通信技術(shù)相比，該技術(shù)在時(shí)延、成本和安全性方面都有較大的優(yōu)勢(shì)。

本文圍繞WWW信息分享需求和WebRTC提供的Peer-To-Peer特性，提出了一種新的，有別于傳統(tǒng)服務(wù)器和免費(fèi)個(gè)人建站的解決方案，給用戶提供了一種分布式、基于瀏覽器的低成本、高可用性的Web服務(wù)器。同時(shí)，文章中也分析了傳統(tǒng)Web服務(wù)器的弊端和新的服務(wù)器帶來的可能性，并對(duì)未來Web發(fā)展做出了展望。

圖1 客戶端瀏覽器對(duì)服務(wù)器端進(jìn)行一次請(qǐng)求過程

2 傳統(tǒng)Web服務(wù)器存在的問題

Web服務(wù)器即WWW（WORLD WIDE WEB）服務(wù)器，其主要提供網(wǎng)上信息瀏覽和檢索服務(wù)。WWW是Internet上最受歡迎、最為流行的多媒體信息查詢工具，是Internet上20多年前誕生的服務(wù)，也是發(fā)展最迅速和當(dāng)前應(yīng)用最廣泛的服務(wù)。正是因?yàn)橛辛薟WW工具，近年來Internet和移動(dòng)互聯(lián)網(wǎng)才能得到迅速發(fā)展，PC端和移動(dòng)端的用戶數(shù)量不斷激增。

Web服務(wù)器的主要功能是存儲(chǔ)、處理用戶請(qǐng)求的資源及數(shù)據(jù)，同時(shí)向客戶端分發(fā)網(wǎng)頁。客戶端和服務(wù)器之間的交互通過HTTP協(xié)議進(jìn)行。通常分發(fā)的頁面是HTML文檔，主要是文本內(nèi)容，包括圖片、樣式和交互腳本。

2.1 傳統(tǒng)Web服務(wù)器處理客戶請(qǐng)求的過程客戶端的請(qǐng)求交給服務(wù)器處理，服務(wù)器端的監(jiān)聽程序被動(dòng)等待客戶瀏覽器發(fā)起請(qǐng)求。用戶的每次請(qǐng)求都交由服務(wù)器處理，解析URL、尋找請(qǐng)求的文件、生成靜態(tài)頁面文檔并發(fā)回客戶端瀏覽器，具體過程如圖1所示。當(dāng)服務(wù)客戶數(shù)量過多或者同一時(shí)間網(wǎng)絡(luò)流量過大，則會(huì)造成服務(wù)器資源負(fù)荷過大、處理速度過慢、帶寬不足，從而導(dǎo)致響應(yīng)速度變慢等問題，更有甚者會(huì)造成服務(wù)器崩潰無法訪問。

2.2 集中式和分布式

傳統(tǒng)Web服務(wù)器采用集中式管理，所有資源和數(shù)據(jù)放置在機(jī)房或者公司內(nèi)部，服務(wù)器故障或者斷電將導(dǎo)致站點(diǎn)或者服務(wù)無法訪問。即使有做服務(wù)器分布式配置，也不能保證服務(wù)的不間斷運(yùn)行，在管理和配置不當(dāng)時(shí)則可能導(dǎo)致大量數(shù)據(jù)和文件丟失。該技術(shù)提出的解決方案，所有資源放在用戶自己的電腦中，即使面臨數(shù)據(jù)丟失的風(fēng)險(xiǎn)，造成的損失和傳統(tǒng)服務(wù)器的災(zāi)難性故障相比也是可以接受的。分布的世界各地作為服務(wù)器的瀏覽器，可以有效利用PC和網(wǎng)絡(luò)資源，帶來更多的價(jià)值。

2.3 安全性和穩(wěn)定性

Web服務(wù)器使用的操作系統(tǒng)份額最大的是Windows、Linux與Unix。這些Web服務(wù)器的配置和管理比較繁瑣，且安全問題日益突出。最近爆出的OpenSSL[5]漏洞導(dǎo)致眾多科技公司賬號(hào)泄露，引起了大家對(duì)互聯(lián)網(wǎng)安全的一陣恐慌。相反地，由于瀏覽器屬于用戶特別廣的產(chǎn)品，安全性極高，各大公司應(yīng)對(duì)問題的速度相應(yīng)較快，即使存在漏洞，影響的數(shù)據(jù)也很有限，不會(huì)導(dǎo)致整個(gè)系統(tǒng)發(fā)生故障。

2.4 成本問題

傳統(tǒng)Web服務(wù)器需要購(gòu)買硬件和網(wǎng)絡(luò)帶寬，必要時(shí)可能需要CDN加速。現(xiàn)行的云服務(wù)器價(jià)格也不算便宜，在用戶需求簡(jiǎn)單，只需要分享信息和發(fā)布公告功能的情況下可能會(huì)造成殺雞用牛刀的尷尬局面。近年來，節(jié)能減排的需求日益迫切，有關(guān)服務(wù)器的功耗問題被提出，眾多科技公司紛紛提出自己的解決方案。谷歌自建機(jī)房，提出了多種降低能耗的解決方案，并應(yīng)用于實(shí)戰(zhàn)，但是巨大的資金投入不是一般公司能承受的。本文提出的服務(wù)器內(nèi)置于用戶的瀏覽器，能有效利用PC的各種資源，并能合理使用當(dāng)前的帶寬，極大地降低了服務(wù)器的運(yùn)行成本。

3 WebRTC介紹及其技術(shù)特點(diǎn)

WebRTC（Web real-time communication，Web實(shí)時(shí)通信）從名稱上看即知它是一項(xiàng)使用Web實(shí)現(xiàn)實(shí)時(shí)通信的技術(shù)。WebRTC能夠在瀏覽器內(nèi)進(jìn)行實(shí)時(shí)視頻和音頻通信，還支持遠(yuǎn)程協(xié)作與網(wǎng)絡(luò)游戲等實(shí)時(shí)性交互式應(yīng)用，已被W3C納入HTML5標(biāo)準(zhǔn)。Web 2.0在過去的幾年里擴(kuò)展了瀏覽器的可編程性和交互性，增加了更多的動(dòng)態(tài)內(nèi)容和格式。然而，Web技術(shù)還不足以應(yīng)付實(shí)時(shí)雙向的視頻和語音通信需求。如果使用Adobe的Flash或Microsoft的Silverlight等瀏覽器插件則明顯存在靈活性和性能等方面的不足。利用WebRTC技術(shù)能夠開發(fā)具有實(shí)時(shí)音視頻通信功能的Web應(yīng)用，移動(dòng)應(yīng)用也可以使用其核心功能實(shí)現(xiàn)實(shí)時(shí)音視頻通信。有了這些應(yīng)用作為基礎(chǔ)，再結(jié)合其他的優(yōu)秀技術(shù)，則可以開發(fā)出更多具有創(chuàng)意的Web APP和移動(dòng)應(yīng)用。

如圖2所示，WebRTC系統(tǒng)架構(gòu)[6]根據(jù)面向的用戶不同分為3個(gè)部分和1個(gè)核心庫(kù)。面向Web應(yīng)用開發(fā)者的Web API部分、瀏覽器廠商API部分和瀏覽器廠商自定義部分，這3個(gè)部分共享WebRTC核心庫(kù)。Web應(yīng)用開發(fā)者調(diào)用W3C制定的JavaScript API開發(fā)WebRTC的應(yīng)用。瀏覽器之間雙向媒體流的發(fā)送和接收通過PeerConnection API進(jìn)行管理，使用JSEP[7]（JavaScript session establishment protocol，JavaScript會(huì)話建立協(xié)議）進(jìn)行媒體參數(shù)的協(xié)商。使用Data Channels API進(jìn)行瀏覽器之間收發(fā)多媒體的數(shù)據(jù)流是WebRTC最常見的應(yīng)用場(chǎng)景。

WebRTC技術(shù)的主要優(yōu)點(diǎn)如下：

（1）開放的標(biāo)準(zhǔn)

互聯(lián)網(wǎng)的成功離不開開放和免費(fèi)，其中HTTP、HTML和TCP/IP都是功臣。WebRTC已加入到由W3C和IETF標(biāo)準(zhǔn)組織共同定義的一個(gè)開放的HTML5標(biāo)準(zhǔn)。為支持高質(zhì)量、完整的音視頻傳輸解決方案，W3C的WebRTC工作組為開發(fā)者定義了基于瀏覽器的Web API。

圖2 WebRTC系統(tǒng)架構(gòu)

（2）簡(jiǎn)單和易擴(kuò)展性

為方便開發(fā)者通過互聯(lián)網(wǎng)提供音視頻和多媒體數(shù)據(jù)等多種應(yīng)用和服務(wù)，WebRTC提供簡(jiǎn)單的、可擴(kuò)展性強(qiáng)的技術(shù)框架。WebRTC本身并不定義媒體流的路由方式、同用戶之間的交互方式、呼叫協(xié)議、身份認(rèn)證及同其他網(wǎng)絡(luò)的互聯(lián)方式等。這些規(guī)則由服務(wù)提供商和開發(fā)者根據(jù)不同的業(yè)務(wù)場(chǎng)景和技術(shù)需求進(jìn)行靈活選擇和協(xié)商[8]。

（3）廠商的廣泛支持

WebRTC技術(shù)獲得來自全球各大廠商和初創(chuàng)公司的廣泛支持。除了瀏覽器廠商Google、Mozilla和Opera外，其他大公司也對(duì)WebRTC表現(xiàn)出了強(qiáng)烈的興趣。如運(yùn)營(yíng)商Telefonica、AT&T，設(shè)備商Cisco、Acme Packet、Ericsson、Alcatel Lucent、Avaya，初創(chuàng)公司Addlive、Apizee、ClassOnlive、OnSIP、PubNub、Zingaya。近期確認(rèn)的Snapchat收購(gòu)Addlive也說明了WebRTC技術(shù)的巨大潛力。WebRTC技術(shù)在美國(guó)、歐洲和亞洲都得到了廣泛的關(guān)注，中國(guó)和韓國(guó)的不少?gòu)S商正在加緊研發(fā)基于該技術(shù)的產(chǎn)品。

（4）與其他技術(shù)的融合

圖3 傳統(tǒng)服務(wù)器處理多用戶請(qǐng)求

WebRTC技術(shù)可以輕松實(shí)現(xiàn)與其他先進(jìn)技術(shù)的結(jié)合，如人臉識(shí)別、虛擬現(xiàn)實(shí)手勢(shì)控制等，也可以通過瀏覽器端強(qiáng)大的通信能力和HTML5技術(shù)開發(fā)出在線多人游戲和SNS應(yīng)用。

（5）與運(yùn)營(yíng)商的互補(bǔ)

目前，華為發(fā)布的一款基于WebRTC技術(shù)的富媒體通信能力開放網(wǎng)關(guān)[9]已經(jīng)引起了全球多家領(lǐng)先電信運(yùn)營(yíng)商對(duì)華為WebRTC解決方案的濃厚興趣，并希望展開進(jìn)一步的交流與合作。WebRTC技術(shù)也可作為運(yùn)營(yíng)商既有業(yè)務(wù)的有效補(bǔ)充，如通過WebRTC提供會(huì)議、IMS服務(wù)等。

圖4 Nodejs服務(wù)器處理多用戶請(qǐng)求

圖5 系統(tǒng)功能模塊圖

4 基于WebRTC的瀏覽器端服務(wù)器設(shè)計(jì)與實(shí)現(xiàn)

4.1 服務(wù)器設(shè)計(jì)選型

由于使用瀏覽器作為Web服務(wù)器提供對(duì)外訪問，主要提供靜態(tài)HTML頁面的訪問、圖片和文件分享功能。Nodejs是一個(gè)事件驅(qū)動(dòng)I/O服務(wù)端JavaScript環(huán)境，基于Google的V8引擎。目的是為了實(shí)現(xiàn)可擴(kuò)展的網(wǎng)絡(luò)程序，如Web服務(wù)。Nodejs采用“事件循環(huán)（event loop）”的架構(gòu)，使得編寫可擴(kuò)展性高的服務(wù)器端程序變得既容易又安全。Nodejs在靜態(tài)頁面請(qǐng)求處理上有著極大的優(yōu)勢(shì)，處理用戶請(qǐng)求對(duì)比如圖3、圖4所示。Nodejs不適用于以下2種場(chǎng)景：計(jì)算密集型應(yīng)用和邏輯十分復(fù)雜的事務(wù)。雖然Nodejs在以上2種場(chǎng)景下有短板，由于本系統(tǒng)并不涉及過多的計(jì)算和復(fù)雜的邏輯，所以采用Nodejs搭建Web服務(wù)器，并采用Nodejs的快速開發(fā)框架express實(shí)現(xiàn)Web服務(wù)器的快速成型。

4.2 瀏覽器端服務(wù)器整體設(shè)計(jì)

前端采用Backbone.js作為MVC框架，使用jQuery操作DOM，應(yīng)用handlebars作為HTML模板，coffee script編寫并編譯成JavaScript代碼。通過socket.io與后臺(tái)交互。Nodejs作為JavaScript異步服務(wù)器，express.js作為Node Web服務(wù)器，并加載http模塊和fs文件模塊進(jìn)行網(wǎng)絡(luò)通信和文件操作。系統(tǒng)功能模塊圖如圖5所示。

4.3 瀏覽器端服務(wù)器的工作流程及演示圖

客戶A的瀏覽器A訪問Nodejs服務(wù)器（http:// theServerURL/），輸入服務(wù)器名稱創(chuàng)建服務(wù)器xxx。此時(shí)應(yīng)用服務(wù)器向STUN服務(wù)器注冊(cè)服務(wù)器A的域名信息并提供A的NAT穿越所需信息，最后生成瀏覽器端服務(wù)器A（http://theServerURL/server/xxx/)）。此服務(wù)器A對(duì)客戶A提供內(nèi)容修改、動(dòng)態(tài)路徑、模板管理和會(huì)話管理功能。此時(shí)客戶B欲訪問A創(chuàng)建的首頁http://theServerURL/connect/xxx/，首先向遠(yuǎn)程STUN服務(wù)器請(qǐng)求A的P2P穿越信息，根據(jù)穿越信息訪問到服務(wù)器xxx，xxx根據(jù)B請(qǐng)求的URL地址返回相應(yīng)的數(shù)據(jù)和資源。服務(wù)端界面圖如圖6所示，客戶端顯示用戶創(chuàng)建的內(nèi)容如圖7所示。

圖6 服務(wù)端界面圖

圖7 客戶端顯示用戶創(chuàng)建的內(nèi)容

5 結(jié)束語

WebRTC最具價(jià)值的技術(shù)就是實(shí)現(xiàn)瀏覽器之間的數(shù)據(jù)傳輸和分享。一個(gè)可能的應(yīng)用場(chǎng)景是未來用戶的電腦上只有1個(gè)瀏覽器，但是可以直接通過瀏覽器和Internet連接。用戶能直接搭建屬于自己的臨時(shí)服務(wù)器，把需要的信息分享出去，用戶關(guān)閉瀏覽器即關(guān)閉服務(wù)器，這種閱后即焚[10]的場(chǎng)景提供了更大的創(chuàng)新空間。這種基于B/B的模式可能會(huì)對(duì)目前的B/S模式的各類應(yīng)用產(chǎn)生巨大的影響。基于WebRTC的P2P傳輸技術(shù)同樣給移動(dòng)互聯(lián)網(wǎng)行業(yè)帶來了巨大的可能性。目前眾多WebRTC初創(chuàng)公司爆發(fā)出來的潛力已經(jīng)給出了很好的佐證。在移動(dòng)互聯(lián)網(wǎng)飛速發(fā)展的3～5年內(nèi)，伴隨著HTML5標(biāo)準(zhǔn)的日益成熟，WebRTC技術(shù)將會(huì)得到廣泛的應(yīng)用。在不久的將來可能會(huì)出現(xiàn)基于移動(dòng)終端的Web服務(wù)器或者嵌入式設(shè)備的Web服務(wù)器，這給人們的信息分享和傳播帶來了無限可能。

[1] Wikipedia. World Wide Web[EB/OL]. [2014-08-22]. http://en.wikipedia.org/wiki/World_Wide_Web.

[2] IETF RTCWeb Workgroup. Rtcweb Status Pages[EB/OL]. [2014-04-16]. http://tools.ietf.org/wg/rtcweb/charters.

[3] 屈振華,李慧云,張海濤,等. WebRTC技術(shù)初探[J]. 電信科學(xué), 2012(10): 106-110.

[4] Adam Bergkvist, Daniel C Burnett, Cullen Jenningsetal. WebRTC 1.0: Real-Time[Z]. 2013.

[5] 楊勇,鄒雷. OpenSSL Heartbleed漏洞研究及啟示[J]. 信息安全與通信保密, 2014(5): 99-102.

[6] 張志明,柯衛(wèi). 基于HTML5的視頻通信云服務(wù)應(yīng)用技術(shù)研究[J]. 電信科學(xué), 2012(10): 31-37.

[7] IETF RTCWeb JSEP. JavaScript session establishment protocol[EB/OL]. [2014-06-04]. http://datatracker.ietf. org/docc/draft-ietf-rteweb-jsep/.

[8] 林鴻,王松,楊鑫,等. 基于WebRTC技術(shù)的應(yīng)用及平臺(tái)技術(shù)開發(fā)與設(shè)計(jì)[J]. 電信科學(xué), 2013(9): 20-25.

[9] 華為發(fā)布業(yè)界第一款基于WebRTC技術(shù)的富媒體通信能力開放網(wǎng)關(guān)[J]. 電信網(wǎng)技術(shù), 2013(5): 70-70.

[10] 郭文東. 米聊2014新功能 獨(dú)家搶先體驗(yàn)[J]. 計(jì)算機(jī)與網(wǎng)絡(luò), 2014(3): 46-47.★

繆進(jìn)：碩士研究生就讀于寧波大學(xué)，研究方向?yàn)橐苿?dòng)通信、移動(dòng)互聯(lián)網(wǎng)。

何加銘：教授，博士生導(dǎo)師，主要研究方向?yàn)橐苿?dòng)通信。

Design and Implementation of Web Server in Browser Based on WebRTC

MIAO Jin1,2, HE Jia-ming1,2

(1. Institute of Communication Technology, Ningbo University, Ningbo 315211, China; 2. Mobile Network Application Technology Key Laboratory of Zhejiang Province, Ningbo 315211, China)

WebRTC has the features of simplicity, easy expansibility, open standard and free & open source. The rapid development of Web applications by means of standard API in WebRTC was introduced and some problems in traditional Web server were researched. The bottleneck of these problems was analyzed and the Web server based on browser was implemented. WebRTC not only provides support to Web server, but brings more solutions to information distribution and sharing.

WebRTC Web server browser Nodejs

10.3969/j.issn.1006-1010.2015.08.012

TP393

A

1006-1010(2015)08-0056-05

繆進(jìn),何加銘. 基于WebRTC的瀏覽器端Web服務(wù)器的設(shè)計(jì)與實(shí)現(xiàn)[J]. 移動(dòng)通信, 2015,39(8): 56-60.

浙江省重大科技專項(xiàng)（2011C11042）；浙江省移動(dòng)網(wǎng)絡(luò)應(yīng)用技術(shù)聯(lián)合重點(diǎn)實(shí)驗(yàn)室（2010E10005）；浙江省移動(dòng)互聯(lián)網(wǎng)用戶端軟件科技創(chuàng)新團(tuán)隊(duì)（2010R50009）；浙江省重點(diǎn)科技創(chuàng)新團(tuán)隊(duì)項(xiàng)目（2012R10009-11、2012R10009-20）

2014-11-19

責(zé)任編輯：劉妙 liumiao@mbcom.cn