用Asp.Net创建基于Ajax的聊天室程序

简介:
原作者Dahan Abdo
译自CodeProject 

如要下载源代码,请到我的网站,地址: http://www.vczx.com/article/show.php?id=1796

简 介

  我的第一个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中。 

None.gif Hashtable users;
None.gifStringCollection chat;

  在Global.asax.cs 中声明一个全局的ChatEngine的实例,为chat room中所有users共用: 

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

  还有一个JavaScript timer函数用来同步全局变量和页面信息。 


None.gif function setTimers()
ExpandedBlockStart.gif
{
InBlock.gif  timeID 
= window.setTimeout( "updateAll()", refreshRate );
ExpandedBlockEnd.gif}

每一个user都由一个username和一个GUID来唯一标识。 

None.gif public   void  AddUser( string  id,  string  user)
ExpandedBlockStart.gif
{
InBlock.gif      
//make sure user name does not exist already
InBlock.gif
      if!UserExists( user ) )
ExpandedSubBlockStart.gif      
{
InBlock.gif            
//add user to users list
InBlock.gif
            users.Add( id, user );
InBlock.gif                                    
InBlock.gif            
//display a notification message to all users 
InBlock.gif
            chat.Add( this.MakeServerMessage(string.Format(
InBlock.gif                      joinedfmt, user ) ));
ExpandedSubBlockEnd.gif      }

ExpandedBlockEnd.gif}

None.gif

程序运行界面
 


  开始页面显示一些有关当前session的基本信息,比如user number、聊天记录的大小等。用户必须提供用户名才能进入聊天室。点击Login button进入下面的函数: 

None.gif protected   void  Login(  object  sender, EventArgs e )
ExpandedBlockStart.gif
{
InBlock.gif      
string user = txtUsername.Text;
InBlock.gif
InBlock.gif      
if!ValidateNick( user ) ) return;
InBlock.gif
InBlock.gif      
if( Global.Engine.UserExists( user ) )
ExpandedSubBlockStart.gif      
{
InBlock.gif            lblErrorMsg.Text 
= "A user with this " + 
InBlock.gif                 
"name already exists, try again.";
InBlock.gif            
return;
ExpandedSubBlockEnd.gif      }

InBlock.gif      Response.Redirect( 
"Server.aspx?action=Login&u=" + user );
ExpandedBlockEnd.gif}

  经过一些简单验证后,通过AddUser函数将用户加到user lists,然后就进入了聊天室页面chat.aspx,这时下面的JavaScript函数就会被执行:
 


None.gif < script type = " text/javascript " >
None.gif      sniffBrowserType();
None.gif      
// Shows loading.. screen
None.gif
      showLoadScreen();
None.gif      
// Set the javascript timer and 
None.gif      
// loads user list and messages 
None.gif
      setTimers();
None.gif      setFocus(
' mytext ' );
None.gif
</ script >

  当用户键入一些信息并回车时,就会调用下面的函数: 

