HTML5 WebSocket权威指南.docx

HTML5 Web Socket权威指南代码清单12服务器对客户端响应的 1.1首标 /l.x 200 OK X-Powered-By: Servlet/2.5 Server: Sun Java System Application Server 9.1_02 Content-Type: text/html;charset=UTF-8 Content-Length: 321 Date: Wed, 06 Dec 2012 00:32:46 GMT在代码清单1-1和代码清单1-2中，仅仅首标信息的开销就有871字节（这还没有实际 的数据）。这两个例子说明，不管服务器是否向客户端发送实际的数据或者信息，请求的 首标信息都必须在两个方向上传输：从客户端到服务器和从服务器到客户端。在 /1.0和 /1.1中，低效的根源主要是： 用于文档共享，而不是丰富的交互性应用程序，我们在桌面上习以为常的这种应用 程序现在已经进入Web；随着客户端和服务器之间交互的增加， 协议在客户端和 服务器之间通信所需要的信息量快速增加。从根本上讲， 还是半双工的协议，也就是说，在同一时刻流量只能单向流动：客户 端向服务器发送请求（单向），然后服务器响应请求（单向）。半双工的效率很低。想象 一下这样的 交谈：当你想要交流时，你必须按下一个按钮，说话，再按下另一个按钮 完成。同时，你的通话对象必须耐心等待你讲完，按下按钮，最后回复。是不是很熟悉？ 我们儿时小规模地进行过这种形式的通信，美国军队始终采用这种方式：步话机。虽然步 话机有绝对的好处和很好的应用，但是并不总是最有效的通信形式。工程师们多年来一直致力于解决这个问题，他们使用各种著名的方法：轮询、长轮询和 流化（streaming）。1.3.2绕道而行： 轮询、长轮询和流化通常，浏览器访问网页时，会向页面所在的服务器发送一个 请求。Web服务器确 认请求并向浏览器发回响应。在许多情况下，返回的信息（如股价、新闻、交通图、医疗息（heartbeat message）。成功创立STOMP连接之后，演示应用程序订阅stompDemo 队列。现在，翻开第二个浏览器窗口（你可以在同一个浏览器中翻开新窗口，或者启动另一个浏 览器），并提供上面使用的同一个连接数据。这时，你可以开始在浏览器窗口之间发送消 息。5.4构建STOMP/WS应用程序我们已经观察了一个简单的STOMP/WS应用程序的演示，现在来尝试构建一个。这里， 我们将尝试构建一个应用程序，使用户能够玩一个流行的游戏一石头剪刀布（也叫 “roshambo”）。如果你不熟悉这个游戏，维基百科提供了丰富的相关信息： :/en.wikipedia.org/wiki/Rock-paper-scissorSo5.4.1 游戏流程我们先来评估一下游戏的需求和流程。这个游戏的传统玩法要求参与者同时出拳（石头、 布或者剪刀）。为此，游戏首先有一个“同步阶段”，此后玩家喊出自己的出拳。在浏览器中玩这个游戏的妙处在于，用户可以远程参与，这也就意味着“同步阶段”的工作 原理略有不同。为了简化在线条件下的同步阶段，我们代之以隐藏玩家的选择，直到两个 玩家都选好出拳方式。下面是基于浏览器的游戏在两个玩家之间的工作方式概览。1）玩家1 （先出拳的玩家）选择一个选项（石头、布或者剪刀）。玩家1的应用显示选 择。2）玩家2 （出拳较慢的玩家）的应用接收到玩家1的出拳（但是不显示玩家1的选择） 并提示玩家1已经做出选择。3）玩家2选择出拳（石头、布或者剪刀）。4）玩家1的应用接收并显示玩家2的选择。5）玩家2的应用显示玩家1和玩家2的选择。构建这个应用程序的难点在于我们能否在浏览器中使其正确运行，又不使用任何后端代码 或者逻辑运行。如何做到这一点？当然是利用消息传递和WebSocket。首先，我们必须考虑应用的通信方式。出于演示的目的，我们将经历这个两人游戏的构建 过程，在这个游戏中两个应用直接通信。你可以回忆图5-2中的说明，我们可以使用队列 （将消息发送给单个消费者）而不是主题（将消息发送给多个消费者）。为了实现我们的目标，并且保持应用程序简单，我们用两个队列构建这个应用，玩家1 的应用向一个队列发布消息，玩家2的应用消费来自同一个队列的消息、。玩家2的应用 也能够向第2个队列发布消息，玩家1的应用消费来自第2个队列的消息。两个队列用游戏开始时我们要求输入的玩家名称识别。根据这些需求，我们先来看看玩家与应用的交互。当应用启动时，它等待玩家输入姓名, 如图5-7所示。Rock Paper Scissors - a Wc xRock Paper Scissors - a Wefile:/localhost/Users/pmoskovi.图5-7在两个并排的浏览器窗口中运行“石头剪刀布”应用程序玩家输入姓名并点击Go按钮，如图5.8所示。Peter。 j file:/localhost/Users/pmoskovi. VanessaRock Paper Scissors - a WeJ' file:/localhost/Users/pmoskovi. VanessaRock Pap«r Scissors - a We xPeterGoSelect one:Rock I Paper ScissorsSelect one:Rock I Paper | Scissors图5-8用户在“石头剪刀布应用程序中输入姓名玩家1 (Peter)做出选择。这个选择反映在界面上，如图5-9所示。在玩家2 (Vanessa)的屏幕上显示一条消息，告诉玩家对手已经做出了选择：你的对手正在等待，请出拳！玩家2做出选择之后，结果立刻在两个玩家处显示，如图510所示。C file:/localhost/Users/pmoskovi. Rock Paper Scissors - a WeRock Paper Scissors - a Wc xC file:/localhost/Users/pmoskovi. PeterVanessaI GoPeterVanessaI GoVanessaPeterWaiting for opponent.Waiting for opponent.Your opponent is waiting for you. Make your move!RockPaperScissors图59玩家1出拳 file:/localhost/Users/pmoskovi. VanessaPeterResults:PaperPaper |ScissorsScissorsRock Paper Scissors - a We xRock Paper Scissors - a We2 file:/localhost/Users/pmoskovi. VanessaResults:PeterI Rock jRockScissorsPaper Scissors图5-10玩家2出拳在“真正”的石头剪刀布游戏中，在每轮之后你都应该宣布胜者。为了保持演示程序简单和 源代码专注，本演示程序不包含这一功能。5.4.2 创立游戏我们的简单应用程序由自己的HTML和一个JavaScript文件组成，并利用两个外部开源 JavaScript资源。第一个JavaScript程序库称作stomp.js,由Jeff Mesnil编写。这个程序 库包含在本书当中，当然也可以在 s:/github /jmesnil/stomp-websocket上找至U， 它使JavaScript应用程序能够在启用WebSocket的ActiveMQ消息代理上使用 STOMP/WSo第二个JavaScript程序库是jQuery,我们用它来简化应用的构建，并帮助我们以更简洁的 方式编写代码。我们包含应用程序逻辑的HTML和JavaScript文件分别称作index.html 和 rps.jso说明我们用jQuery 1.8.2版本构建应用，本书包含精简的jQuery程序库jquery-1.8.2.min, 你也可以从jQuery官方下载网站中下载它： :/jquery /downloado1 .构建HTML文件在这个例子中，我们保持HTML代码简单，以便将重点放在应用程序的消息传递逻辑上。在包含了 JavaScript程序库之后，我们必须为玩家姓名创立表单字段和按钮，如图5-11 所示。/our nameOpponent's name Go图5.11创立玩家姓名表单字段然后，我们创立用于游戏指南的div元素，以及另一个用于玩家选择按钮的div,如图5-12所示。Select one:Rock I I Paper Scissors图512代表玩家选择的按钮最后，我们用一个空div元素显示对手的选择。代码清单5-6展示了 HTML文件源代码。代码清单5-6 index.html文件源代码Rock Paper Scissors - a WebSocket DemoSelect one:2 .编写游戏代码现在，我们已经为应用建立了简单的用户界面，可以进一步关注JavaScript代码了。首先, 我们声明变量（见代码清单5-7）。注意，我们包含了指向使用WebSocket、基于STOMP的消息代理一ActiveMQ的连接URL。代码清单5-7声明JavaScript代码中使用的变量/ ActiveMQ STOMP connection URLvar url = "ws:/0.0.0.0:61614/stompn;/ ActiveMQ username and password. Default value is "guest" for both, var un, pw = "guest" var client, src> dest;/ Variables holding the state whether the local and/ remote user had his/her turn yetvar hasUserPicked, hasOpponentPicked = false;/ HTML code for the opponents three buttons and variable/ for opponent's pickvar opponentsBtns = 'Rock' + 'Paper' + 'Scissorsf;var opponentsPick; / Variables for this user's three buttonsvar rockBtn, paperBtn, scissorsBtn;完整地构建了 DOM层次结构之后，我们检查浏览器是否支持WebSocket。如果不支持， 我们隐藏HTML页面显示的div,并显示一个警告(见代码清单5-8)。代码清单5-8检查浏览器是否支持WebSocket/ Testing whether the browser supports WebSocket. / If it does, fields are rendered for users* names $(document).ready(functionO if (!window.WebSocket) var msg = "Your browser does not have WebSocket support. This example will not work properly."$("#nameFieldsn)-css(nvisibility, nhidden,r)； $(,#instructions").css(,visibility, "visible"); $(H#instructionsH).html(msg); );startGame。函数由goBtn的onclick事件调用。这个函数(见代码清单5-9)禁用前面填 写表单的所有元素，使游戏说明和按钮div可见，并构造源(src)和目标(dest)队列的 名称。代码清单5-9 startGame。函数var startGame = functionQ / Disabling the name input fields $(n#myNameH).attr(ndisabled, "disabled"); $(H#opponentName,').attr(,disabled, "disabled"); $("#goBtn").attr("disabled"l "disabled"); / Making the instructions andbuttons visible $("#instructions").css(Hvisibility", "visible"); $("#buttons',.css("visibility,7 "visible"); / Queues are named after the players dest = "/queue/" + $n#opponentNamen)-valQ; src ="/queue/" + $("#myName"),val(); connectQ； ；代码清单5-9中最后一个函数调用了 connect。函数，这个函数建立STOMP连接，如代 码清单5-10所示。connect。函数中的调用由我们使用的开源STOMP JavaScript程序库 stomp.js 提供。代码清单5-10建立STOMP连接的connect。函数/ Establishing the connection var connect = functionQ client = Stomp.client(url); client.connectfun, pw, onconnect, onerror); ;client.connect API有两个回调函数。第一个是onconnect。，在成功连接时调用；第二个 是onerror。，在出现错误时调用。我们先来仔细看看。nconnect。回调函数。在控制台上记录我们已经成功连接之后，我们 订阅src变量定义的队列。这个队列根据玩家的姓名命名，当消息到达队列，将执行定义 为client.subscribe第二个参数的回调函数。当进入的消息说明对手已经选择出拳，我们 将hasOpponentPicked设置为true。然后，我们绘制表示对手选择的按钮，但是在玩家 还没有出拳时隐藏，如代码清单5-11所示。代码清单5-11显示游戏按钮的代码/ Function invoked when connection is established var onconnect = functionQ console.log(uconnected to " + url; client.subscriberc, functionmessage console.log(umessage received:" + message.body); / The incoming message indicates that the / opponent had his/her turn (picked). / Therefore, we draw the buttons for the opponent. / If this user hasn't had his/her move yet, / we hide the div containing the buttons, / and only display them / when this user has had his/her move too.hasOpponentPicked = true; if IhasUserPicked $(n#opponentsButtons,).css(uvisibility, "hidden" $(u#instructionsn)-html(nYour opponent is waiting for you.Make your move!Results:如果出现错误，我们可以用onerror。回调函数轻松地处理它，如代码清单5-12所示。测 试函数执行的一种简单方法是首先创立一个连接，然后停止ActiveMQ。这样，你就会在 控制台上看到一条表示连接丧失的错误信息。代码清单5-12用onerror回调函数捕获错误var onerror = function (error) console.log(error); ;代码中最后一个函数在用户选择了3个选项(石头、布或者剪刀)之一时调用。客户端 对象的send。函数有3个参数：目标、首标(在我们的例子中为空)和消息(按钮DOM 对象的名称)。我们将hasUserPicked标志修改为true,表示用户已经选择。然后，我们 禁用表单字段。根据对手是否已经出拳，我们显示对手已经出拳，或者修改说明消息，让 玩家知道正在等待对手出拳(见代码清单5-13)。代码清单5-13添加用户选择(石头、布、剪刀)交互/ ActiveMQ STOMP connection URL var url = "ws:/0,00.0:61614/stomp" / ActiveMQ username and password. Default value is "guest" for both. var un, pw = "guest" var client, src> dest; / Variables holding the state whether the local and remote user had his/herturn yetvar hasUserPicked, hasOpponentPicked = false;/ HTML code for the opponent's three buttons and/ variable for opponent's pick var opponentsBtns = 'Rock' + Taper1 +rScissorsr;var opponentsPick; / Variables for this user's three buttonsvar rockBtn, paperBtn, scissorsBtn; / Testing whether the browser supports WebSocket./ If it does, fields are rendered for users1 names$(document.ready(functionQ if(Iwindow.WebSocket) var msg = HYour browser does not have WebSocket support. This examplewill not work properly." $(,#nameFieldsr,.css(,visibilityn, "hidden1');$("#instructions)css("visibility，"visible"); $(n#instructionsM)-html(msg); ); / Getting started with the game. Invoked after/ this user's and opponents name are submittedvar startGame = functionQ / Disabling the name input fields $n#myNamen).attrndisabled' "disabled1'); $("#opponentName").attr("disabled，"disabled"); $(n#goBtnn).attr(udisabled, "disabled"); / Making the instructions and buttons visible$(H#instructionsn).css(nvisibility' "visible1'); $(,#buttonsH)-css(Hvisibility, Visible"); / Queues are named after the players dest = "/queue/" + $("#opponentName”).val(); src = “/queue/” + $(H#myNameH.valQ; connectQ; / Establishing the connectionvar connect = functionQ client = Stomp.client(url); client.connectfun, pw, onconnect, onerror; / Function invoked when connection is establishedvar onconnect = functionQ console.log(uconnected to " + url; client.subscribe(src/ function(message) console.log(umessage received:" + message.body); / The incoming message indicates that the / opponent had his/her turn (picked). / Therefore； we draw the buttons for the opponent. / If this user hasn't had his/her move yet, / we hide the div containing the buttons, and only display / them when this user has had his/her move too.hasOpponentPicked = true; if fIhasUserPicked $(,#opponentsButtons,).css(,visibility, "hidden" $(n#instructions").htmlnYour opponent is waiting for you. Makeyour move!Results:Results:Waiting for opponent.运行这个应用之前要确保ActiveMQ启用了 WebSocket支持（见代码清单5-4）,运行ActiveMQ,然后在启用WebSocket的浏览器中翻开index.htmlo 5.4.3 监控 Apache ActiveMQActiveMQ提供一个简单的监控界面，你可以了解底层发生的变化。单击ActiveMQ欢迎 页面上的Manage ActiveMQ broker （管理ActiveMQ代理）链接，或者导航到 :00008161/admin/可以访问管理界面。运行“石头剪刀布应用之后，你将拥有两 个队列，每个玩家一个。在我们的例子中，有两个玩家（Peter和Vanessa）,队列根据 他们的名字命名。如图5-13所示，每个队列有一个消费者（对手），我们向每个队列发 送一条消息（message enqueued）。两条消息很快就离开队列（message dequeued）。ActiveMQApacheSoftware Foundation h 11(>: / / w w *SupportQueuesName Number OfPending MetMgetNumber Of ConumertenqueuedMeiMget DequeuedVtewsOperations0000Browse ActiveStnC To Putje DeletePeter0111Browse ActiveCjJHjXjerSSend To Delete0111BrowlC ActiveSend io (Rieu Queue Views Craph XML Topic Views XML.Subscribers Views XML Useful Links DocumcnUlton FAQ Downloads ForumsHomo | Qmuo I Topic* | Subecdbers | Conn«tions | NetwoHr | Scheduled | SendCreateQueue Mme图5-13 ActiveMQ管理界面：监控消息队列设备读数和天气信息）到达浏览器显示页面时已经过时。如果用户需要得到最新的实时信 息，他们可以不断刷新页面，但是这显然并不实际，也不是特别精妙的解决方案。当前对提供实时Web应用程序的尝试多半围绕“轮询”（polling）技术进行，这种技术模 拟其他服务器端“推”技术（最流行的是Comet）,本质上就是推迟完成 响应，向客 户端提交信息。轮询是一种定时的同步调用，客户端向服务器发送请求查看是否有可用的新信息。请求以 固定的时间间隔发出，不管是否有信息，客户端都会得到响应：如果有可用信息，服务器 发送这些信息；如果没有可用信息，服务器返回一个拒绝响应，客户端关闭连接。如果你知道信息交付的精确间隔，轮询就是一个好的解决方案，因为你可以同步客户端， 只在你知道服务器上有可用信息的时候发送请求。然而，实时数据并不总是可以预测的， 发出不必要的请求、因而翻开过多连接是不可防止的。结果是，在低信息率的情况下，你 可能翻开或者关闭许多不必要的连接。长轮询（longpolling）是另一种流行的通信方法，客户端向服务器请求信息，并在设定 的时间段内翻开一个连接。服务器如果没有任何信息，会保持请求翻开，直到有客户端可 用的信息，或者直到指定的超时时间用完为止。这时，客户端重新向服务器请求信息。长 轮询也称作Comet （前面已经提到过）或者反向AJAX。Comet延长 响应的完成， 直到服务器有需要发送给客户端的内容，这种技术常常称作“挂起GET或“搁置POST。 重要的是要知道，当信息量很大时，长轮询相对于传统轮询并没有明显的性能优势，因为 客户端必须频繁地重连到服务器以读取新信息，造成网络的表现和快速轮询相同。长轮询 的另一个问题是缺乏标准实现。在流化技术中，客户端发送一个请求，服务器发送并维护一个持续更新和保持翻开（可以 是无限或者规定的时间段）的开放响应。每当服务器有需要交付给客户端的信息时，它就 更新响应。看起来，流化是能够适应不可预测的信息交付的极佳方案，但是服务器从不发 出完成 响应的请求，从而使连接一直保持翻开。在这种情况下，代理和防火墙可能管理控制台还列出了当前的活跃连接。在我们的演示中有两个活跃的WebSocket连接, 它们通过ActiveMQ WebSocket连接器创立，如图5-14所示。管理控制台还列出了当前的活跃连接。在我们的演示中有两个活跃的WebSocket连接, 它们通过ActiveMQ WebSocket连接器创立，如图5-14所示。ApacheSoftware Foundationh t t p : / / M M1W.3pAChe.Or9/Home I Quwm | Topics | SubscHberw | Connections | Network | Scheduled | SendSupportConnectionsConnector websocketName Remote AddressActive Slow10: petCftx«t 1- S226 7-13532167042- 2:1 StompSockct 1172S763O4 truefalselO:petem«tb522671353279167O42-2:2 SSmpSOCkN W8560475 truefalseNetwork ConnectorsNameNetwork TTLDynamic OnlyConduitSubscription*Bridge TempsDecrease PrftodttesDispatch Async Queue Views Graph XML Topic Views XML.Subscribers Views XML Useful Links Documentation FAQ Downloads Forums图5-14通过WebSocket连接器创立的活跃ActiveMQ连接5.5 建议的扩展我们已经逐步建立了一个非常简单的游戏，以展示WebSocket上的消息传递。你可以用 许多方法扩展这个游戏，使其功能更完整、更有趣。在玩石头剪刀布游戏时，知道谁是赢 家是这个游戏激动人心的局部。在联网环境中，情况有很大的不同。公布胜者是这个游戏 简单而重要的改进。另一个扩展是让游戏更加安全。你可以创立一个专用队列接收出拳，另一个队列用于公布 结果，将游戏逻辑集中起来，而不是依靠应用逻辑隐藏出拳。这一逻辑能够防止玩家（或 者他们的浏览器）预先发现对手的出拳。此外，你可以用主题来通知所有玩家游戏的结果, 公布胜者。为了改进玩家的交互，你可以：自动匹配没有对手的玩家。队列对于循环匹配是一个理想的手段。构建一个具有人工智能的机器人，玩家可以选择它作为对手。5.6 Web消息传递的未来将消息传递的概念与低延迟的WebSocket通信相结合，翻开了通往大量非凡应用程序的 一扇大门。正如我们在本章中所看到的，实时协作式“点对点”Web和移动应用程序很容 易构建。这些应用程序可能包括共享文档编辑、交互式社交演示和学习工具，以及使用实 时活动流的社交软件。几乎任何类型的受众都可以利用这些应用，包括消费市场、教育、 保健和交通。Web消息传递的另一种关键应用是机器间（M2M）通信领域。M2M有时候称作物联网 （Internet of Things, IoT）,它关注的是将日常用品连接到互联网。M2M的一些用例包 括：采用智能仪表跟踪和自动报告公用事业使用量，与家用设施交互（例如检查门是否锁 上或者烤箱是否关闭），安装信用卡大小的电脑设备（例如Raspberry Pi）,监控设备和 移动车辆，遥感设备和增强现实。大局部现代实时企业都使用企业服务架构，作为高效IT基础结构的一局部。不同的客户 或者内部应用程序向公共服务发出请求，以便高效地获得收入和生产率。企业服务总线（Enterprise Service Bus, ESB）的概念在十几年前就被全球性的企业所接受。现在， WebSocket使这些企业服务可以安全地扩展到任何Web设备上，提供更好的客户、合作 伙伴和移发动工协作关系。复杂事件处理引擎也可以从WebSocket架构中得益，它可以消费、分析和主动响应用户 浏览器会话、移动设备或者桌面客户端应用程序事件。类似地，BPMS （Business Process Management System,业务处理管理系统）也能更新作 为企业内大型业务过程一局部的任务状态，并为用户实时显示业务相关局部内发生的情况。Web明显正在从文档的世界变成活动的世界，在这一世界中兴旺开展的是应用程序而非 文档。WebSocket是新Web的关键组件之一，将会显著地改变我们在企业甚至日常生活 中使用Web的方式。WebSocket的本质提供了内部企业客户端已经用于连接企业服务总 线的相同连接性，并将其扩展到Web。Web RTC （实时协作）是一个新兴的功能集，能够提供基于浏览器的视频和音频，它将带 着我们超越实时数据，踏上更加令人振奋的旅途。5.7 小结在本章中，我们研究了消息传递的概念，这种架构风格的特征是发送异步消息，构建松耦 合系统。你学习了 pub/sub模式，以及开放消息传递协议STOMP。我们研究了启用 STOMP和WebSocket的开源消息代理ActiveMQ。在学习了简单的配置更改之后，我们 运行了 ActiveMQSTOMP-WebSocket演示程序，然后构建了一个自己的应用程序：石头 剪刀布游戏。最后，我们研究了 Apache ActiveMQ的监控和管理能力。在下一章中，我们将使用VNC所用的RFB协议，在WebSocket之上构建纯HTML5实时 桌面共享体验。第6章用远程帧缓冲协议实现VNC6.1 VNC概述在前面几章中，你学习了在WebSocket之上添加两个强大的协议层次（XMPP和STOMP） 的方法。有了这两个协议，我们就能够实现聊天、在线状态和消息传递，这些都可用于创 建富应用程序，实现驱动基于浏览器的世界的系统。在第4章中，我们知道可以结合广 泛应用的标准聊天协议和WebSocket,通过Web使用传统基于桌面的聊天应用程序，并 见证了在WebSocket之上添加标准聊天协议的好处。类似地，在第5章中，我们看到了 Web应用程序与基于TCP的消息代理之间的交互方式。在这两种情况下，我们探索了从 传统的基于桌面应用程序的世界到Web世界的过渡，并且看到了 WebSocket提供的 Web上的全双工、低延迟连接给这些应用程序带来的好处。在本章中，我们关注更加复 杂（但也是标准）的协议，以及用WebSocket通信平台转化它的方法。由于应用程序分布于使用各种操作系统、程序和浏览器版本的桌面上，对于用户来说，系 统无关性越来越重要，它使信息技术部门能够从任何位置支持任何系统，应用开发人员能 够在任何系统上操作。有些时候，用户必须访问特定的操作系统。访问特定系统的流行方 法之一是使用VNC （Virtual Network Computing,虚拟网络计算）。VNC允许你在任何网络上共享桌面。它本质上允许你远程查看和控制另一台计算机的界 面，可以看作和Telnet等价的GUI （图形用户界面）。你还可以将VNC看作一根很长的 虚拟电缆，可以用它的鼠标、键盘和视频信号查看和控制另一个桌面。顾名思义，VNC是通过网络使用的。由于本章中所要研究的一些难题，VNC在Web上使 用并不容易。利用HTML5和WebSocket,我们能够克服某些难题，研究高可移植性的富 互联网应用程序利用HTML5和WebSocket使用VNC的手段。在本章中，我们将探索使用WebSocket和远程帧