鸿 网 互 联 www.68idc.cn

当前位置 : 服务器租用 > .net技术 > c#编程 > >

html5+js+.Net的即时多人聊天

来源:互联网 作者:佚名 时间:2013-10-17 15:35
今天看了下websocket的知识,了解到这是html5新增的特性,主要用于实时web的通信。之前客户端获取服务端的数据,是通过客户端发出请求,服务端进行响应的模式,或者通过ajax每隔一段时间从后台发出请求,然后更新页面的信息,这种轮询的方式使得用户感觉页面

        今天看了下websocket的知识,了解到这是html5新增的特性,主要用于实时web的通信。之前客户端获取服务端的数据,,是通过客户端发出请求,服务端进行响应的模式,或者通过ajax每隔一段时间从后台发出请求,然后更新页面的信息,这种轮询的方式使得用户感觉页面是“实时响应”的,这样做虽然简单但未免有些暴力,另外每次请求都会有TCP三次握手并且附带了http头信息,服务器表示压力很大,这就造成了性能上和延迟的问题。

        后来的技术方案中又出现了长轮询、Comet、浏览器插件(flash)和Java等来实现服务器往客户端推送消息,但都有一些弊端。

        WebSocket的出现,意味着另一种解决方案,其提供了基于TCP的双向的、全双工(发送数据的同时也能够接受数据,两者同步进行)的socket连接。使用websocket,一旦服务端和客户端之间完成握手,信息就可以随意往来两端,而不用附件那些无用的http头信息,降低了带宽的占用,提高了性能,降低了延时。但其缺陷是浏览器的支持不够,比如IE,到了IE10才支持。

        现在就通过一个简单的例子来讲讲其运用过程,先上下效果图:

即时通讯2

         项目的环境:.NET 4.5 +MVC 4 +JQuery+HTML5+VS2013+IE11     

核心的实现过程,分以下几步:

1、websocket的创建、发送消息、接受消息、关闭

2、服务端的响应

        下面针对上面的步骤,具体讲解下:

1、websocket的创建、发送消息、接受消息、关闭

websocket里包含的几个重要事件如下图: onopen onmessage onerror onclose;

image003

           websocket的创建: 这时连接会发送到服务端后台代码,进行客户端和服务端的握手,如果握手成功,则会触发onopen事件,表示连接建立;如果连接失败,就会执行onerror事件,随后执行onclose事件。当客户端获取到服务端推送的消息后,就会执行onmessage事件。

try{ if ("WebSocket" in window) { //判断浏览器是否支持WebSocket socket = new WebSocket("ws://localhost:13458/Socket/SocketHandler.ashx"); //socket连接服务端地址 } } catch(ex) { log("您的浏览器不支持WebSocket,请切换到更高版本 或用chrome firefox"); return; } socket.onopen = function () { //连接成功,将消息广播出去 isSocketConnect = true; $("#btnWs").val("断开"); sendSocketMessage(Event,"进入聊天室"); } //socket得到服务端广播的消息 socket.onmessage = function (event) { Log(event.data); } //socket连接关闭 socket.onclose = function () { Log("socket closed!"); } //socket连接出现错误 socket.onerror = function (event) { Log("socket connect error"); }           

网友评论
<