• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

  介绍

  我之第一个简单之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">

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

  // 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 );}

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
ASP.NETMVC之&quot;重定向/页面跳转&quot;(关键词RedirectToAction,Redirect) ...发布时间:2022-07-10
下一篇:
asp.netcore集成JWT(一)发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap