利用AJAX和ASP.NET实现简单聊天室

abcdef133

介绍

　我的第一个简单的Chat room 是用ASP 3.0 写成的。那无外乎有二个TextBox，他们发送消息给程序变量然后显示在一个每秒刷新的页面上。在那个时代，一个真正的聊天室必须运用Java Applet或ActiveX control。不过这一切都在AJAX到来之后改变了。AJAX是一个结合了XML 和 JavaScript的异步通信机制。现在我们可以只用服务器代码和一点JavaScript 。这篇文章就是介绍如何用AJAX技术来构建一个简单的聊天室。

示例程序

　示例程序是一个单一的多用户聊天室。其内部维护着一个已登录用户的列表。列表将祛除session过期的用户。同时它还支持一些命令比如 /admin Clear 清除聊天室 /nick [Name] 改变用户姓名。

你还需要知道

　这个程序使用一个类叫做 ChatEngine 。 这个类控制了全部的用户和消息。用户被储存在一个Hashtable 里，而消息储存在 StringCollection 里：

1. Hashtable users;
   
2. StringCollection chat;  

复制代码

一个 ChatEngine 的全局实例被放置在 Global.asax.cs ：

1. public static UChat.ChatEngine.IChatEngine Engine = new UChat.ChatEngine.ChatEngine();

复制代码

一个JavaScript 函数用来异步的将全局变量内的数据显示在页面上：

1. function setTimers()
   
2. {
   
3. timeID = window.setTimeout( "updateAll()", refreshRate );
   
4. }  

复制代码

利用每个用户提供的名称和ID来标识用户：

1. public void AddUser(string id, string user)
   
2. {
   
3. //make sure user name does not exist already
   
4. if( !UserExists( user ) )
   
5. {
   
6. //add user to users list
   
7. users.Add( id, user );
   
8. //display a notification message to all users
   
9. chat.Add( this.MakeServerMessage(string.Format(
   
10. joinedfmt, user ) ));
    
11. }
    
12. }  

复制代码

截图和实现步骤



主页显示了聊天室的基本信息，比如有多少人在聊天室、ChatLog的大小。
为了能够登录聊天室，必须提供一个名称。

当 Login 按钮被单击。下面的代码就会被执行：

1. protected void Login( object sender, EventArgs e )
   
2. {
   
3. string user = txtUsername.Text; if( !ValidateNick( user ) ) return;
   
4. if( Global.Engine.UserExists( user ) )
   
5. {
   
6. lblErrorMsg.Text = "A user with this " +
   
7. "name already exists, try again."
   
8. return;
   
9. }
   
10. Response.Redirect( "Server.aspx?action=Login&u=" + user );
    
11. }  

复制代码

abcdef133

进行一些验证以后，用户会被转向到另一个页面，这个页面会利用 AddUser 函数将用户放入用户列表。当这一切都做好了。用户又会被转向到 Chat.aspx 页面，下面的 JavaScript 函数将要执行在这个页面上：

1. 
   
2. sniffBrowserType();
   
3. //Shows loading.. screen
   
4. showLoadScreen();
   
5. //Set the javascript timer and
   
6. //loads user list and messages
   
7. setTimers();
   
8. setFocus('mytext');
   
9. 
   
10. <input type="text" class="mytext"
    
11. id="mytext" onkeydown="captureReturn(event)">

复制代码

当用户输入了文字，并且按了回车。下面的代码就会被执行：

1. // Capture the enter key on the input box and post message
   
2. function captureReturn( event )
   
3. {
   
4. if(event.which || event.keyCode)
   
5. {
   
6. if ((event.which == 13) || (event.keyCode == 13))
   
7. {
   
8. postText();
   
9. return false;
   
10. }
    
11. else {
    
12. return true;
    
13. }
    
14. }
    
15. }
    
16. function postText()
    
17. {
    
18. rnd++;
    
19. //Clear text box first
    
20. chatbox = getElement( "mytext" );
    
21. chat = chatbox.value;
    
22. chatbox.value = ""
    
23. //get user GUID from url
    
24. userid = location.search.substring( 1, location.search.length );
    
25. //construct Ajax Server URL
    
26. url = 'Server.aspx?action=PostMsg&u=' + userid + '&t=' +
    
27. encodeURIComponent(chat) + '&session=' + rnd;
    
28. //Create and set the instance
    
29. //of appropriate XMLHTTP Request object
    
30. req = getAjax();
    
31. //Update page with new message
    
32. req.onreadystatechange = function(){
    
33. if( req.readyState == 4 && req.status == 200 ) {
    
34. updateAll();
    
35. }
    
36. }
    
37. req.open( 'GET', url, true );
    
38. req.send( null );
    
39. }  

复制代码

完工！就是这些了。没什么特别的地方，