行使SuperWebSocket 构建实时 Web 应用

Web
应用的信息相互进程一般是客户端通过浏览器发出一个伸手,服务器端接收和校对完请求后展开拍卖并赶回结果给客户端,然后客户端浏览器将新闻显示出来,那种体制对于新闻变化不是特地频仍的运用尚能善罢甘休,但是对于那一个实时要求相比高的采用来说,比如说在线娱乐、在线证券、设备监察、新闻在线播报、RSS
订阅推送等等,当客户端浏览器准备展现这么些新闻的时候,那一个音讯在劳务器端可能早就不合时宜了。所以保持客户端和劳动器端的音讯同步是实时
Web 应用的紧要要素,对 Web 开发人士来说也是一个难题。在 WebSocket
规范出来以前,开发人士想完毕那一个实时的 Web
应用,不得不拔取局部投降的方案,其中最常用的就是轮询 (Polling) 和 Comet
技术,而 Comet
技术其实是轮询技术的核对,又可划分为三种落成形式,一种是长轮询机制,一种叫做流技术。上面大家简要介绍一下那两种技术:

轮询:

那是最早的一种达成实时 Web
应用的方案。客户端以自然的时日间隔向服务端发出请求,以频仍呼吁的点子来维系客户端和劳务器端的联手。这种共同方案的最大题材是,在局地多少更新相比较频仍的施用里,页面的数目要想赢得最新的结果必要再度刷新页面,但如此会时有暴发多量的冗余数据在服务器和客户端传输,此外由于页面是一块处理的,所以在页面加载已毕以前是不可能接二连三操作的。当客户端以定点频率向服务器发起呼吁的时候,服务器端的数量可能并从未立异,那样会带动许多无谓的网络传输,所以那是一种非常低效的实时方案。

长轮询:

长轮询是对定时轮询的鼎新和增进,目地是为了下落无效的网络传输。当服务器端没有数据更新的时候,连接会维持一段时间周期直到数据或情况改变或者时间过期,通过那种机制来压缩无效的客户端和服务器间的相互。当然,如若服务端的数目变动分外频仍的话,那种机制和定时轮询相比起来没有精神上的特性的拉长。

Ajax 1

流:

流技术方案日常就是在客户端的页面使用一个隐藏的窗口向服务端发出一个长连接的乞请。服务器端接到那一个请求后作出答复并不断更新连接景况以确保客户端和服务器端的连接不超时。通过那种机制得以将劳动器端的音信接踵而来 蜂拥而来地推动客户端。这种机制在用户体验上有一点题目,须要针对区其余浏览器设计分歧的方案来改革用户体验,同时那种体制在现身比较大的情形下,对劳务器端的资源是一个庞然大物的考验。

综述这二种方案,您会发现这一个方今我们所选取的所谓的实时技术并不是实在的实时技术,它们只是在用
Ajax 格局来模拟实时的意义,在每一回客户端和劳务器端交互的时候都是三次 HTTP
的央求和回复的进度,而每三遍的 HTTP 请求和答复都饱含完整的 HTTP
头新闻,这就大增了每一趟传输的数据量,而且这个方案中客户端和服务器端的编程已毕都比较复杂,在实际的施用中,为了模仿相比实在的实时效果,开发人员往往需求协会四个HTTP
连接来模拟客户端和服务器之间的双向通信,一个连连用来处理客户端到服务器端的多少传输,一个总是用来拍卖服务器端到客户端的数据传输,那不可防止地充实了编程已毕的复杂度,也加码了劳动器端的载重,制约了应用体系的伸张性。

HTML5 WebSocket 设计出来的目的就是要代表轮询和 Comet
技术,使客户端浏览器具备像 C/S 架构下桌面系统的实时报纸宣布能力。 浏览器通过
JavaScript 向服务器发出建立 WebSocket
连接的哀告,连接建立之后,客户端和劳务器端就足以经过 TCP
连接直接沟通数据。因为 WebSocket 连接本质上就是一个 TCP
连接,所以在数据传输的平稳和数量传输量的高低方面,和轮询以及 Comet
技术相比,具有很大的特性优势。Websocket.org
网站对传统的轮询格局和 WebSocket
调用格局作了一个详尽的测试和相比较,将一个不难易行的 Web 应用分别用轮询形式和
WebSocket
格局来完毕,在那里引用一下他们的测试结果图(http://www.websocket.org/quantum.html
):

Ajax 2

轮询和 WebSocket 完结方式的网络负载相比图

经过那张图可以掌握的看看,在流量和负载增大的场合下,WebSocket
方案比较传统的 Ajax 轮询方案有特大的习性优势。那也是干什么大家觉得
WebSocket 是前景实时 Web 应用的首选方案的因由。

WebSocket协和布置用来代替使用HTTP作为传输层的双向通讯技术,并从现有的基础设备(代理、过滤器、认证)受益。这几个技能作为成效与可相信性的平衡而落到实处,因为HTTP最初并不是用于双向通讯的。WebSocket尝试解决在存活HTTP基础设备的条件下现有HTTP双向通信技术的靶子;像那样,它布置来工作于HTTP
80、443端口上,并支持HTTP代理和中间设备,即使这代表增添现有条件的局地扑朔迷离。

然后,设计并从未将WebSocket局限于HTTP,以后的贯彻可以在特定的端口上应用更简约的拉手,而不必要再行发明整个协议。最后点是至关首要的,因为交互式信息的传输格局并不严密符合标准的HTTP传输,会在一部分构件上滋生特其余载重。

SuperWebSocket是基于.NET开源Socket框架SuperSocket付出的,
SuperSocket所援救的多数功力在SuperWebSocket中拿走了继续。用户可透过SuperWebSocket来连忙的构建可靠的,高性能的websocket服务器端应用程序。

和SuperSocket一样,SuperWebSocket可以控制台和windows服务的款式运行,同时它还接济直接运行在Website之内,那样更简化了用户的布置。

WebSocket 协议本质上是一个依照 TCP 的合计。为了创制一个 WebSocket
连接,客户端浏览器首先要向服务器发起一个 HTTP 请求,这些请求和平凡的
HTTP 请求例外,蕴含了一些附加头音信,其中附加头新闻”Upgrade:
WebSocket”
标志那是一个报名协议升级的 HTTP
请求,服务器端解析那个附加的头新闻然后暴发应答音信再次回到给客户端,客户端和劳动器端的
WebSocket
连接就创建起来了,双方就能够通过那一个一而再通道自由的传递信息,并且这一个一连会没完没了存在直到客户端或者服务器端的某一方主动的闭馆连接。

上边大家来详细介绍一下 WebSocket 规范,WebSocket
协议有两局地:握手和多少传输。

客户端发出的抓手音讯:

GET /chat HTTP/1.1

Host: server.example.com

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==

Origin: http://example.com

Sec-WebSocket-Protocol: chat, superchat

Sec-WebSocket-Version: 13

劳动器端重返的拉手音信:

HTTP/1.1 101 Switching Protocols

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

Sec-WebSocket-Protocol: chat

客户端握手的指导行听从(HTTP)Request-Line格式,服务器发出的指导行坚守(HTTP)Status-Line格式。在三种情景下,率领行前边随着一组未排序的头域。额外的头域也可能现身,如cookie。头的格式和剖析在RFC2616定义。

就算客户端和服务器都发送了她们的抓手,倘若握手成功,传输数据部分初阶。

在骨子里的费用进度中,为了采纳 WebSocket 接口构建 Web
应用,大家第一需求构建一个落到实处了 WebSocket
规范的服务器,服务器端的已毕不受平台和支付语言的限制,只须求听从WebSocket 规范即可,如今早已冒出了有的相比成熟的 WebSocket
服务器端落成,比如:

  • Kaazing WebSocket Gateway — 一个 Java 实现的 WebSocket Server
  • mod_pywebsocket — 一个 Python 实现的 WebSocket Server
  • Netty —一个 Java 已毕的网络框架之中囊括了对 WebSocket 的支撑
  • node.js —一个 Server 端的 JavaScript 框架提供了对 WebSocket 的匡助
  • SuperWebSocket –一个.NET/Mono 达成的WebSocket Server(本文的中流砥柱)

浏览器辅助

下边是主流浏览器对 HTML5 WebSocket 的支撑景况:

浏览器

支持情况

Chrome

Supported in version 4+

Firefox

Supported in version 4+

Internet Explorer

Supported in version 10+

Opera

Supported in version 10+

Safari

Supported in version 5+

SuperWebSocket是基于.NET开源Socket框架SuperSocket开发的,
SuperSocket所支撑的大部职能在SuperWebSocket中取得了再而三。用户可通过SuperWebSocket来很快的构建可信的,高性能的websocket服务器端应用程序。和SuperSocket一样,SuperWebSocket可以控制台和windows服务的形式运行,同时它还支持间接运行在Website之内,这样更简化了用户的布局。

从SuperWebSocket 下载最新的0.6版本的代码
http://superwebsocket.codeplex.com/releases/view/86249。代码中富含了一个简便的闲话示例:

web.config中部署文件申明参考 SuperSocket体系文档(2)
SuperSocket的中坚配备

在Global.asax文件里看StartSuperWebSocketByConfig:

void StartSuperWebSocketByConfig()
      {
          var serverConfig =
ConfigurationManager.GetSection(“socketServer”) as
SocketServiceConfig;
          if (!SocketServerManager.Initialize(serverConfig))
              return;

          var socketServer =
SocketServerManager.GetServerByName(“SuperWebSocket”) as
WebSocketServer;
          var secureSocketServer =
SocketServerManager.GetServerByName(“SecureSuperWebSocket”) as
WebSocketServer;

          Application[“WebSocketPort”] = socketServer.Config.Port;
          Application[“SecureWebSocketPort”] =
secureSocketServer.Config.Port;

          socketServer.NewMessageReceived += new
SessionEventHandler<WebSocketSession,
string>(socketServer_NewMessageReceived);
          socketServer.NewSessionConnected += new
SessionEventHandler<WebSocketSession>(socketServer_NewSessionConnected);
          socketServer.SessionClosed += new
SessionEventHandler<WebSocketSession,
CloseReason>(socketServer_SessionClosed);

          secureSocketServer.NewSessionConnected += new
SessionEventHandler<WebSocketSession>(secureSocketServer_NewSessionConnected);
          secureSocketServer.SessionClosed += new
SessionEventHandler<WebSocketSession,
CloseReason>(secureSocketServer_SessionClosed);

          if (!SocketServerManager.Start())
              SocketServerManager.Stop();
      }

有多个事件(CommandHandler, NewSessionConnected,
SessionClosed),在种种会话到达的时候,将创建新的处理程序来处理。

客户端的兑现相对于劳动器端的贯彻的话要不难得多了,我们只必要发挥想象去规划
HTML 用户界面,然后调用 WebSocket JavaScript 接口来和 WebSocket
服务器端来交互就可以了。当然别忘了使用一个支撑 HTML5 和 WebSocket
的浏览器。

当页面初次加载的时候,首先会检测当前的浏览器是不是帮衬 WebSocket
并付诸相应的提醒新闻。页面会开头化一个到聊天服务器的 WebSocekt
连接,开始化成功未来,页面会加载对应的 WebSocket 事件处理函数,客户端
JavaScript 代码如下所示:

<script type=”text/javascript”>
     var noSupportMessage = “Your browser cannot support WebSocket!”;
     var ws;

     function resizeFrame() {
         var h = $(window).height();
         var w = $(window).width();
         //Adapt screen height
         $(‘#messageBoard’).css(“height”, (h – 80 – 50 – 100) +
“px”);
         $(‘#messageBoxCell’).css(“width”, (w – 100) + “px”);
         $(‘#messageBox’).css(“width”, (w – 110) + “px”);
     }

     $(document).keypress(function (e) {
         if (e.ctrlKey && e.which == 13 || e.which == 10) {
             $(“#btnSend”).click();
             document.body.focus();
         } else if (e.shiftKey && e.which == 13 || e.which == 10) {
             $(“#btnSend”).click();
             document.body.focus();
         }
     })

     function scrollToBottom(target) {
         target.animate({ scrollTop: target[0].scrollHeight });
     }

     function connectSocketServer() {
         var messageBoard = $(‘#messageBoard’);

         var support = “MozWebSocket” in window ? ‘MozWebSocket’ :
(“WebSocket” in window ? ‘WebSocket’ : null);

         if (support == null) {
             alert(noSupportMessage);
             messageBoard.append(“* ” + noSupportMessage +
“<br/>”);
             return;
         }

         messageBoard.append(“* Connecting to server ..<br/>”);
         // create a new websocket and connect
         ws = new window[support](‘ws://<%= Request.Url.Host
%>:<%= WebSocketPort %>/sample’);

         // when data is comming from the server, this metod is called
         ws.onmessage = function (evt) {
             messageBoard.append(“# ” + evt.data + “<br />”);
             scrollToBottom(messageBoard);
         };

         // when the connection is established, this method is called
         ws.onopen = function () {
             messageBoard.append(‘* Connection open<br/>’);
         };

         // when the connection is closed, this method is called
         ws.onclose = function () {
             messageBoard.append(‘*Ajax, Connection closed<br/>’);
         }

         //setup secure websocket
         var wss = new window[support](‘wss://<%= Request.Url.Host
%>:<%= SecureWebSocketPort %>/sample’);

         // when data is comming from the server, this metod is called
         wss.onmessage = function (evt) {
             messageBoard.append(“# ” + evt.data + “<br />”);
             scrollToBottom(messageBoard);
         };

         // when the connection is established, this method is called
         wss.onopen = function () {
             messageBoard.append(‘* Secure Connection
open<br/>’);
         };

         // when the connection is closed, this method is called
         wss.onclose = function () {
             messageBoard.append(‘* Secure Connection
closed<br/>’);
         }
     }

     function sendMessage() {
         if (ws) {
             var messageBox = document.getElementById(‘messageBox’);
             ws.send(messageBox.value);
             messageBox.value = “”;
         } else {
             alert(noSupportMessage);
         }
     }

     jQuery.event.add(window, “resize”, resizeFrame);

     window.onload = function () {
         resizeFrame();
         connectSocketServer();
     }
</script>

正文介绍了 WebSocket 规范和 WebSocket
接口,以及和观念的实时技术相比较在性能上的优势,并且演示了何等使用
WebSocket 构建一个实时的 Web 应用,最终大家介绍了方今的主流浏览器对
HTML5 的援救情状。微软也明确宣布了前途对 HTML5
的协理,而且那个协理大家得以在 Windows 8 和 IE10
里观看,大家也在种种运动设备,苹果平板上看出了 HTML5 和 WebSocket
的身影。WebSocket 将会成为以后开发实时 Web
应用的Sanmig军应该是决不悬念的了,作为 Web 开发人士,关怀 HTML5,关注WebSocket。

参照小说:

WebSockets, WCF & Silverlight
5

NancyFx combined with WebSocket server in one
executable

相关文章