利用AJAX和ASP.NET實現簡單聊天室

利用AJAX和ASP.NET實現簡單聊天室

個人第一個簡單的Chatroom是用ASP3.0寫成的。那無外乎有二個TextBox，他們發送消息
給程序變量而後顯示在一個每秒刷新的頁面上。在那個時代，一個真正的聊天室必須運用
Applet或ActiveXcontrol。不過這一切都在AJAX到來以後改變了。AJAX是一個結合了XML和
Script的異步通訊機制。如今咱們能夠只用代碼和一點JavaScript。這篇文章就是介紹如何
用AJAX技術來構建一個簡單的聊天室。
示例程序
示例程序是一個單一的多用戶聊天室。其內部維護着一個已登陸用戶的列表。列表將祛除
session過時的用戶。同時它還支持一些命令好比/adminClear清除聊天室/nick[Name]改
變用戶姓名。
你還須要知道
這個程序使用一個類叫作ChatEngine。這個類控制了所有的用戶和消息。用戶被儲存在一
個Hashtable裏，而消息儲存在StringCollection裏：
Hashtableusers;
StringCollectionchat;
一個ChatEngine的全局實例被放置在Global.asax.cs：
publicstaticUChat.ChatEngine.IChatEngineEngine=newUChat.ChatEngine.ChatEngine();
一個JavaScript函數用來異步的將全局變量內的數據顯示在頁面上：
functionsetTimers()
{
timeID=window.setTimeout("updateAll()",refreshRate);
}
利用每一個用戶提供的名稱和ID來標識用戶：
publicvoidAddUser(stringid,stringuser)
{
//makesureusernamedoesnotexistalready
if(!UserExists(user))
{
//addusertouserslist
users.Add(id,user);
//displayanotificationmessagetoallusers
chat.Add(this.MakeServerMessage(string.Format(
joinedfmt,user)));
}
}
截圖和實現步驟
主頁顯示了聊天室的基本信息，好比有多少人在聊天室、ChatLog的大小。
爲了可以登陸聊天室，必須提供一個名稱。
當Login按鈕被單擊。下面的代碼就會被執行：
protectedvoidLogin(objectsender,EventArgse)
{
stringuser=txtUsername.Text;if(!ValidateNick(user))return;
if(Global.Engine.UserExists(user))
{
lblErrorMsg.Text="Auserwiththis"+
"namealreadyexists,tryagain."
return;
}
Response.Redirect("Server.aspx?action=Login&u="+user);
}
進行一些驗證之後，用戶會被轉向到另外一個頁面，這個頁面會利用AddUser函數將用戶放
入用戶列表。當這一切都作好了。用戶又會被轉向到Chat.aspx頁面，下面的JavaScript函
數將要執行在這個頁面上：
<scripttype="text/javascript">
sniffBrowserType();
//Showsloading..screen
showLoadScreen();
//Setthejavascripttimerand
//loadsuserlistandmessages
setTimers();
setFocus('mytext');
</script>
<inputtype="text"class="mytext"
id="mytext"onkeydown="captureReturn(event)">
當用戶輸入了文字，而且按了回車。下面的代碼就會被執行：
//Capturetheenterkeyontheinputboxandpostmessage
functioncaptureReturn(event)
{
if(event.which||event.keyCode)
{
if((event.which==13)||(event.keyCode==13))
{
postText();
returnfalse;
}
else{
returntrue;
}
}
}
functionpostText()
{
rnd++;
//Cleartextboxfirst
chatbox=getElement("mytext");
chat=chatbox.value;
chatbox.value=""
//getuserGUIDfromurl
userid=location.search.substring(1,location.search.length);
//constructAjaxServerURL
url='Server.aspx?action=PostMsg&u='+userid+'&t='+
encodeURIComponent(chat)+'&session='+rnd;
//Createandsettheinstance
//ofappropriateXMLHTTPRequestobject
req=getAjax();
//Updatepagewithnewmessage
req.onreadystatechange=function(){
if(req.readyState==4&&req.status==200){
updateAll();
}
}
req.open('GET',url,true);
req.send(null);
}
完工！

點擊轉貼連接查看更多相關>>