使用 HTML5 WebSocket 构建实时 Web 应用

《使用 HTML5 WebSocket 构建实时 Web 应用》由会员分享，可在线阅读，更多相关《使用 HTML5 WebSocket 构建实时 Web 应用（16页珍藏版）》请在装配图网上搜索。

1、作为下一代的Web标准，HTML5拥有许多引人注目的新特性，如Canvas、本地存储、 多媒体编程接口、WebSocket等等。这其中有“Web的TCP 之称的WebSocket格 外吸引开发人员的注意。WebSocket的出现使得浏览器提供对Socket的支持成为可能， 从而在浏览器和服务器之间提供了一个基于TCP连接的双向通道。Web开发人员可以非 常方便地使用WebSocket构建实时web应用，开发人员的手中从此又多了一柄神兵利 器。本文首先介绍HTML5WebSocket的基本概念以及这个规范试图解决的问题，然后 介绍WebSocket的基本原理和编程接口。接下来会通过一个简单案例来

2、示范怎样实现一 个WebSocket应用，并且展示WebSocket如何在功能强大和编程简单易用上达到的完 美统一。最后介绍了目前主流浏览器对WebSocket支持的状况、局限性以及未来的展望。 实时Web应用的窘境Web应用的信息交互过程通常是客户端通过浏览器发出一个请求，服务器端接收和审核完 请求后进行处理并返回结果给客户端，然后客户端浏览器将信息呈现出来，这种机制对于信 息变化不是特别频繁的应用尚能相安无事，但是对于那些实时要求比较高的应用来说，比如 说在线游戏、在线证券、设备监控、新闻在线播报、RSS订阅推送等等，当客户端浏览器 准备呈现这些信息的时候，这些信息在服务器端可能已经过时了

3、。所以保持客户端和服务器 端的信息同步是实时Web应用的关键要素，对Web开发人员来说也是一个难题。在 WebSocket规范出来之前，开发人员想实现这些实时的Web应用，不得不采用一些折 衷的方案，其中最常用的就是轮询（Polling）和Comet技术，而Comet技术实际上是 轮询技术的改进，又可细分为两种实现方式，一种是长轮询机制，一种称为流技术。下面我 们简单介绍一下这几种技术：轮询: 这是最早的一种实现实时Web应用的方案。客户端以一定的时间间隔向服务端发出请求， 以频繁请求的方式来保持客户端和服务器端的同步。这种同步方案的最大问题是，当客户端 以固定频率向服务器发起请求的时候，服务

4、器端的数据可能并没有更新，这样会带来很多无 谓的网络传输，所以这是一种非常低效的实时方案。长轮询：长轮询是对定时轮询的改进和提高，目地是为了降低无效的网络传输。当服务器端没有数据 更新的时候，连接会保持一段时间周期直到数据或状态改变或者时间过期，通过这种机制来 减少无效的客户端和服务器间的交互。当然，如果服务端的数据变更非常频繁的话，这种机 制和定时轮询比较起来没有本质上的性能的提高。流：流技术方案通常就是在客户端的页面使用一个隐藏的窗口向服务端发出一个长连接的请求。 服务器端接到这个请求后作出回应并不断更新连接状态以保证客户端和服务器端的连接不 过期。通过这种机制可以将服务器端的信息源源不断

5、地推向客户端。这种机制在用户体验上 有一点问题，需要针对不同的浏览器设计不同的方案来改进用户体验，同时这种机制在并发 比较大的情况下，对服务器端的资源是一个极大的考验。综合这几种方案，您会发现这些目前我们所使用的所谓的实时技术并不是真正的实时技术， 它们只是在用Ajax方式来模拟实时的效果，在每次客户端和服务器端交互的时候都是一次 HTTP的请求和应答的过程，而每一次的HTTP请求和应答都带有完整的HTTP头信息， 这就增加了每次传输的数据量，而且这些方案中客户端和服务器端的编程实现都比较复杂， 在实际的应用中，为了模拟比较真实的实时效果，开发人员往往需要构造两个HTTP连接 来模拟客户端和服

