[导入]用Asp.Net创建基于Ajax的聊天室程序

原作者Dahan Abdo
译自CodeProject

如要下载源代码,请到原文地址:http://www.codeproject.com/Ajax/UChat.asp

简 介

我的第一个chat room 是用ASP 3.0写的。 程序比较简单,两个text box, 用来处理页面上每秒刷新的信息。那时候,要想建一个真正的chat room,要用到Java Applet 或者 ActiveX control。基于HTTP的chart rooms都面临着一些跟我第一个chat room一样的问题。这些问题包括页面刷新导致的屏幕闪烁现象。但这个问题已经被AJAX解决了。 AJAX是JavaScript和 XML异步调用的结合。现在在server端用一些JavaScript代码就可以实现一个真正的chat room了。这篇文章不会介绍Ajax,并假设你已经对Ajax和ASP.NET的运用有一定了解。只是介绍如何用Ajax技术来创建一个基本的chat room。

例 程

这是一个多用户的单一chat room。可以实现基本的聊天功能,还支持一些命令行如: /admin clear 用来清除聊天记录,/nick [Name] 用来更改用户昵称等。程序说明这个程序用一个ChatEngine类来处理所有的聊天信息和用户信息,用户信息存储在一个Hashtable中,聊天信息存储在StringCollection中。

[导入]用Asp.Net创建基于Ajax的聊天室程序Hashtable users;
[导入]用Asp.Net创建基于Ajax的聊天室程序StringCollection chat;

在Global.asax.cs 中声明一个全局的ChatEngine的实例,为chat room中所有users共用:

[导入]用Asp.Net创建基于Ajax的聊天室程序public static UChat.ChatEngine.IChatEngine Engine = new UChat.ChatEngine.ChatEngine();
[导入]用Asp.Net创建基于Ajax的聊天室程序

还有一个JavaScript timer函数用来同步全局变量和页面信息。


[导入]用Asp.Net创建基于Ajax的聊天室程序function setTimers()
[导入]用Asp.Net创建基于Ajax的聊天室程序[导入]用Asp.Net创建基于Ajax的聊天室程序
[导入]用Asp.Net创建基于Ajax的聊天室程序{
[导入]用Asp.Net创建基于Ajax的聊天室程序  timeID 
= window.setTimeout( "updateAll()", refreshRate );
[导入]用Asp.Net创建基于Ajax的聊天室程序}

每一个user都由一个username和一个GUID来唯一标识。

[导入]用Asp.Net创建基于Ajax的聊天室程序public void AddUser(string id, string user)
[导入]用Asp.Net创建基于Ajax的聊天室程序[导入]用Asp.Net创建基于Ajax的聊天室程序
[导入]用Asp.Net创建基于Ajax的聊天室程序{
[导入]用Asp.Net创建基于Ajax的聊天室程序      
//make sure user name does not exist already
[导入]用Asp.Net创建基于Ajax的聊天室程序
      if!UserExists( user ) )
[导入]用Asp.Net创建基于Ajax的聊天室程序[导入]用Asp.Net创建基于Ajax的聊天室程序      
[导入]用Asp.Net创建基于Ajax的聊天室程序{
[导入]用Asp.Net创建基于Ajax的聊天室程序            
//add user to users list
[导入]用Asp.Net创建基于Ajax的聊天室程序
            users.Add( id, user );
[导入]用Asp.Net创建基于Ajax的聊天室程序                                    
[导入]用Asp.Net创建基于Ajax的聊天室程序            
//display a notification message to all users 
[导入]用Asp.Net创建基于Ajax的聊天室程序
            chat.Add( this.MakeServerMessage(string.Format(
[导入]用Asp.Net创建基于Ajax的聊天室程序                      joinedfmt, user ) ));
[导入]用Asp.Net创建基于Ajax的聊天室程序      }

[导入]用Asp.Net创建基于Ajax的聊天室程序}

[导入]用Asp.Net创建基于Ajax的聊天室程序

程序运行界面
 
[导入]用Asp.Net创建基于Ajax的聊天室程序

开始页面显示一些有关当前session的基本信息,比如user number、聊天记录的大小等。用户必须提供用户名才能进入聊天室。点击Login button进入下面的函数:

