介紹

　　我的第一個簡單的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 = ""http://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 );}

　　完工！就是這些了。沒什么特別的地方，下載示例程序，然后理解這些代碼！