6、务器之间的双向通讯，一个连接用来处理客户端到服务器端的数据传输， 一个连接用来处理服务器端到客户端的数据传输，这不可避免地增加了编程实现的复杂度， 也增加了服务器端的负载，制约了应用系统的扩展性。WebSocket的拯救HTML5WebSocket设计出来的目的就是要取代轮询和Comet技术，使客户端浏览器具 备像C/S架构下桌面系统的实时通讯能力。浏览器通过JavaScript向服务器发出建立 WebSocket连接的请求，连接建立以后，客户端和服务器端就可以通过TCP连接直接交 换数据。因为WebSocket连接本质上就是一个TCP连接，所以在数据传输的稳定性和 数据传输量的大小方面，和轮

7、询以及Comet技术比较，具有很大的性能优势。 Websocket.org网站对传统的轮询方式和WebSocket调用方式作了一个详细的测试和 比较，将一个简单的Web应用分别用轮询方式和WebSocket方式来实现，在这里引用 一下他们的测试结果图：MM1.COO.IXKJ2m加删90n.G0D.CMMUse A rexmUse-Case C BOE BOD,MOi.6D0.M)OUse B 9 SBOJCCD G 16OJOO0口 Pollinfl Web Seek图1.轮询和WebSocket实现方式的网络负载对比图通过这张图可以清楚的看出，在流量和负载增大的情况下，WebSocket方

8、案相比传统的Ajax轮询方案有极大的性能优势。这也是为什么我们认为WebSocket是未来实时Web 应用的首选方案的原因。WebSocket 规范WebSocket协议本质上是一个基于TCP的协议。为了建立一个WebSocket连接，客 户端浏览器首先要向服务器发起一个HTTP请求，这个请求和通常的HTTP请求不同， 包含了一些附加头信息，其中附加头信息” Upgrade:WebSocket ”表明这是一个申请协 议升级的HTTP请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端， 客户端和服务器端的WebSocket连接就建立起来了，双方就可以通过这个连接通道自由 的传递信息，

9、并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。 下面我们来详细介绍一下WebSocket规范，由于这个规范目前还是处于草案阶段，版本 的变化比较快，我们选择draft-hixie-thewebsocketprotocol-76版本来描述 WebSocket协议。因为这个版本目前在一些主流的浏览器上比如Chrome,、FireFox、 Opera上都得到比较好的支持，您如果参照的是新一些的版本话，内容可能会略有差别。 一个典型的WebSocket发起请求和得到响应的例子看起来如下：清单1.WebSocket握手协议i客户端到服务端：2 GET /demo HTTP/1.13

10、 Host: 4 Connection: Upgrade5 Sec-WebSocket-Key2: 12998 5 Y3 1 .POO6 Upgrade: WebSocket7 Sec-WebSocket-Key1: 41 46546xW%0l 1 58 Origin: 9 8-byte security key11服务端到客户端：12 HTTP/1.1 101 WebSocket Protocol Handshake13 Upgrade: WebSocket14 Connection: Upgrade15 WebSocket-Origin: 16 WebSocket-Location: ws

11、:/17 16-byte hash response这些请求和通常的HTTP请求很相似，旦是其中有些内容是和WebSocket协议密切相关 的。我们需要简单介绍一下这些请求和应答信息，Upgrade:WebSocket表示这是一个 特殊的HTTP请求，请求的目的就是要将客户端和服务器端的通讯协议从HTTP协议升 级到WebSocket协议。从客户端到服务器端请求的信息里包含有” Sec-WebSocket-Key1”、“Sec-WebSocket-Key2”和” 8-bytesecuritykey这样的 头信息。这是客户端浏览器需要向服务器端提供的握手信息，服务器端解析这些头信息，并 在握手的

12、过程中依据这些信息生成一个16位的安全密钥并返回给客户端，以表明服务器 端获取了客户端的请求，同意创建WebSocket连接。一旦连接建立，客户端和服务器端 就可以通过这个通道双向传输数据了。在实际的开发过程中，为了使用WebSocket接口构建Web应用，我们首先需要构建一 个实现了 WebSocket规范的服务器，服务器端的实现不受平台和开发语言的限制，只需 要遵从WebSocket规范即可，目前已经出现了一些比较成熟的WebSocket服务器端实 现，比如： KaazingWebSocketGateway 一个 Java 实现的 WebSocketServer mod_pywebsock

13、et 一 个 Python 实现的 WebSocketServer Netty 一一个Java实现的网络框架其中包括了对WebSocket的支持 node.js 一一个 Server 端的 JavaScript 框架提供了对 WebSocket 的支持如果以上的WebSocket服务端实现还不能满足您的业务需求的话，开发人员完全可以根 据WebSocket规范自己实现一个服务器。在“WebSocket实战”这一节，我们将使用 Microsoft.NET平台上的C#语言来打造一个简单的WebSocket服务器，继而构建一 个简单的实时聊天系统。WebSocketJavaScript 接口上一节介

14、绍了 WebSocket规范，其中主要介绍了 WebSocket的握手协议。握手协议通 常是我们在构建WebSocket服务器端的实现和提供浏览器的WebSocket支持时需要 考虑的问题，而针对Web开发人员的WebSocketJavaScript客户端接口是非常简单的， 以下是WebSocketJavaScript接口的定义：清单 2WebSocketJavaScript 定义1 Constructor(in DOMString url, in optional DOMString protocol)2 interface WebSocket 3 readonly attribute DO

15、MString URL;4/ ready state5 const unsigned short CONNECTING = 0;6 const unsigned short OPEN = 1;7 const unsigned short CLOSED = 2;8 readonly attributeunsigned shortreadyState;9 readonly attributeunsignedlongbufferedAmount; / networking11 attribute Functiononopen;12 attribute Functiononmessage;13 att

16、ribute Functiononclose;14boolean send(in DOMString data);15void close();16 ;17 WebSocket implements EventTarget;毎其中URL属性代表WebSocket服务器的网络地址，协议通常是” ws” ,send方法就是发送数据到服务器端，close方法就是关闭连接。除了这些方法，还有一些很重要的事件:on open , on message , on error 以及 on close。我们借用 Nettuts 网站上的一张图来 形象的展示一下WebSocket接口：on erroronmes

17、ageonopenoncloseof Mtbsork-vfi CntTEa*-livrlbuc：# Puii(tlcn 阿匪pn； 1 ttrLhuE：D 伽Etlan cownagB: A tt rLbu tn Ftincl; Ion NixEar;FU两伽图 2WebSocketJavaScript 接口下面是一段简单的JavaScript代码展示了怎样建立WebSocket连接和获取数据：清单3. 建立 WebSocket连接的实例JavaScript代码1var wsServer = ws:/localhost:8888/Demo;2var websocket = new WebSoc

18、ket(wsServer);3 websocket.onopen = function (evt) onOpen(evt) ;4 websocket.onclose = function (evt) onClose(evt) ;5 websocket.onmessage = function (evt) onMessage(evt) ;6 websocket.onerror = function (evt) onError(evt) ;7function onOpen(evt) 8 console.log(Connected to WebSocket server )；9 10function

19、 onClose(evt) 11 console.log(Disconnected);12 13function onMessage(evt) 14 console.log(Retrieved data from server: + evt.data);15 16function onError(evt) 17 console.log(Error occured: + evt.data);18 浏览器支持卜面是主流浏览器对HTML5WebSocket的支持情况:浏览器支持情况ChromeSupported in version 4+FirefoxSupported in version 4+I

20、nternet ExplorerSupported in version 10+OperaSupported in version 10+SafariSupported in version 5+WebSocket 实战这一节里我们用一个案例来演示怎么使用WebSocket构建一个实时的Web应用。这是 一个简单的实时多人聊天系统，包括客户端和服务端的实现。客户端通过浏览器向聊天服务 器发起请求，服务器端解析客户端发出的握手请求并产生应答信息返回给客户端，从而在客 户端和服务器之间建立连接通道。服务器支持广播功能，每个聊天用户发送的信息会实时的 发送给所有的用户，当用户退出聊天室时，服务器端需

21、要清理相应用户的连接信息，避免资 源的泄漏。以下我们分别从服务器端和客户端来演示这个Web聊天系统的实现，在实现 方式上我们采用了 C#语言来实现WebSocket服务器，而客户端是一个运行在浏览器里 的HTML文件。WebSocket服务器端实现这个聊天服务器的实现和基于套接字的网络应用程序非常类似，首先是服务器端要启动一个 套接字监听来自客户端的连接请求，关键的区别在于WebSocket服务器需要解析客户端 的WebSocket握手信息，并根据WebSocket规范的要求产生相应的应答信息。一旦 WebSocket连接通道建立以后，客户端和服务器端的交互就和普通的套接字网络应用程序是一样的

22、了。所以在下面的关于WebSocket服务器端实现的描述中，我们主要阐述WebSocket服务器怎样处理 WebSocket握手信息，至于 WebSocket监听端口的建立，套接字信息流的读取和写入，都是一些常用的套接字编程的方式，我们就不多做解释了，您 可以自行参阅本文的附件源代码文件。在描述WebSocket规范时提到，个典型的WebSocketUpgrade信息如下所示：翁1 GET /demo HTTP/1.12 Host: 3 Connection: Upgrade4 Sec-WebSocket-Key2: 12998 5 Y3 1 .POO5 Upgrade: WebSocket6

23、 Sec-WebSocket-Key1: 41 46546xW%0l 1 57 Origin: 8 8-byte security key翁其中 Sec-WebSocket-Key1 , Sec-WebSocket-Key2 和8-bytesecuritykey 这几个 头信息是WebSocket服务器用来生成应答信息的来源，依据draft-hixie-thewebsocketprotocol-76草案的定义，WebSocket 服务器基于以下的算法来产生正确的应答信息：1.逐个字符读取Sec-WebSocket-Key1头信息中的值，将数值型字符连接到一起 放到一个临时字符串里，同时统计所有

24、空格的数量；2将在第1步里生成的数字字符串转换成一个整型数字，然后除以第1步里统计 出来的空格数量，将得到的浮点数转换成整数型；3将第2步里生成的整型值转换为符合网络传输的网络字节数组；4.对Sec-WebSocket-Key2头信息同样进行第1到第3步的操作，得到另外一个网络字节数组;5将8-bytesecuritykey和在第3，第 4步里生成的网络字节数组合并成一个16字节的数组；6.对第5步生成的字节数组使用MD5算法生成一个哈希值，这个哈希值就作为 安全密钥返回给客户端，以表明服务器端获取了客户端的请求，同意创建 WebSocket 连接至此，客户端和服务器的WebSocket握手就

25、完成了，WebSocket通道也建立起来了。 下面首先介绍一下服务器端实现是如何根据用户传递的握手信息来生成网络字节数组 的o .NET平台提供了很方便的对字符串，数值以及数组操作的函数，所以生成字节数组的 方法还是非常简单明了的，代码如下：清单4.生成网络字节数组的代码1 private byte BuildServerPartialKey(string clientKey)2 3 string partialServerKey = ;4byte currentKey;5int spacesNum = 0;6char keyChars = clientKey.ToCharArray();7

