用Asp.Net创建基于Ajax的聊天室程序

原作者Dahan Abdo
译自CodeProject

如要下载源代码，请到我的网站，地址：http://www.vczx.com/article/show.php?id=1796

简 介

　　我的第一个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中。

Hashtable users;
StringCollection chat;

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

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

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


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

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

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

程序运行界面
 


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

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函数将用户加到user lists，然后就进入了聊天室页面chat.aspx，这时下面的JavaScript函数就会被执行：
 


<script type="text/javascript">
      sniffBrowserType();
      //Shows loading.. screen
      showLoadScreen();
      //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 message
function 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 first
      chatbox = getElement( "mytext" );
      chat = chatbox.value;
      chatbox.value = "";
      
      //get user GUID from url
      userid = location.search.substring( 1, location.search.length );
      
      //construct Ajax Server URL
      url = 'Server.aspx?action=PostMsg&u=' + userid + '&t=' +
             encodeURIComponent(chat) + '&session=' + rnd;
      
      //Create and set the instance 
      //of appropriate XMLHTTP Request      object
      req = getAjax();
      
      //Update page with new message
      req.onreadystatechange = function(){
      
            if( req.readyState == 4 && req.status == 200 ) {
                  updateAll();
            }
      }
      
      req.open( 'GET', url, true );
      req.send( null );
}

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

结 论

　　要用Java Applet建一个chat room需要在用户的机器上安装JVM。用ActiveX control存在一些安全问题。而用刚才介绍的AJAX，你却可以轻而易举的创建一个基于HTTP并不需要用户安装任何软件就可以运行的聊天室程序，并且很容易维护。
posted @ 2006-12-19 15:05 loose_went 阅读(3089) 评论(25)  编辑 收藏 所属分类: 01 ASP.NET/AJAX

  回复  引用    
#1楼2006-12-27 06:45 | 海龙[未注册用户]
你好，能给我一份源代码吗？hailong.net.vs@hotmail.com
  回复  引用    
#2楼2007-01-05 10:51 | hello4890[未注册用户]
源代码下载不了，可以给我一份吗？hello4890@yahoo.com.cn
谢谢了！！！
  回复  引用    
#3楼2007-01-15 19:46 | Fengdesudu[未注册用户]
源代码下载不了,能给我发一份吗？kmliguanghua@163.com
谢谢
  回复  引用    
#4楼2007-01-16 17:24 | mic[未注册用户]
我也下载不到。。。你可以email给我吗？ micheallim@yahoo.com
  回复  引用    
#5楼2007-01-16 17:29 | mic[未注册用户]
thanks ya.... i already done for download.... for those haven't get it, please sign in first.

  回复  引用    
#6楼2007-03-07 23:18 | scep[未注册用户]
下载代码时要先注册。
  回复  引用    
#7楼2007-03-28 14:48 | PEIRONGHE[未注册用户]
Thank a lot!

  回复  引用    
#8楼2007-03-29 11:28 | beibei[未注册用户]
您好!您能给我一份吗?我的邮件是mfj019@163.com
  回复  引用    
#9楼2007-04-09 20:18 | shilei[未注册用户]
您好!您能给我一份吗?我的邮件是wangshangliulangsl@163.com
  回复  引用    
#10楼2007-04-22 15:27 | soso[未注册用户]
您好!您能给我一份吗?我的邮件是wl-1455@163.com
  回复  引用    
#11楼2007-04-24 13:44 | 王臻[未注册用户]
很想学习一下 能给个代码参考一下 谢谢
wangzhen@redant.com.cn
  回复  引用    
#12楼2007-05-03 14:42 | 无忧小子[未注册用户]
我也想要,我的邮箱:dengde2@163.com
  回复  引用    
#13楼2007-05-07 10:14 | 那谁[未注册用户]
给我个吧，谢谢
gzq_1@163.com
  回复  引用    
#14楼2007-05-26 09:38 | 3tion[未注册用户]
你这个聊天室的原理和我初期的想法一样。
现在流行的聊天室都是建立持续的http连接，不缓存Reponse。
让服务端程序做个循环，持续输出信息。

  回复  引用    
#15楼2007-07-04 18:36 | fuyanshan[未注册用户]
能发给我一个源代码吗，小弟感激不尽！
fys.1984@yahoo.com.cn
  回复  引用    
#16楼2007-07-29 13:53 | 3ks[未注册用户]
给我个吧，谢谢
spkl44@163.com
  回复  引用    
#17楼2007-09-26 18:41 | mschen[未注册用户]
请给我一份吧,请请
itchenfeng@163.com
  回复  引用  查看    
#18楼[楼主]2007-10-13 18:17 | loose_went      
已经提供下载地址了啊。如要下载源代码，请到我的网站，地址：http://www.vczx.com/article/show.php?id=1796" target="_new">http://www.vczx.com/article/show.php?id=1796
  回复  引用  查看    
#19楼2007-12-05 20:54 | ToBin      
这个虽然是个示例，但有很多可取之处！
希望能完善!
  回复  引用    
#20楼2008-06-13 11:40 | 杉青[未注册用户]
很详细,想得到更多类似的知识.
  回复  引用  查看    
#21楼2009-01-20 13:17 | lovemini      
你好，我用AJAX技术写了个聊天室程序
default.aspx是4个框架，顶部是banner
左侧是用户，右侧是聊天内容区，内置一框架文件
底部是输入区，javascript刷新代码也在底部，有新信息时用write的方式向右部的框架写内容。
现在的问题是底部正在输入时，如果有新信息时，底部的输入框就会失去焦点。
如果将定时器函数内添加底部输入框得到焦点，则用户最小化窗口浏览别的网页时，此窗口会自动最大化！
这个问题怎么解决？？

  回复  引用    
#22楼2009-04-28 10:31 | pork
朋友你好~我下载不到您的源码~能不能MAIL给我~~pork_49@hotmail.com
不胜感激！谢谢了
  回复  引用    
#23楼2009-06-07 15:19 | 未命名[未注册用户]
大哥。。。你不要什么都说是自己的好不好
  回复  引用  查看    
#24楼[楼主]2009-06-08 22:20 | loose_went      
@未命名
此文章译至CodeProject。



发表评论

昵称： [登录] [注册]

主页：

邮箱：(仅博主可见)

评论内容：

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 596872




相关文章:

相关链接: