分享
 
 
 

利用AJAX和ASP.NET实现简单聊天室

王朝asp·作者佚名  2008-05-31
窄屏简体版  字體: |||超大  

介绍

我的第一个简单的Chat room 是用ASP 3.0 写成的。那无外乎有二个TextBox,他们发送消息给程序变量然后显示在一个每秒刷新的页面上。在那个时代,一个真正的聊天室必须运用Java Applet或ActiveX control。不过这一切都在AJAX到来之后改变了。AJAX是一个结合了XML 和 JavaScript的异步通信机制。现在我们可以只用服务器代码和一点JavaScript 。这篇文章就是介绍如何用AJAX技术来构建一个简单的聊天室。

示例程序

示例程序是一个单一的多用户聊天室。其内部维护着一个已登录用户的列表。列表将祛除session过期的用户。同时它还支持一些命令比如 /admin Clear 清除聊天室 /nick [Name] 改变用户姓名。

你还需要知道

这个程序使用一个类叫做 ChatEngine 。 这个类控制了全部的用户和消息。用户被储存在一个Hashtable 里,而消息储存在 StringCollection 里:

Hashtable users;StringCollection chat;

一个 ChatEngine 的全局实例被放置在 Global.asax.cs :

public static UChat.ChatEngine.IChatEngine Engine =new UChat.ChatEngine.ChatEngine();

一个JavaScript 函数用来异步的将全局变量内的数据显示在页面上:

function setTimers(){timeID = window.setTimeout( "updateAll()", refreshRate );}

利用每个用户提供的名称和ID来标识用户:

public void AddUser(string id, string user){//make sure user name does not exist alreadyif( !UserExists( user ) ){//add user to users listusers.Add( id, user );//display a notification message to all users chat.Add( this.MakeServerMessage(string.Format(joinedfmt, user ) ));}}

截图和实现步骤

主页显示了聊天室的基本信息,比如有多少人在聊天室、ChatLog的大小。

为了能够登录聊天室,必须提供一个名称。

当 Login 按钮被单击。下面的代码就会被执行:

protected void Login( object sender, EventArgs e ){string user = txtUsername.Text;if( !ValidateNick( user ) ) return;if( Global.Engine.UserExists( user ) ){lblErrorMsg.Text = "A user with this " +"name already exists, try again."return;}Response.Redirect( "Server.aspx?action=Login&u=" + user );}

进行一些验证以后,用户会被转向到另一个页面,这个页面会利用 AddUser 函数将用户放入用户列表。当这一切都做好了。用户又会被转向到 Chat.aspx 页面,下面的 JavaScript 函数将要执行在这个页面上:

<script type="text/javascript">sniffBrowserType();//Shows loading.. screenshowLoadScreen();//Set the javascript timer and //loads user list and messages setTimers();setFocus('mytext');</script><input type="text" class="mytext"id="mytext" onkeydown="captureReturn(event)">

当用户输入了文字,并且按了回车。下面的代码就会被执行:

// Capture the enter key on the input box and post messagefunction captureReturn( event ){if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)){postText();return false;}else {return true;}}}function postText(){rnd++;//Clear text box firstchatbox = getElement( "mytext" );chat = chatbox.value;chatbox.value = ""//get user GUID from urluserid = location.search.substring( 1, location.search.length );//construct Ajax Server URLurl = 'Server.aspx?action=PostMsg&u=' + userid + '&t=' +encodeURIComponent(chat) + '&session=' + rnd;//Create and set the instance //of appropriate XMLHTTP Request objectreq = getAjax();//Update page with new messagereq.onreadystatechange = function(){if( req.readyState == 4 && req.status == 200 ) {updateAll();}}req.open( 'GET', url, true );req.send( null );}

完工!就是这些了。没什么特别的地方,下载示例程序,然后理解这些代码!

原作者 Dahan Abdo

翻译 yueue

原文章地址

下载示例程序:

codeproject

本地下载

http://www.cnblogs.com/yueue/archive/2007/01/16/621509.html

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有