在 ASP.NET 中构建基于 AJAX 的聊天室

• 下载演示项目 - 91.5 KB

引言

我使用 ASP 3.0 构建了我的第一个聊天室。它只不过是两个文本框，将消息发送到一个应用程序变量，该变量每秒刷新一次时就会被放到页面上。在那个时候，构建一个真正的聊天室需要使用 Java Applet 或 ActiveX 控件。基于 HTTP 的聊天室与我的基本聊天室一样，都存在问题。这些问题包括页面不断刷新，这会导致烦人的闪烁和声音。随着 AJAX 的出现，这种情况发生了变化。AJAX 是异步调用与 JavaScript 和 XML 的结合。现在可以使用服务器端代码和一些 JavaScript 来构建一个真正的聊天室。本文并非 AJAX 的介绍。假设您对在 ASP.NET 中使用 AJAX 具有基本的了解。本文介绍了如何使用 AJAX 技术来创建一个基本的聊天室。

示例应用程序

示例应用程序是一个包含许多用户的单个聊天室。它维护一个用户列表，该列表在用户登录时填充。当用户会话超时时，列表会变短。聊天室还允许执行一些类似命令行功能的函数，例如 /admin clear（清除聊天室）和 /nick [Name]（更改当前用户的昵称）。

您需要了解的内容

此应用程序使用一个名为 ChatEngine 的类。该类处理所有聊天室消息和用户。用户存储在 Hashtable 中，消息存储在 StringCollection 中。

Hashtable users;
StringCollection chat;

在 Global.asax.cs 中声明了 ChatEngine 的一个全局实例，供聊天室的所有用户共享

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

JavaScript 计时器函数用于异步从全局变量中提取数据，并在页面上呈现它。

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

每个用户都通过提供的用户名和 GUID 来标识。

public void AddUser(string id, string user)
{
      //make sure user name does not exist already

      if( !UserExists( user ) )
      {
            //add user to users list

            users.Add( id, user );
                                    
            //display a notification message to all users 

            chat.Add( this.MakeServerMessage(string.Format(
                      joinedfmt, user ) ));
      }
}

截图和应用程序工作流程

默认页面显示当前聊天会话的基本信息，例如用户数量和聊天日志的大小。为了让用户加入聊天室，必须提供用户名。

当单击“登录”按钮时，将执行以下函数

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.. screen

      showLoadScreen();
      //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 message

function 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 first

      chatbox = getElement( "mytext" );
      chat = chatbox.value;
      chatbox.value = "";
      
      //get user GUID from url

      userid = location.search.substring( 1, location.search.length );
      
      //construct Ajax Server URL

      url = 'Server.aspx?action=PostMsg&u=' + userid + '&t=' +
             encodeURIComponent(chat) + '&session=' + rnd;
      
      //Create and set the instance 

      //of appropriate XMLHTTP Request      object

      req = getAjax();
      
      //Update page with new message

      req.onreadystatechange = function(){
      
            if( req.readyState == 4 && req.status == 200 ) {
                  updateAll();
            }
      }
      
      req.open( 'GET', url, true );
      req.send( null );
}

仅此而已。没有什么太花哨的。下载示例应用程序并通读代码。代码已正确注释。

结论

使用 Java Applet 构建聊天室需要在用户的 PC 上安装 JVM。使用 ActiveX 控件存在安全问题。随着 AJAX 的出现，您可以构建一个基于 HTTP 的聊天室，它不需要用户下载或安装软件。它也很容易创建和维护。