介紹
我的第一個簡單的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 函數將會執行在這個頁面上: