制作一个简单的社区聊天室

聊天室拉近了人与人之间的距离,是人与人之间交流的互动平台。自推出以来,一直倍受网民的青睐。本程序中,用户通过输入昵称就可以进入聊天室与其他网友进行互动。用户登录聊天室的界面如图1所示。

1  用户登录

输入昵称后,进入聊天页面。在页面的下方文本框中可以输入聊天信息,并可以选择“名称符号”、“名称颜色”、“字体颜色”,然后单击“发送(Alt+S)”按钮发送留言,这时在上方的显示区域就可以看到发布的信息。如图2所示。

2  输入信息并发送

 说明:

运行本程序,必须将程序所在文件夹设置为网站的根目录。

在测试时,可以通过IIS管理器重新启动网站,来清除保存在Application对象中的数据。

关键技术

本程序主要应用Application对象来保存用户昵称、聊天信息,使用了基于Ajax技术的开发环境,并在网页中嵌入了iframe浮动框架。

1Application对象

Application对象用于共享应用程序级信息。即多个用户共享一个Application对象。在应用程序关闭之前,Application对象将一直存在。

例如,在Global.asax文件中初始化Application变量,代码如下:

void Application_Start(object sender, EventArgs e)

{

    // 在应用程序启动时运行的代码

    Application["count"] = 0;

    Application["UserName"] = "所有人";

    Application["Msg"] = "";

}

2Ajax开发环境中的控件

l         ScriptManager控件

ScriptManager控件用来处理页面上的所有AJAX组件以及页面局部更新,生成相关的客户端代理脚本以便能够在JavaScript中访问Web Service,所有需要支持ASP.NET AJAXASP.NET页面上有且只能有一个ScriptManager控件。

 说明:

设置ScriptManager控件的EnablePartialRendering属性为True时,表示仅对UpdatePanel控件区域范围内的部分刷新。如果设置为False,对整个页面刷新。

l         UpdatePanel控件

UpdatePanel控件主要用于规划和配置更新区域。也就是说,将需要更新的内容放置在该控件内。

l         Timer控件

Timer控件是一个定时器控件。可以设定以特定时间规律触发。使用该控件可以设置更新的时间间隔,在该控件的Tick事件中编写自动触发的内容。

例如,在内容页MsgContent.aspx中添加ScriptManager控件、UpdatePanel控件、Timer控件,以刷新聊天内容。代码如下:

<div>

        <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

   

</div>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

        <ContentTemplate>

            <table width="100%">

                <tr>

                    <td colspan="3">

                        &nbsp;<asp:Label ID="lblMsg" runat="server" Text="加载聊天信息中........." BackColor="White" BorderColor="#400040" BorderWidth="1px" Width="99%" CssClass="bgg"></asp:Label><br />

                            &nbsp; &nbsp;&nbsp;

                            <asp:Label ID="lblcount" runat="server" Font-Bold="True" Font-Size="12px" ForeColor="Blue"

                                Text="正在统计在线人数......."></asp:Label>&nbsp;<strong> </strong>

                     </td>

                 </tr>

             </table>

             <asp:Timer ID="Timer1" runat="server" Interval="2000" OnTick="Timer1_Tick">

             </asp:Timer>

         </ContentTemplate>

     </asp:UpdatePanel>

在后台页MsgContent.aspx.cs中编写Timer1_Tick事件,代码如下:

protected void Timer1_Tick(object sender, EventArgs e)

{

    try

    {

        //获取聊天信息

        lblMsg.Text = Application["Msg"].ToString();

        //统计在线人数

        lblcount.Text = "聊天室在线人数: " + Application["count"].ToString() + "人  郑重声明:禁止发送一些不健康话题,否则后果自负!";

    }

    catch (Exception ex)

    {

        throw new Exception(ex.Message, ex);

    }

}

3iframe浮动框架

聊天室信息页面的结构设计主要通过Iframe框架实现的。浮动框架<IFRAME>是一种特殊的框架结构,它是在浏览的窗口中嵌套另外的网页文件。

例如,在Default.aspx页面中应用iframe浮动框架来嵌入内容页MsgContent.aspx。代码如下:

<table width="100%" cellpadding="0" cellspacing="0">

     <tr>

         <td colspan="2" style="width: 700px">

             <iframe id="msgFrame" width="100%" style="height: 440px; visibility: inherit; z-index: 1;

border-style: groove" src="MsgContent.aspx" scrolling="no" bordercolor="green"

               frameborder="0"></iframe>

       </td>

       <td style="vertical-align: top; width: 103px" bgcolor="#d9d6e1">

           <asp:ScriptManager ID="ScriptManager1" runat="server">

           </asp:ScriptManager>

           <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">

           <ContentTemplate>

            <asp:Timer ID="Timer1" runat="server" Interval="5000" OnTick="Timer1_Tick">

                 </asp:Timer>

            <asp:ListBox ID="lsbOnlineUser" runat="server" Height="432px" Width="101px"></asp:ListBox>

                                     </ContentTemplate>

             </asp:UpdatePanel>

         </td>

     </tr>

</table>

实现步骤

下面介绍“制作一个简单的社区聊天室”实例的实现步骤。

1.全局应用程序文件Global.asax

1)创建一个网站,首页默认名为Default.aspx

2)在网站中添加新项,为全局应用程序类,名称为Global.asax

3)在该文件的Application_Start事件中,初始化Application变量,代码如下:

void Application_Start(object sender, EventArgs e)

{

    // 在应用程序启动时运行的代码

    Application["count"] = 0;//统计在线人数

    Application["UserName"] = "所有人";//记录在线用户的昵称

    Application["Msg"] = "";//记录聊天信息

}

Session_Start事件中,使Application["count"]变量值累计1,表示在线人数增加了1。代码如下:

void Session_Start(object sender, EventArgs e)

{

    // 在新会话启动时运行的代码

    Application.Lock();

    Application["count"] = int.Parse(Application["count"].ToString()) + 1;

    Application.UnLock();

}

Session_End事件中,首先使Application["count"]值减1(说明用户离线),再从Application["UserName"]变量中去除该离线用户的昵称,并在聊天信息中标记“XX用户离开了聊天室”。代码如下:

void Session_End(object sender, EventArgs e)

{     

     Application.Lock();

     //在线人数减1

     Application["count"] = int.Parse(Application["count"].ToString()) - 1;

     //Application["UserName"]变量中去除离线用户的昵称

     char[] c = { ',' };

     string[] un = Application["UserName"].ToString().Split(c);

     string un_new = string.Empty;

     for (int i = 0; i < un.Length; i++)

     {

         if (Session["UserName"] != un[i])

         {

             un_new += un[i];

         }

     }

     Application.Set("UserName",un_new);

     //将离开状态写入聊天信息

     Application.Set("Msg", "" + Application["Msg"] + "<br><font color='#666666' size=2>" + Session["UserName"].ToString() + " 离开了聊天室></</font>");

     Application.UnLock();

}

2.用户登录页Logon.aspx

在用户登录页面输入昵称,就可以直接进入聊天室。如果输入的昵称与在线用户的昵称重复,就需要重新输入。

聊天室用户登录页中涉及主要控件及控件用途如表1所示。

1                   聊天室登录页中主要控件及用途

控件

ID属性

主要属性

用途

TextBox

txtUser

默认

输入用户昵称

ImageButton

imgBtnLogon

ImageUrl属性值为images/dl_06.jpg

进入聊天室

imgBtnLogon按钮的Click事件中,首先将输入的昵称与Application["UserName"]变量中保存的在线用户昵称进行对比,如果有重复的则提示用户重新输入。否则,记录用户昵称,并在聊天信息中标识该用户进入了聊天室。代码如下:

protected void imgBtnLogon_Click(object sender, ImageClickEventArgs e)

{

   bool flag = false;

   string uname = txtUser.Text.Trim();//用户输入的昵称

   char[] c = {','};

   string[] un = Application["UserName"].ToString().Split(c);//以逗号分隔字符串,提取在线用户昵称

   for (int i = 0; i < un.Length; i++)//遍历一维数组

   {

       //将用户输入的昵称与在线用户昵称进行比较

       if (uname == un[i])

       {

           Response.Write("<script language='javascript' type='text/javascript'>alert('昵称重复!')</script>");

           flag = true;

       }

   }

   //用户输入的昵称可以使用

   if (!flag)

   {

       Application.Lock();

       //存储登录信息,并且进入聊天室,

       Session["UserName"] = txtUser.Text.Trim();

       Application["UserName"] += "," + txtUser.Text.Trim();

       Application.Set("Msg", "" + Application["Msg"] + "<br><font color='#666666' size=2>欢迎" + Session["UserName"].ToString() + " 进入聊天室></</font>");

       Response.Redirect("Default.aspx");

       Application.UnLock();

    }

}

3.聊天室主页Default.aspx

在聊天室页面中可以实时获取在线用户列表(页面右侧部分);可以设置用户名称的字体颜色及发送聊天信息的字体颜色;可以使用快捷键[Alt + S ]发送聊天信息;可以提示用户进入或离开聊天室的状态。在显示聊天信息区域中,当信息满屏时,信息将自动滚屏显示聊天信息。

聊天室页中涉及主要控件及控件用途如表2所示。

2                            聊天室页中主要控件及用途

控件

ID属性

主要属性

用途

AJAX/ ScriptManager

ScriptManager1

默认

管理AJAX控件

AJAX/UpdatePanel

UpdatePanel1

UpdateMode属性值为Conditional

局部更新发送聊天信息

DropDownList

ddlSign

设置Items属性为控件添加项列表

用于选择用户名称显示符号

DropDownList

ddlSign

设置Items属性为控件添加项列表

用于设置用户名称字体颜色

DropDownList

ddlContent

设置Items属性为控件添加项列表

用于设置聊天信息字体颜色

TextBox

txtMsg

默认

输入发送的聊天信息

Button

btnSendMsg

Text属性值为“发送 (Alt + S)

执行发送聊天信息命令

AJAX/UpdatePanel

UpdatePanel2

UpdateMode属性值为Conditional

局部更新在线用户

AJAX/Timer1

Timer1

Interval属性值为5000

每隔5秒获取在线用户

ListBox

lsbOnlineUser

默认

显示在线用户

 注意:

聊天室页面使用了局部更新的AJAX技术,那么在页面上添加控件时需要将控件IDddlSignddlSignddlContenttxtMsgbtnSendMsg放置在UpdatePanel1控件中。将控件IDTimer1lsbOnlineUser放置在UpdatePanel2控件中。

 说明:

Default.aspx.cs页面中需要引入System.Collections命名空间

Default.aspx页面的Page_Load事件下,用于实现检查用户是否已经登录,如果用于未登录,则进入到登录页面进行登录。实现代码如下:

protected void Page_Load(object sender, EventArgs e)

{

    //防止非法用户直接进入聊天室,如果非法登录,则页面连接定向到登录页

    if (Session["UserName"] == null)

        Response.Redirect("Logon.aspx");

    //聊天信息输入文本框,获得焦点

    txtMsg.Focus();

}

聊天用户单击“发送”按钮,或按[Alt + S]快捷键,则发送聊天信息,聊天信息主要存储在Application对象中。实现代码如下:

protected void Button1_Click(object sender, EventArgs e)

{

    //发送聊天信息

    Application.Set("Msg", Application["Msg"] + "<br> <font color=" + ddlName.Text + " size='2px'> " + ddlSign.Text + Session["UserName"].ToString() + ddlSign.Text + " 说:</font> <font color=" + ddlContent.Text + " size='2px'> " + txtMsg.Text + " </font><font size='2px'>" + DateTime.Now.ToString() + "</font>");

    //清空聊天信息输入文本框

    txtMsg.Text = "";

}

AJAX中的Timer控件的Tick事件下,主要完成每过5秒中获取聊天室当前在线用户,并显示在ListBox中。实现代码如下:

protected void Timer1_Tick(object sender, EventArgs e)

{

    ArrayList arr = new ArrayList();

    char[] c = { ',' };

    string[] un = Application["UserName"].ToString().Split(c);//以逗号分隔字符串,提取在线用户昵称

    for (int i = 0; i < un.Length; i++)

    {

        arr.Add(new ListItem(un[i],un[i]));

    }

    lsbOnlineUser.DataSource = arr;//ListBox控件设置数据源

    lsbOnlineUser.DataBind();

}

4.内容页MsgContent.aspx

显示聊天信息内容页是嵌入在聊天室中用于显示聊天信息内容和聊天用户的当前状态的。该页显示的所有信息都是从Application对象中获取。

聊天信息内容页中涉及主要控件及控件用途如表3所示。

3                    聊天信息内容页中主要控件及用途

控件

ID属性

主要属性

用途

AJAX/ ScriptManager

ScriptManager1

默认

管理AJAX控件

AJAX/UpdatePanel

UpdatePanel1

默认

局部更新聊天信息

AJAX/Timer1

Timer1

Interval属性值为2000

每隔2秒更新聊天信息

Label

lblMsg

默认

显示所有聊天信息

Label

lblcount

默认

显示当前用户在线个数

聊天信息内容页主要实时显示聊天室的所有聊天信息,在此使用AJAXTimer控件的Tick事件下,每隔2秒就获取最新的聊天信息,并且显示统计的在线人数。实现代码如下:

protected void Timer1_Tick(object sender, EventArgs e)

{

    try

    {

        //获取聊天信息

        lblMsg.Text = Application["Msg"].ToString();

        //统计在线人数

        lblcount.Text = "聊天室在线人数: " + Application["count"].ToString() + "人  郑重声明:禁止发送一些不健康话题,否则后果自负!";

        }

        catch (Exception ex)

        {

            throw new Exception(ex.Message, ex);

        }

}