介紹
我的第一個簡單的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();//UpUpdate page with new messagereq.onreadystate ){if( req.readyState == 4 && req.status == 200 ) {updateAll();}}req.open( 'GET', url, true );req.send( null );}
完工！就是這些了。沒什麼特別的地方，下載範例程序，然後理解這些程式碼！
原作者Dahan Abdo
翻譯yueue
原文章網址
下載範例程式：
codeproject
本地下載