今天看了下websocket的知识,了解到这是html5新增的特性,主要用于实时web的通讯。以前客户端获取服务端的数据,是经过客户端发出请求,服务端进行响应的模式,或者经过ajax每隔一段时间从后台发出请求,而后更新页面的信息,这种轮询的方式使得用户感受页面是“实时响应”的,这样作虽然简单但未免有些暴力,另外每次请求都会有TCP三次握手而且附带了http头信息,服务器表示压力很大,这就形成了性能上和延迟的问题。html
后来的技术方案中又出现了长轮询、Comet、浏览器插件(flash)和Java等来实现服务器往客户端推送消息,但都有一些弊端。html5
WebSocket的出现,意味着另外一种解决方案,其提供了基于TCP的双向的、全双工(发送数据的同时也可以接受数据,二者同步进行)的socket链接。使用websocket,一旦服务端和客户端之间完成握手,信息就能够随意往来两端,而不用附件那些无用的http头信息,下降了带宽的占用,提升了性能,下降了延时。但其缺陷是浏览器的支持不够,好比IE,到了IE10才支持。web
如今就经过一个简单的例子来说讲其运用过程,先上下效果图:ajax
项目的环境:.NET 4.5 +MVC 4 +JQuery+HTML5+VS2013+IE11 chrome
核心的实现过程,分如下几步:浏览器
一、websocket的建立、发送消息、接受消息、关闭服务器
二、服务端的响应websocket
下面针对上面的步骤,具体讲解下:socket
一、websocket的建立、发送消息、接受消息、关闭async
websocket里包含的几个重要事件以下图: onopen onmessage onerror onclose;
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事件 //socket创建链接 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"); }
固然客户端也能够往服务端发送消息,发送事件即是socket.send(data);data表明发送给服务端的数据:具体代码以下
if (socket.readyState == WebSocket.OPEN) { if ($("#txtMsg").val() == "") { if (!msg) { return; //空文本不发送消息 } } //若是未输入用户名,根据当前时间生成游客昵称 if ($("#userName").val() == "") { var d = new Date(); $("#userName").val("游客" + d.getMinutes() + "_" + d.getSeconds() + "_" + d.getMilliseconds()); } if (!msg) { msg = "" + $("#userName").val() + ":" + "<div class='divChat'>" + $("#txtMsg").val() + "</div>"; } else { msg = "" + $("#userName").val() + " " + msg; } socket.send(msg); $("#txtMsg").val(""); //清空已输入的数据 $("#txtMsg").focus(); }
二、服务端的响应
这里咱们添加通常处理程序来进行响应和推送客户端消息,其中有一点要处理的是 咱们要实现即时多人聊天,就要把客户端发过来的消息广播到其余客户端,这里实现原理也很简单,就是把全部的链接用list存起来,而后遍历list集合,将消息发送给各个客户端。具体实现代码以下:
public class SocketHandler : IHttpHandler { //用来存储当前全部链接的客户单 public static List<WebSocket> WebSocketList; public void ProcessRequest(HttpContext context) { if (WebSocketList == null) { WebSocketList = new List<WebSocket>(); } HttpContext.Current.AcceptWebSocketRequest(async (contexts) => { WebSocket socket = contexts.WebSocket; while (true) { ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[1024]); CancellationToken token; WebSocketReceiveResult result = await socket.ReceiveAsync(buffer, token); //获取客户端发过来的消息 string clientMessage = Encoding.UTF8.GetString(buffer.Array, 0, result.Count); if (socket.State == WebSocketState.Open) { //从新组织消息,发送给客户端 clientMessage = DateTime.Now.ToString() + " " + clientMessage; buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(clientMessage)); //若是该客户端为初次加入,添加到用户列表; if (!WebSocketList.Contains(socket)) { WebSocketList.Add(socket); } //将消息进行广播 foreach (WebSocket item in WebSocketList) { await item.SendAsync(buffer, WebSocketMessageType.Text, true, CancellationToken.None); } } if (socket.State == WebSocketState.CloseReceived) { //客户断开的时候,要从列表中移除 WebSocketList.Remove(socket); } } }); }
参考资料:使用 HTML5 WebSocket 构建实时 Web 应用
ps:离职了,找工做中……广州/深圳 围观简历
喜欢就动动手指支持下!您的支持是我最大动力!