html5+js+.Net的即时多人聊天
今天看了下websocket的知识,了解到这是html5新增的特性,主要用于实时web的通信。之前客户端获取服务端的数据,是通过客户端发出请求,服务端进行响应的模式,或者通过ajax每隔一段时间从后台发出请求,然后更新页面的信息,这种轮询的方式使得用户感觉页面是“实时响应”的,这样做虽然简单但未免有些暴力,另外每次请求都会有TCP三次握手并且附带了http头信息,服务器表示压力很大,这就造成了性能上和延迟的问题。
后来的技术方案中又出现了长轮询、Comet、浏览器插件(flash)和Java等来实现服务器往客户端推送消息,但都有一些弊端。
WebSocket的出现,意味着另一种解决方案,其提供了基于TCP的双向的、全双工(发送数据的同时也能够接受数据,两者同步进行)的socket连接。使用websocket,一旦服务端和客户端之间完成握手,信息就可以随意往来两端,而不用附件那些无用的http头信息,降低了带宽的占用,提高了性能,降低了延时。但其缺陷是浏览器的支持不够,比如IE,到了IE10才支持。
现在就通过一个简单的例子来讲讲其运用过程,先上下效果图:
项目的环境:.NET 4.5 +MVC 4 +JQuery+HTML5+VS2013+IE11
核心的实现过程,分以下几步:
1、websocket的创建、发送消息、接受消息、关闭
2、服务端的响应
下面针对上面的步骤,具体讲解下:
1、websocket的创建、发送消息、接受消息、关闭
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();
}
2、服务端的响应
这里我们添加一般处理程序来进行响应和推送客户端消息,其中有一点要处理的是 我们要实现即时多人聊天,就要把客户端发过来的消息广播到其他客户端,这里实现原理也很简单,就是把所有的连接用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:离职了,找工作中……广州/深圳 围观简历
喜欢就动动手指支持下!您的支持是我最大动力!
html5+js+.Net的即时多人聊天的更多相关文章
- 使用node.js实现多人聊天室(socket.io、B/S)
通过B/S架构实现多人聊天,客户端连接服务器,发送信息,服务器接收信息之后返回给客户端. 主要是通过socket.io实现浏览器和服务器之间进行实时,双向和基于事件的通信. socket.io官方文档 ...
- 使用 HTML5 webSocket API实现即时通讯的功能
project下载地址:http://download.csdn.net/detail/wangshuxuncom/6430191 说明: 本project用于展示怎样使用 HTML5 webSock ...
- SignalR 实现Web多人聊天室
ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以互相通知消 ...
- Html5+js测试题(开发版)
------------------------------------------------ 1. 谈谈你对js闭包的理解: 使用闭包主要是为了设计私有的方法和变量.闭包的优点是可以避免全局变量的 ...
- Html5+js测试题【完整版】
一.闭包的理解:使用闭包主要是为了设计私有的方法和变量.闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露.闭包三个特性: 1.函数嵌套函数 ; 2 ...
- android asmack 注册 登陆 聊天 多人聊天室 文件传输
XMPP协议简介 XMPP协议(Extensible Messaging and PresenceProtocol,可扩展消息处理现场协议)是一种基于XML的协议,目的是为了解决及时通信标准而提出来的 ...
- Spring整合DWR comet 实现无刷新 多人聊天室
用dwr的comet(推)来实现简单的无刷新多人聊天室,comet是长连接的一种.通常我们要实现无刷新,一般会使用到Ajax.Ajax 应用程序可以使用两种基本的方法解决这一问题:一种方法是浏览器每隔 ...
- 只要三步,使用html5+js实现像素风头像生成器
只要三步,使用html5+js实现像素风头像生成器 html5的画布给我们带来了很大的空间,其实像素风格头像生成器只是用到了画方块的方法.画一个像素头像,只要三步,1.解决像素点,2.解决像素点之间的 ...
- [Web][高中同学毕业分布去向网站+服务器上挂载]二、敲定思路与方向(HTML5+JS(JQuery+ECharts))
高中同学毕业分布网站:敲定思路 一.背景 第一集:http://www.cnblogs.com/Twobox/p/8368121.html 中大体确定了自己的 大体目标.大体思路. 但是 . 在今天的 ...
随机推荐
- HITS
HITS 1 概述 HITS(hypertext induced topic search)超链接归纳主题搜索是由kleinbers在90年代提出的基于链接分析的网页排名算法.Hits算法是利用Hub ...
- 超详细JSON解析步骤
JSON简介 JAVAScript Object Notation是一种轻量级的数据交换格式 具有良好的可读和便于快速编写的特性. 业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得了 ...
- 微信小程序Wepy框架的三个事件交互($broadcast,$emit,$invoke)
$broadcast: $broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消.事件广播的顺序为广度优先搜索顺序,如上图,如果页面Page_Index发起一个$bro ...
- java try catch finally return执行
public static int testBasic(){ int i = 1; try{ i++; System.out.println("try block, i = "+i ...
- Linux 用户和文件
Linux系统中用户的扩展研究 进程 用户和文件 Linux中的用户及用户组 linux中只有两个等级:root和非root, 一个用户至少属于一个用户组 一个用户可以属于多个用户组 用户本身的区别主 ...
- 【转发】在SQL Server中通过字段值查询存储该字段的表
-- Copyright © 2002 Narayana Vyas Kondreddi. All rights reserved. -- Purpose: To search all colu ...
- [Erlang30]Erlang shell是如何工作的?
一些关于Erlang启动进程的分析:希望你会喜欢. 原英文地址:http://ferd.ca/repl-a-bit-more-and-less-than-that.html 研究Erlang shel ...
- 常用脚本--生成指定表的INSERT 语句
--================================================= --摘抄自http://www.cnblogs.com/sunth/archive/2013/0 ...
- Rest-assured 写日志到 log4j
背景: 采用Rest-assured,日志采用log4j,发现Rest-assured本身只支持打印日志到控制台,但期望打印到文件中以便排查问题 请求打印的语句只能输出到控制台 given().log ...
- c语言第一次作业--顺序、分支结构
1.1思维导图 1.2.1本周学习体会以及代码量学习体会 1.2.2学习体会 因为在暑假时候没有对c语言进行学习,没太关注一些学习资料,一些教学视频也没看,感觉对c语言是陌生的,刚开课的时候自 ...