[导入]用Asp.Net创建基于Ajax的聊天室程序protected void Login( object sender, EventArgs e )
[导入]用Asp.Net创建基于Ajax的聊天室程序[导入]用Asp.Net创建基于Ajax的聊天室程序
[导入]用Asp.Net创建基于Ajax的聊天室程序{
[导入]用Asp.Net创建基于Ajax的聊天室程序      
string user = txtUsername.Text;
[导入]用Asp.Net创建基于Ajax的聊天室程序
[导入]用Asp.Net创建基于Ajax的聊天室程序      
if!ValidateNick( user ) ) return;
[导入]用Asp.Net创建基于Ajax的聊天室程序
[导入]用Asp.Net创建基于Ajax的聊天室程序      
if( Global.Engine.UserExists( user ) )
[导入]用Asp.Net创建基于Ajax的聊天室程序[导入]用Asp.Net创建基于Ajax的聊天室程序      
[导入]用Asp.Net创建基于Ajax的聊天室程序{
[导入]用Asp.Net创建基于Ajax的聊天室程序            lblErrorMsg.Text 
= "A user with this " + 
[导入]用Asp.Net创建基于Ajax的聊天室程序                 
"name already exists, try again.";
[导入]用Asp.Net创建基于Ajax的聊天室程序            
return;
[导入]用Asp.Net创建基于Ajax的聊天室程序      }

[导入]用Asp.Net创建基于Ajax的聊天室程序      Response.Redirect( 
"Server.aspx?action=Login&u=" + user );
[导入]用Asp.Net创建基于Ajax的聊天室程序}

经过一些简单验证后,通过AddUser函数将用户加到user lists,然后就进入了聊天室页面chat.aspx,这时下面的JavaScript函数就会被执行:
 
[导入]用Asp.Net创建基于Ajax的聊天室程序

[导入]用Asp.Net创建基于Ajax的聊天室程序<script type="text/javascript">
[导入]用Asp.Net创建基于Ajax的聊天室程序      sniffBrowserType();
[导入]用Asp.Net创建基于Ajax的聊天室程序      
//Shows loading.. screen
[导入]用Asp.Net创建基于Ajax的聊天室程序
      showLoadScreen();
[导入]用Asp.Net创建基于Ajax的聊天室程序      
//Set the javascript timer and 
[导入]用Asp.Net创建基于Ajax的聊天室程序      
//loads user list and messages 
[导入]用Asp.Net创建基于Ajax的聊天室程序
      setTimers();
[导入]用Asp.Net创建基于Ajax的聊天室程序      setFocus(
'mytext');
[导入]用Asp.Net创建基于Ajax的聊天室程序
</script>

当用户键入一些信息并回车时,就会调用下面的函数:

[导入]用Asp.Net创建基于Ajax的聊天室程序<input type="text" class="mytext" 
[导入]用Asp.Net创建基于Ajax的聊天室程序       id
="mytext" onkeydown="captureReturn(event)">
[导入]用Asp.Net创建基于Ajax的聊天室程序
[导入]用Asp.Net创建基于Ajax的聊天室程序
// Capture the enter key on the input box and post message
[导入]用Asp.Net创建基于Ajax的聊天室程序
function captureReturn( event )
[导入]用Asp.Net创建基于Ajax的聊天室程序[导入]用Asp.Net创建基于Ajax的聊天室程序
[导入]用Asp.Net创建基于Ajax的聊天室程序{
[导入]用Asp.Net创建基于Ajax的聊天室程序      
if(event.which || event.keyCode)
[导入]用Asp.Net创建基于Ajax的聊天室程序[导入]用Asp.Net创建基于Ajax的聊天室程序      
[导入]用Asp.Net创建基于Ajax的聊天室程序{
[导入]用Asp.Net创建基于Ajax的聊天室程序            
if ((event.which == 13|| (event.keyCode == 13)) 
[导入]用Asp.Net创建基于Ajax的聊天室程序[导入]用Asp.Net创建基于Ajax的聊天室程序            
[导入]用Asp.Net创建基于Ajax的聊天室程序{
[导入]用Asp.Net创建基于Ajax的聊天室程序                  postText();
[导入]用Asp.Net创建基于Ajax的聊天室程序                  
return false;
[导入]用Asp.Net创建基于Ajax的聊天室程序            }

[导入]用Asp.Net创建基于Ajax的聊天室程序[导入]用Asp.Net创建基于Ajax的聊天室程序            
else [导入]用Asp.Net创建基于Ajax的聊天室程序{
[导入]用Asp.Net创建基于Ajax的聊天室程序                  
return true;
[导入]用Asp.Net创建基于Ajax的聊天室程序            }

[导入]用Asp.Net创建基于Ajax的聊天室程序      }
     
[导入]用Asp.Net创建基于Ajax的聊天室程序}

[导入]用Asp.Net创建基于Ajax的聊天室程序function postText()
[导入]用Asp.Net创建基于Ajax的聊天室程序[导入]用Asp.Net创建基于Ajax的聊天室程序
[导入]用Asp.Net创建基于Ajax的聊天室程序{
[导入]用Asp.Net创建基于Ajax的聊天室程序      rnd
++;
[导入]用Asp.Net创建基于Ajax的聊天室程序      
//Clear text box first
[导入]用Asp.Net创建基于Ajax的聊天室程序
      chatbox = getElement( "mytext" );
[导入]用Asp.Net创建基于Ajax的聊天室程序      chat 
= chatbox.value;
[导入]用Asp.Net创建基于Ajax的聊天室程序      chatbox.value 
= "";
[导入]用Asp.Net创建基于Ajax的聊天室程序      
[导入]用Asp.Net创建基于Ajax的聊天室程序      
//get user GUID from url
[导入]用Asp.Net创建基于Ajax的聊天室程序
      userid = location.search.substring( 1, location.search.length );
[导入]用Asp.Net创建基于Ajax的聊天室程序      
[导入]用Asp.Net创建基于Ajax的聊天室程序      
//construct Ajax Server URL
[导入]用Asp.Net创建基于Ajax的聊天室程序
      url = 'Server.aspx?action=PostMsg&u=' + userid + '&t=' +
[导入]用Asp.Net创建基于Ajax的聊天室程序             encodeURIComponent(chat) 
+ '&session=' + rnd;
[导入]用Asp.Net创建基于Ajax的聊天室程序      
[导入]用Asp.Net创建基于Ajax的聊天室程序      
//Create and set the instance 
[导入]用Asp.Net创建基于Ajax的聊天室程序      
//of appropriate XMLHTTP Request      object
[导入]用Asp.Net创建基于Ajax的聊天室程序
      req = getAjax();
[导入]用Asp.Net创建基于Ajax的聊天室程序      
[导入]用Asp.Net创建基于Ajax的聊天室程序      
//Update page with new message
[导入]用Asp.Net创建基于Ajax的聊天室程序[导入]用Asp.Net创建基于Ajax的聊天室程序
      req.onreadystatechange = function()[导入]用Asp.Net创建基于Ajax的聊天室程序{
[导入]用Asp.Net创建基于Ajax的聊天室程序      
[导入]用Asp.Net创建基于Ajax的聊天室程序[导入]用Asp.Net创建基于Ajax的聊天室程序            
if( req.readyState == 4 && req.status == 200 ) [导入]用Asp.Net创建基于Ajax的聊天室程序{
[导入]用Asp.Net创建基于Ajax的聊天室程序                  updateAll();
[导入]用Asp.Net创建基于Ajax的聊天室程序            }

[导入]用Asp.Net创建基于Ajax的聊天室程序      }

[导入]用Asp.Net创建基于Ajax的聊天室程序      
[导入]用Asp.Net创建基于Ajax的聊天室程序      req.open( 
'GET', url, true );
[导入]用Asp.Net创建基于Ajax的聊天室程序      req.send( 
null );
[导入]用Asp.Net创建基于Ajax的聊天室程序}

就这么多,没什么特别的,你可以看源代码,里面有很多注释信息。

结 论

要用Java Applet建一个chat room需要在用户的机器上安装JVM。用ActiveX control存在一些安全问题。而用刚才介绍的AJAX,你却可以轻而易举的创建一个基于HTTP并不需要用户安装任何软件就可以运行的聊天室程序,并且很容易维护。 [导入]用Asp.Net创建基于Ajax的聊天室程序

loose_went 2006-12-19 15:05 发表评论

文章来源:http://www.cnblogs.com/michaelxu/archive/2006/12/19/596872.html

转载于:https://www.cnblogs.com/neilvension/archive/2006/12/20/597807.html