介紹
我的第一個簡單的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 = ""//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 );}
完工！就是這些了。