None.gif < input type = " text "   class = " mytext "  
None.gif       id
= " mytext "  onkeydown = " captureReturn(event) " >
None.gif
None.gif
//  Capture the enter key on the input box and post message
None.gif
function captureReturn(  event  )
ExpandedBlockStart.gif
{
InBlock.gif      
if(event.which || event.keyCode)
ExpandedSubBlockStart.gif      
{
InBlock.gif            
if ((event.which == 13|| (event.keyCode == 13)) 
ExpandedSubBlockStart.gif            
{
InBlock.gif                  postText();
InBlock.gif                  
return false;
ExpandedSubBlockEnd.gif            }

ExpandedSubBlockStart.gif            
else {
InBlock.gif                  
return true;
ExpandedSubBlockEnd.gif            }

ExpandedSubBlockEnd.gif      }
     
ExpandedBlockEnd.gif}

None.giffunction postText()
ExpandedBlockStart.gif
{
InBlock.gif      rnd
++;
InBlock.gif      
//Clear text box first
InBlock.gif
      chatbox = getElement( "mytext" );
InBlock.gif      chat 
= chatbox.value;
InBlock.gif      chatbox.value 
= "";
InBlock.gif      
InBlock.gif      
//get user GUID from url
InBlock.gif
      userid = location.search.substring( 1, location.search.length );
InBlock.gif      
InBlock.gif      
//construct Ajax Server URL
InBlock.gif
      url = 'Server.aspx?action=PostMsg&u=' + userid + '&t=' +
InBlock.gif             encodeURIComponent(chat) 
+ '&session=' + rnd;
InBlock.gif      
InBlock.gif      
//Create and set the instance 
InBlock.gif      
//of appropriate XMLHTTP Request      object
InBlock.gif
      req = getAjax();
InBlock.gif      
InBlock.gif      
//Update page with new message
ExpandedSubBlockStart.gif
      req.onreadystatechange = function(){
InBlock.gif      
ExpandedSubBlockStart.gif            
if( req.readyState == 4 && req.status == 200 ) {
InBlock.gif                  updateAll();
ExpandedSubBlockEnd.gif            }

ExpandedSubBlockEnd.gif      }

InBlock.gif      
InBlock.gif      req.open( 
'GET', url, true );
InBlock.gif      req.send( 
null );
ExpandedBlockEnd.gif}

  就这么多,没什么特别的,你可以看源代码,里面有很多注释信息。

结 论

  要用Java Applet建一个chat room需要在用户的机器上安装JVM。用ActiveX control存在一些安全问题。而用刚才介绍的AJAX,你却可以轻而易举的创建一个基于HTTP并不需要用户安装任何软件就可以运行的聊天室程序,并且很容易维护。





   本文转自loose_went博客园博客,原文链接:http://www.cnblogs.com/michaelxu/archive/2006/12/19/596872.html,如需转载请自行联系原作者



相关文章
|
3月前
|
SQL 开发框架 缓存
分享88个ASP聊天室,总有一款适合您
分享88个ASP聊天室,总有一款适合您
25 0
|
1月前
|
XML 开发框架 .NET
C# .NET面试系列八:ADO.NET、XML、HTTP、AJAX、WebService
## 第二部分:ADO.NET、XML、HTTP、AJAX、WebService #### 1. .NET 和 C# 有什么区别? .NET(通用语言运行时): ```c# 定义:.NET 是一个软件开发框架,提供了一个通用的运行时环境,用于在不同的编程语言中执行代码。 作用:它为多语言支持提供了一个统一的平台,允许不同的语言共享类库和其他资源。.NET 包括 Common Language Runtime (CLR)、基础类库(BCL)和其他工具。 ``` C#(C Sharp): ```c# 定义: C# 是一种由微软设计的面向对象的编程语言,专门为.NET 平台开发而创建。 作
174 2
|
3月前
|
开发框架 前端开发 小程序
分享46个ASP.NET博客程序源码,总有一款适合您
分享46个ASP.NET博客程序源码,总有一款适合您
24 0
|
4月前
|
存储 开发框架 .NET
Asp.Net第一章入门之后台处理程序
Asp.Net第一章入门之后台处理程序
30 0
|
5月前
|
开发框架 前端开发 .NET
用ajax和asp.net实现智能搜索功能
用ajax和asp.net实现智能搜索功能
43 0
|
6月前
|
开发框架 .NET Windows
windows 本地443端口被占用,ASP.NET Core程序拒绝访问
windows 本地443端口被占用,ASP.NET Core程序拒绝访问背景:本地的ASP.NET Core程序在配置了HTTPS并且监听443端口,通过https访问被拒绝,提示没有权限,输入swagger路径访问swagger也提示未找到相关页面。解决:一般情况下,访问我们的ASP.NET Core 程序的swagger页面并不需要什么权限,而且本地调试运行swagger文档也没有什...
58 1
|
9月前
|
前端开发
解决.NET Core Ajax请求后台传送参数过大请求失败问题
解决.NET Core Ajax请求后台传送参数过大请求失败问题
|
10月前
|
开发框架 前端开发 JavaScript
【Asp.net】 Ajax小例子
【Asp.net】 Ajax小例子
69 0
|
开发框架 前端开发 JavaScript
ASP.Net Core中使用jquery-ajax-unobtrusive替换Ajax.BeginForm
ASP.Net Core中使用jquery-ajax-unobtrusive替换Ajax.BeginForm
154 0
|
前端开发 JavaScript
JS案例:Ajax实现简单局域网聊天室
JS案例:Ajax实现简单局域网聊天室
192 0

相关实验场景

更多