26、foreach char currentChar in keyChars)8 9if (char.IsDigit(currentChar) partialServerKey += currentChar;10if (char.IsWhiteSpace(currentChar) spacesNum+;1112try13 14 currentKey =BitConverter.GetBytes(int)(Int64.Parse(partialServerKey)15 / spacesNum);16if (BitConverter.IsLittleEndian) Array.Reverse(curr

27、entKey);1718catch1920if (currentKey!= null) Array.Clear(currentKey, 0, currentKey.Length);22return currentKey;23%得到网络字节数组以后，服务器端生成16位安全密钥的方法如下所示：清单5. 生成 16位安全密钥的代码跆1 private byte BuildCompleteServerKey(byte serverKeyl, byte serverKey2,2byte last8Bytes)34byte concatenatedKeys = newbyte16;5Array.Copy(

28、serverKey1,0,concatenatedKeys,0,4)；6Array.Copy(serverKey2,0,concatenatedKeys,4,4)；7Array.Copy(last8Bytes,0,concatenatedKeys,8,8);8 System.Security.Cryptography.MD5 MD5Service =9 System.Security.Cryptography.MD5.Create();10return MD5Service.ComputeHash(concatenatedKeys);11 翁整个实现是非常简单明了的，就是将生成的网络字节数组和

29、客户端提交的头信息里的 8-bytesecuritykey合并成一个16位字节数组并用MD5算法加密，然后将生成的安 全密钥作为应答信息返回给客户端，双方的WebSocekt连接通道就建立起来了。实现了 WebSocket握手信息的处理逻辑，一个具有基本功能的WebSocket服务器就完成了。 整个WebSocket服务器由两个核心类构成，一个是WebSocketServer，另外一个是 SocketConnection，出于篇幅的考虑，我们不介绍每个类的属性和方法了，文章的附件会 给出详细的源代码，有兴趣的读者可以参考。服务器刚启动时的画面如下：图3WebSocket服务器刚启动的画面 客户

30、端可以依据这个信息填写聊天服务器的连接地址，当有客户端连接到聊天服务器上时， 服务器会打印出客户端和服务器的握手信息，每个客户的聊天信息也会显示在服务器的界面 上，运行中的聊天服务器的界面如下:国 GWbDOW戢杯g扭诃Ed炯為怕潼丨冬常丰.左口二ifs J J金“叩和. 正在准盡連桧 GET /ehat HTTP/1 .1： 3. 1 1 S- i 5S .157： 4iConnDctiori s UpgradaOrigin：；可1S r ( S&q ) 3Upgrade : bl s bSccketW&bSoket-Ky2: 9 ,6 50-S笈送握手信M 4TTP/1I1 i?1 申耳H

31、巧中冲“口岡特uprad:冊bsckotCcphfibgtion t UpgradeS-clilebSoc ke t Origin : file： /.c- Uhoe k & t - Locat i orb ： ueq : /-S. 1 19.1 35 127 : 41 4 1 /chat接:矍到的衔忌 r isgini黄晓聂料图4.有客户端连接到WebSocket服务器的 以上我们简单描述了实现一个WebSocket服务器的最基本的要素，下一节我们会描述客 户端的实现。客户端实现 客户端的实现相对于服务器端的实现来说要简单得多了，我们只需要发挥想象去设计HTML用户界面，然后呼叫WebSoc

32、ketJavaScript接口来和 WebSocket服务器端来交互就可以了。当然别忘了使用一个支持HTML5和WebSocket的浏览器，在笔者写这 篇文章的时候使用的浏览器是Firefox。客户端的页面结构是非常简洁的，初始运行界面如 下：图5.聊天室客户端初始页面当页面初次加载的时候，首先会检测当前的浏览器是否支持WebSocket并给出相应的提 示信息。用户按下连接按钮时，页面会初始化一个到聊天服务器的WebSocekt连接，初 始化成功以后，页面会加载对应的WebSocket事件处理函数，客户端JavaScript代码 如下所示：清单6.初始化客户端WebSocket对象的代码fun

33、ction ToggleConnectionClicked() 2if (SocketCreated & (ws.readyState = 0 | ws.readyState = 1)3 ws.close();4 else 5 Lo准备连接到聊天服务器.);6try 7ws =8new WebSocket(ws:/ + document.getElementById(Connection).value);9 SocketCreatedtrue;10 catch (ex) 11 Log(ex, ERROR);12return;13 14 document.getElementById(Toggl

34、eConnection).innerHTML断开15 ws.onopen = WSonOpen;16 ws.onmessage = WSonMessage;17ws.onclose = WSonClose;18ws.onerror = WSonError;1920;2122functionWSonOpen() 23Log连接已经建立。，OK);24$(#SendDataContainer).show(slow);25;2627functionWSonMessage(event) 28Log(event.data);2930;31functionWSonClose() 32Log连接关闭。, E

35、RROR);33document.getElementById(ToggleConnection).innerHTML =连接；34$(#SendDataContainer).hide(slow);35;363738functionWSonError() 39Log(WebSocke 错误。, ERROR);40;当用户按下发送按钮，客户端会调用WebSocket对象向服务器发送信息，并且这个消息会广播给所有的用户，实现代码如下所示：function SendDataClicked()2 3if (document.getElementById(DataToSend).value != )4

36、ws.send(document.getElementById(txtName).value 说: +5 document.getElementById(DataToSend).value + );6 document.getElementById(DataToSend).value = ;7 8 ;如果有多个用户登录到聊天服务器，客户端页面的运行效果如下所示:Web Socket聊天室參沥过训命血kel炭廷一1刮驹态浏说聽琬摘 ILK. JUL Ll LQ；H L/Tv 禺严書:fft義希叩图6.聊天客户端运行页面甘番遽脑蠟趣势酩理蚩安说玄症訐”汗亍说严我话改了梵亠讦的内咨，你耐一下圧亠買晚

37、姿連蛭的丈祇一担帀疲一下匹-至此我们已经完成了一个完整的WebSocket客户端实现，用户可以体验一下这个聊天室 的简单和快捷，完全不用考虑页面的刷新和繁琐的Ajax调用，享受桌面程序的用户体验。WebSocket的强大和易用可见一斑，您完全可以在这个基础上加入更多的功能，设计更加漂亮的用户界面，切身体验WebSocket的震撼力。完整的客户端代码请参阅附件提供的 源代码。WebSocket的局限性WebSocket的优点已经列举得很多了，但是作为一个正在演变中的Web规范，我们也要看到目前用Websocket构建应用程序的一些风险。首先，WebSocket规范目前还处 于草案阶段，也就是它的

38、规范和API还是有变动的可能,另外的一个风险就是微软的IE作 为占市场份额最大的浏览器，和其他的主流浏览器相比，对HTML5的支持是比较差的， 这是我们在构建企业级的Web应用的时候必须要考虑的一个问题。总结 本文介绍了 HTML5WebSocket的横空出世以及它尝试解决的的问题，然后介绍了WebSocket规范和WebSocket接口，以及和传统的实时技术相比在性能上的优势，并 且演示了怎样使用WebSocket构建一个实时的Web应用，最后我们介绍了当前的主流 浏览器对HTML5的支持情况和WebSocket的局限性。不过，我们应该看到，尽管 HTML5WebSocket目前还有一些局限性，但是已经是大势所趋，微软也明确表达了未来 对HTML5的支持，而且这些支持我们可以在Windows8和IE10里看到，我们也在各 种移动设备，平板电脑上看到了 HTML5和WebSocket的身影。WebSocket将会成为 未来开发实时Web应用的生力军应该是毫无悬念的了，作为Web开发人员，关注 HTML5，关注WebSocket也应该提上日程了，否则我们在新一轮的软件革新的浪潮中只 能做壁上观了。