利用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);

}

完工！

更多相关>>