程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> ASP編程 >> ASP入門教程 >> 如何使用Asp.Net創建基於Ajax的聊天室

如何使用Asp.Net創建基於Ajax的聊天室

編輯:ASP入門教程

我的第一個chat room 是用ASP 3.0寫的。 程序比較簡單,兩個text box, 用來處理頁面上每秒刷新的信息。那時候,要想建一個真正的chat room,要用到Java Applet 或者 ActiveX control。基於HTTP的chart rooms都面臨著一些跟我第一個chat room一樣的問題。這些問題包括頁面刷新導致的屏幕閃爍現象。但這個問題已經被AJax解決了。 AJax是Javascript和 XML異步調用的結合。現在在server端用一些JavaScript代碼就可以實現一個真正的chat room了。這篇文章不會介紹Ajax,並假設你已經對AJax和ASP.Net的運用有一定了解。只是介紹如何用AJax技術來創建一個基本的chat room。

例 程

這是一個多用戶的單一chat room。可以實現基本的聊天功能,還支持一些命令行如: /admin clear 用來清除聊天記錄,/nick [Name] 用來更改用戶昵稱等。程序說明這個程序用一個ChatEngine類來處理所有的聊天信息和用戶信息,用戶信息存儲在一個Hashtable中,聊天信息存儲在StringCollection中。

Hashtable users;
StringCollection chat;
在Global.asax.cs 中聲明一個全局的ChatEngine的實例,為chat room中所有users共用:

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

還有一個JavaScript timer函數用來同步全局變量和頁面信息。


function setTimers()
{
  timeID = window.setTimeout( "updateAll()", refreshRate );
}
每一個user都由一個username和一個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 ) ));
      }
}

程序運行界面


開始頁面顯示一些有關當前session的基本信息,比如user number、聊天記錄的大小等。用戶必須提供用戶名才能進入聊天室。點擊Login button進入下面的函數:

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函數將用戶加到user lists,然後就進入了聊天室頁面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建一個chat room需要在用戶的機器上安裝JVM。用ActiveX control存在一些安全問題。而用剛才介紹的AJax,你卻可以輕而易舉的創建一個基於HTTP並不需要用戶安裝任何軟件就可以運行的聊天室程序,並且很容易維護。


  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved