介绍

我的第一个简单的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的大小。[www.iocblog.net 来源]
为了能够登录聊天室，必须提供一个名称。[www.iocblog.net 来源]

当 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