(华侨大学 工学院,福建 泉州 362021)
择要:随着互联网技能的不断发展,Web技能在各个领域得到了不同程度的利用,人们对付Web运用的实时性提出了更高的哀求,HTML5WebSocket协议因此得到了广泛的关注。通过对基于HTTP的传统Web实时通信方案进行剖析,针对个中的不敷与缺陷,深入先容了基于HTML5 WebSocket协议的实时通信机制以及相对付传统方案的上风,并通过利用Node.js的Express框架和HTML5 WebSocket协议的第三方运用程序编程接口Socket.io类库实现了一个基于WebSocket协议的Web运用。经实验表明,所描述的研究能成功地在客户端和做事器端完成基于HTML5 WebSocket协议的实时通信过程并建立连接。
0弁言
随着互联网技能的高速发展,人们对Web运用的实时性哀求越来越高,传统的Web实时通信方案已经无法知足一些现实运用的需求。在长期的Web运用过程中该传统方案逐渐露出资源摧残浪费蹂躏、实时性不高档问题,这些问题的涌现对一些实时性哀求较高的Web运用(如在线游戏、在线证券、设备监控等)造成了不好的用户体验。除此之外,这些不敷还会制约Web实时通信的性能,对通信效率造成影响。面对这种情形,HTML5规范中定义了WebSocket协议来实现更好的用户体验和实时通信功能,并针对传统的Web实时通信方案在实际利用中产生的资源摧残浪费蹂躏问题进行改进,提高通信效率。
目前,WebSocket协议的实现紧张分为客户端和做事器端两部分。对付其客户端而言,许多的主流浏览器(包括个人电脑和移动终端)如谷歌、火狐、IE等都在不同的版本上支持WebSocket客户端运用程序编程接口。而对付其做事器端而言,也有许多常见的运用做事器如WebSphere、WebLogic、Tomcat等在不同的版本上支持WebSocket做事器端运用程序编程接口。综上所述,本文从传统的Web实时通信方案出发,针对其在Web运用中所表示的不敷与缺陷,深入研究WebSocket协议在Web实时通信方面的事理与上风,并根据该协议的通信机制进行实现。
1传统的Web实时通信方案
1.1轮询
在早期的Web运用中,所采取的Web实时通信方案是轮询。在利用轮询时,客户端须要频繁地向做事器端发送HTTP要求来保持客户端和做事器真个同步以便不断地刷新客户端所要呈现的信息。在这个过程中,客户端无法确定得当的韶光间隔向做事器端发送HTTP要求。若间隔的韶光太短,客户端频繁的要求将会给做事器端造成巨大的压力;若间隔的韶光太长,就无法知足客户端和做事器端实时通信的哀求。由于客户端在频繁地发送要求时做事器真个数据可能还未进行更新,导致做事器端返回的大部分应答包中的数据域为空,因而产生了很多无谓的网络传输,摧残浪费蹂躏了大量的带宽资源和其他网络资源。对付图1客户端与做事器真个交互图每次的HTTP要求而言,过长的HTTP头信息也会占用不必要的带宽资源。因此,这是一种缺少灵巧性又低效的Web实时通信方案。个中客户端和做事器真个交互过程如图1(a)所示。
1.2Comet技能
目前,Comet技能[1]的实现办法包括基于异步JavaScript和可扩展标记措辞(Asynchronous JavaScript and Extensible Markup Language,AJAX)的长轮询办法和基于Iframe的流办法。这两种办法针对轮询都做出了较大的改进。
1.2.1基于AJAX的长轮询办法
基于AJAX的长轮询办法[2]通过采取AJAX技能让客户端向做事器端发送HTTP要求,进而与做事器端建立连接,且该连接会在做事器端保持一段韶光。若做事器端检测到有新数据产生,那么它会将这些数据通过连接发送至客户端,然后关闭连接;若做事器端在连接存在期间都没有产生新的数据发送至客户端,那么它将会向客户端发送一个超时信息,然后关闭连接。无论做事器真个数据是否还在更新,在连接关闭之后,客户端都须要重新向做事器端发送HTTP要求来建立连接。个中客户端和做事器真个交互过程如图1(b)所示。
虽然这种办法能够对客户真个部分页面进行更新,减少做事器端发送的数据量,降落客户端要求的频率,减少无效的网络传输,但当做事器端更新数据的速率较快时,基于AJAX的长轮询办法将变成普通的轮询,不仅会降落其性能,而且还会对做事器端造成较大的处理压力。除此之外,为了保持HTTP连接永劫光处于打开状态,做事器端也须要花费一定的做事器资源。因此,利用基于AJAX的长轮询办法会产生资源摧残浪费蹂躏的问题。
1.2.2基于Iframe的流办法
基于Iframe的流办法[3]通过客户端页面上内嵌的一个Iframe标签向做事器端发送HTTP要求,做事器端在相应当要求后与客户端建立一条长连接。连接建立后,做事器端通过不断地更新该连接的状态以保持其不过期。当做事器端检测到有新数据产生时,它会将新数据通过该连接发送给客户端;当客户端和做事器端之间的通信涌现问题导致连接涌现缺点或者关闭时,客户端会立即发出连接要求与做事器端重新建立连接,否则该连接会一贯持续,不会关闭。个中客户端和做事器真个交互过程如图1(c)所示。
虽然这种办法有利于减少客户真个要求次数,减轻客户端和做事器端之间的网络包袱,避免因频繁的建立连接和关闭连接所带来的资源摧残浪费蹂躏,但由于基于Iframe的流办法在连接过程中始终只坚持一个长连接,因此客户端页面会一贯处于加载过程中而无法显示页面加载完成,从而影响用户体验。且当有多个客户端同时向做事器端发送HTTP要求时,由于做事器端长期只坚持一个连接,因此会导致做事器端在这种高并发状态下的处理能力降落,造成大量的做事器资源和其他网络资源被花费。
由于基于AJAX的长轮询办法和基于Iframe的流办法在通信过程中一贯采取HTTP作为通信协议,因此每次的HTTP要乞降应答所携带的完全的HTTP头信息不仅增加了实时更新信息时的数据传输量,还造成带宽资源的摧残浪费蹂躏。此外,为了坚持和折衷通信过程中HTTP连接随时处于可用状态,做事器端也须要花费资源。对付HTTP连接的建立和关闭过程而言,做事器端新产生的数据有可能会由于无法及时发送到客户端而导致客户真个数据丢失。由于这两种办法对Web运用中的实时信息和非实时信息的要求/相应办法都未发生改变,因此,当实时信息的要求较为频繁时,可能会造成做事器端较大的处理压力,从而影响非实时信息的呈现。个中基于HTTP的Web实时运用模型如图2所示。
2传统的Web实时通信方案
WebSocket协议[45]是HTML5规范中的一种新的通信协议,是能够在客户端和做事器端进行异步通信的一种方法。它支持客户端与做事器端通过全双工通信的办法实现实时通信,实质上是一个基于传输掌握协议的协议。因此,WebSocket连接的建立过程与传输掌握协议连接的建立过程有些相似,客户端和做事器端须要通过“握手”来建立WebSocket连接。
首先由客户端向做事器端发送一个HTTP要求,该要求不同于一样平常的HTTP要求,它包含了一些附加的HTTP头信息,个中一条信息“Upgrade:WebSocket”表明这是一个申请将当前HTTP协议升级为WebSocket协议的HTTP要求。若做事器端收到该要求后能精确解读其HTTP头信息,那么它会返回一个基于HTTP的应答报文给客户端,此时连接建立成功[6],之后,客户端和做事器端便可以通过该连接主动向对方发送或者吸收数据,直到个中一方主动关闭该连接。个中客户端和做事器真个交互过程如图3所示。
通过WebSocket协议,客户端和做事器端之间只要做一个“握手”的动作就可以建立一条双向通信的通道。这不仅让做事器端可以主动与客户端互发信息,而且还避免了因客户端频繁要求而造成的网络资源摧残浪费蹂躏、实时通信效率低、做事器处理压力大等问题[7]。由于WebSocket连接采取WebSocket协议作为通信协议,因此在传输过程中数据帧的头部信息所占的字节数将大大降落,从而有效地减小了通信过程中传输的数据量和网络负载,节约了带宽资源。在基于WebSocket协议的实时通信方案中,Web运用中的实时部分和非实时部分被加以区分。客户端利用WebSocket协议获取实时内容,利用HTTP协议获取非实时内容。而做事器端则采取两种不同的模块来处理实时的WebSocket要乞降非实时的HTTP要求,其运用模型如图4所示。
通过上述模型可以看出,该实时通信方案使做事器真个构造更加明确,不仅让WebSocket协议和HTTP协议各司其职、互不滋扰,而且还降落了系统的耦合性,在最大程度上发挥了两个模块的功能。此外,由于采取以传输掌握协议为根本的WebSocket协议来处理实时做事,因此可以担保传输数据过程中的稳定性和及时性,在较大程度长进步了实时通信的性能。相对付传统方案来说,该方案不仅减小了对做事器资源的摧残浪费蹂躏,也减轻了做事器真个处理压力。
3基于WebSocket的Web实时通信运用实例
本文采取基于Node.js[8]的Express框架和Socket.io类库来实现基于WebSocket的Web实时通信运用。个中,Node.js是一个JavaScript运行平台,可用于构建相应速率快、随意马虎扩展的网络程序。但由于Node.js中只供应了大量的低端功能,因此文中将利用Express框架进行Web实时通信运用的开拓。Express是一个能够在Node.js中利用的 Web运用程序开拓框架,它供应的一系列强大的特性,能够让Web运用程序的开拓变得更加方便、快速。
Socket.io是一个开源、跨平台且支持客户端和做事器端进行实时双向通信的WebSocket库[9-10]。它包括客户真个JavaScript库和做事器真个Node.js模块。它能够根据不同的客户端自动在一些实时通信机制中选择得当的一个来实现Web实时运用。当利用支持HTML5技能的浏览器客户端进行实时通信时,Socket.io会选译效率最高、花费做事器资源最少的WebSocket协议来实现实时通信,并在浏览器客户端发生变革时自动选择其他办法进行通信。因此,Socket.io能有效办理跨平台的实时通信问题。
3.1在线谈天室的设计
在线谈天室的设计分为客户端与做事器端两个部分,其实时通信过程如图5所示。
3.2在线谈天室的实现
在线谈天室的实现也分为客户端和做事器端两个部分。个中客户端通过利用HTML5、层叠样式表以及JavaScript来实现用户名的验证功能、显示功能和数据传送功能。做事器端通过JavaScript来实现与客户真个实时通信功能、广播功能以及在线用户列表的管理功能。图8用户登录成功时客户端与做事器真个交互图3.2.1客户真个实现过程
当有新的客户端用户加入谈天室时,已在谈天室的用户将会吸收到新用户加入谈天室的且用户列表会被即时更新以显示新加入的用户名。新用户所在页面也会被更新以显示所有在线用户。当有客户端用户在谈天室发送谈天时,该会被即时广播给所有在线用户。当有客户端用户退出谈天室时,其他在线用户将会吸收到该用户退出谈天室的且用户列表会被实时更新以移除下线用户的用户名。下线用户所在的页面也会进行相应的调度。若用户在谈天过程中直接退出谈天室页面,则所有在线用户都会收到该用户退出谈天室的。客户真个详细实现流程如图6所示。
3.2.2做事器真个实现过程
当有多个客户端用户存在时,做事器真个紧张功能包括管理所有在线用户的用户列表以及广播它们之间的谈天。做事器真个详细实现流程如图7所示。
3.2.3客户端和做事器真个交互过程
本文紧张针对用户成功登录进谈天室的情形进行先容。当用户成功登录在线谈天室时,客户端和做事器端通过触发事宜进行实时交互,其详细交互过程如图8所示。
4结论
传统的Web实时通信方案是在长期的运用实践中发展出来的,个中比较常用的是基于AJAX的长轮询办法和基于Iframe的流办法。但由于这两种方案都是采取基于HTTP的通信办法,因此当Web实时运用采取这两种方案时会产生难以办理的问题。而WebSocket协议的涌现应时地供应了一种新的Web实时通信方案,它能够更加快捷有效地构建出大略高效的Web实时运用。因此,本文通过剖析传统的Web实时通信方案的不敷之处,不仅从理论层面剖析了基于WebSocket的Web实时通信方案的上风,而且还通过利用HTML5、层叠样式表和JavaScript编写了详细的运用实例大略的实现了该方案。随着WebSocket协议的不断发展,基于WebSocket的Web实时通信方案将会被广泛运用。
参考文献
[1] 蔡骥然,曹海传.B/S架构下基于OPC与Comet技能的实时监控系统[J].打算机运用,2012,32(z2):214216.
[2] 文爱平,文德民.基于IE浏览器的Ajax Comet架构[J].电脑知识与技能,2010,6(17):46464648.
[3] 张家爱,孙飞.Comet技能在Web开拓中的研究与运用[J].煤炭技能,2011,30(12):153154.
[4] 陆晨,冯旭日,苏厚勤.HTML5 WebSocket握手协议的研究与实现[J].打算机运用与软件,2015,32(1):128131,178.
[5] 李代立,陈榕.WebSocket在Web实时通信领域的研究[J].电脑知识与技能,2010,6(28):79237925,7935.
[6] 周东仿,孟宁.基于WebSocket的网络设备自发现机制[J].打算机工程与设计,2013,34(2):392396,438.
[7] 温照松,易仁伟,姚寒冰.基于WebSocket的实时Web运用办理方案[J].电脑知识与技能,2012,8(16):38263828.
[8] 王金龙,宋斌,丁锐.Node.js:一种新的Web运用构建技能[J].当代电子技能,2015,38(6):7073.
[9] 李广文.基于Socket.io的互动传授教化即时反馈系统的设计与实现[J].中国当代教诲装备,2012(18):1012.
[10] 黄经赢.基于Socket.io+Node.js+Redis构建高效即时通讯系统[J].当代打算机(专业版),2014(19):6264,69.