介紹

我的第一個簡單的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 );}
完工！就是這些了。沒什么特別的地方，下載示例程序，然后理解這些代碼！

原作者 Dahan Abdo
翻譯 yueue

原文章地址

下載示例程序：

codeproject

本地下載

 http://m.survivalescaperooms.com/yueue/archive/2007/01/16/621509.html