第1页 / 共14页
第2页 / 共14页
第3页 / 共14页
第4页 / 共14页
第5页 / 共14页
第6页 / 共14页
第7页 / 共14页
第8页 / 共14页
ASP.NET 聊天模块设计.pdf
第27章聊天模块设计
27.1学习要点
27.2系统设计
27.2.1模块功能描述
27.2.2模块流程分析
27.3界面设计
27.3.1登陆界面设计
27.3.2登陆界面CSS
27.3.3聊天室显示界面
27.3.4聊天室界面CSS
27.4代码实现
27.4.1登陆代码实现
27.4.2多人聊天代码实现
27.4.3单人聊天代码实现
27.4.4聊天记录保存实现
27.5实例演示
27.6小结
第 27 章 聊天模块设计
在一些网站应用中，常常需要在线聊天模块的设计，例如网站的客户服务。聊天模块的设计往往不
需要使用到数据库，因为在线聊天是一种即时的行为，当用户离开在线聊天页面时，可能无需进行用户
信息的保存。
27.1 学习要点
聊天模块需要涉及到一些 ASP.NET 3.5 的基本知识，如果要仔细学习聊天模块的开发，需要详细了
解本书的一些章节知识，这些章节如下所示：
� Web 窗体基本控件。
� Web 窗体数据控件。
� ASP.NET 内置对象。
� 生成静态的概念
� 自定义控件和用户控件。
� ASP.NET 3.5 与 AJAX
基本了解了以上章节的知识点后，就能够熟练学习和开发此模块。
27.2 系统设计
聊天模块的作用在于能够实现在线同网站的其他人员聊天。聊天不仅可以与网站的其他用户进行聊
天，也可以同网站的客服人员进行聊天。所以聊天模块不仅仅局限于单个用户和单个用户的聊天，可以
是单个用户和单个用户，也可能是单个用户对多个用户。
27.2.1 模块功能描述
聊天模块能够在一定程度上加强用户与用户之间的信息沟通，另外聊天模块也能够加强客户与用户
之间的交互，对用户的信息进行及时的反馈。聊天模块的功能并没有复杂的模块和过多的页面，对于聊
天模块而言，只需要进行页面中的数据处理即可，也无需保存数据。
当用户选择进行在线聊天时，用户需要进行登陆操作，这个登陆操作无需从数据库中进行提取和验
证，这里的用户登陆操作只是给用户一个名称，以便于在页面聊天中方便被识别。当用户登陆完成后就
能够进入主登陆窗口进行聊天操作。用户能够同多个人进行群聊也可以同单个用户进行私聊，当用户进
行群聊时，群聊的信息会发布到相应的群聊文本框中；而当用户进行私聊时，其信息并不会发布到相应
的群聊文本框，而发布到私聊文本框。
对于聊天的用户而言，可以选择是否将聊天记录进行保存，如果将聊天记录进行保存，系统可以将
用户的相应的聊天记录保存为 txt 文档存放在用户的个人电脑中，以保存相应的数据而无需进行数据库
的数据存储。同时，为了能够提高用户体验，对于聊天模块而言可以使用 AJAX 进行无刷新实现，聊天
模块用户流程图如图 27-1 所示。
图 27-1 聊天模块功能描述
正如图 27-1 所示，用户在进行聊天操作之前首先需要进行登陆操作，在进行登陆操作后，系统会
为用户分配一个 Session 对象用户描述用户的基本信息。当用户进行聊天时，其 Session 对象的相应值能
够描述用户信息。
当用户执行完成聊天操作之后，可以选择是否保存数据并继续进行聊天。如果用户选择保存数据，
用户的聊天信息全都保存为 txt 文档存放在本地，如果用户并不希望进行数据保存，可以继续聊天或直
接关闭浏览器。从上述模块功能描述中可以规划成以下几个页面：
� 登陆操作页面：用于用户的登陆操作。
� 选择聊天室：用户选择喜爱的聊天室分类。
� 聊天操作页面：用于用户的聊天操作，可以进行单人聊天或多人聊天。
其中登陆操作主要是用于用户的登陆和 Session 对象的分配，而聊天操作页面就是一个在线聊天的
主页面。聊天模块中并没有涉及到数据库的存储，而更多的是编程的技巧，聊天模块没有数据读取也就
不存在数据库设计和性能了。
27.2.2 模块流程分析
聊天模块并不是网站应用中非常重要的模块，但是在很多业务情况下聊天模块也是非常必要的模
块。特别是在用户咨询等情况下作为网站的客户服务就非常需要及时的信息获取和反馈，聊天模块能够
非常好的完成这项任务。
在聊天模块的开发过程中，聊天模块并不涉及到数据的存储和读取，所以聊天模块属于即时模块，
也就是说当用户关闭了浏览器之后除非用户保存聊天记录到文件中，否则用户的大部分信息全部都会丢
失。当用户需要进行数据的存储或管理，可以选择保存聊天记录以保存操作的数据，操作数据将以 txt
文本文档的形式存储在用户的个人电脑中。从以上的流程分析中可以归纳出大部分用户在聊天模块中执
行的操作的顺序，在流程分析中可以归纳如下：
� 用户登陆：用户登陆并进行信息初始化。
� 访问聊天页面：用户访问相应的聊天页面进行聊天操作。
� 页面初始化：聊天页面能够初始化用户信息，包括有多少个用户在此聊天室。
� 执行聊天操作：用户和一个用户或多个用户进行聊天操作。
� 存储聊天信息：用户可以选择存储聊天信息或直接离开。
� 离开聊天室：离开聊天室后需要刷新聊天室信息。
上述流程如图 27-2 所示。
647
图 27-2 聊天操作流程图
在用户进入聊天室之前，首先需要初始化聊天室信息，例如已经在此页面的用户数量和用户的遍历。
当用户离开聊天室时，需要刷新聊天室信息，因为一个用户离开了聊天室，那么聊天室信息中的用户数
量和用户名称都已经被改变。无论聊天室中用户数量是增加还是减少，都需要进行数据的刷新。
27.3 界面设计
聊天室是用户与用户之间信息沟通的页面，聊天室的界面设计能够加强用户的粘度以便用户的再次
回访。提高用户体验能够让用户在聊天应用中感觉到舒适，从而提高网站的口碑让更多的用户参与到在
线聊天中。
27.3.1 登陆界面设计
用户能够在登陆界面进行登陆和聊天室的选择，在登陆操作和聊天室选择中可以使用 ASP.NET 3.5
AJAX 进行无刷新验证，登陆界面设计核心代码见光盘中源代码\第 27 章\27-1\27-1\login.aspx。
其中，代码使用了 TextBox 控件用于用户的昵称编写，用户必须填写昵称进行聊天，昵称是用户的
一个标识，当用户进入聊天页面进行聊天时昵称就能够显示相应的用户信息，以便聊天中用户身份的区
别。上述代码还使用 RadioButtonList 控件进行聊天室的选择，用户在填写昵称后需要选择相应的聊天室
进行聊天。如果用户不选择聊天室同样不能够进行聊天，只有选择了相应的聊天室才能够聊天，例如用
户可以选择“谈天说地”聊天室进行聊天，在该聊天室中的所有用户都是基于“谈天说地”这个话题进
行聊天的。上述代码使用了 AJAX 进行无刷新效果实现，其布局如图 27-3 所示。
648
图 27-3 聊天登陆页面基本布局
在页面被初始化时，其中的 RadioButtonList 控件和进入聊天室按钮是不会显示的，当用户填写了昵
称并单击选择聊天室才能够显示 RadioButtonList 控件和进入聊天室按钮。如图 27-3 所示，其登陆页面
的友好度显然不够，可以使用 CSS 进行样式控制让该页面更加友好和丰富。
27.3.2 登陆界面 CSS
如上一节中的登陆界面可以看出登陆界面并不够友好，友好的登陆界面能够让用户喜欢这个网站并
长期进行访问，这样就能够提高网站的访问量和提高用户的粘度。为了让页面的友好度更高可以使 用
CSS 进行样式控制，CSS 代码如下所示。
body
{
font-size:12px;
font-family:Geneva, Arial, Helvetica, sans-serif;
margin:0px 0px 0px 0px;
background:white url(images/background.gif);
}
.all
{
}
.top
{
margin:50px auto;
width:520px;
background:white;
border:1px solid #ccc;
margin:0px auto;
width:500px;
padding:10px 10px 10px 10px;
background:white url(images/bg.png) repeat-x;
}
.center
//控制全局样式
//控制登陆框样式
//控制头部样式
//控制登陆样式
649
{
}
.end
{
margin:0px auto;
width:500px;
padding:10px 10px 10px 10px;
margin:0px auto;
width:500px;
padding:10px 10px 10px 10px;
//控制底部样式
}
上述 CSS 分别为登陆页面进行了样式控制，其中定义了全局样式并定义了页面的字体大小，定义了
全局样式后为其他的 DIV 层定义了样式，包括外对齐、宽度和内对齐等。在 CSS 文件中使用了图片让
页面看上去更加友好，良好的背景图片和导航的图片的应用能够提升网站的设计效果，CSS 样式控制后
的页面效果如图 27-4 所示。
通过 CSS 进行样式布局后的页面效果明显好很多，当用户访问该页面时会感觉到页面设计的友好
度，提高了用户体验，增强了网站对用户的粘度和可信度。
图 27-4 布局后的效果
27.3.3 聊天室显示界面
聊天室主窗口包含一些常用的窗口，这些窗口用于呈现相应的文本，包括用户的聊天发布窗口和用
户的对话窗口。在聊天室面板中还包含用户列表，这些列表能够为用户提供私聊服务，聊天室显示界面
核心代码见光盘中源代码\第 27 章\27-1\27-1\room.aspx。
在页面中的上部分代码实现的是群聊窗口，当用户不指定私聊对象时，其发布的聊天信息将会呈现
在群聊窗口。如果用户希望与某个用户进行私聊，就需要使用私聊窗口，示例代码见光盘中源代码\第
27 章\27-1\27-1\room.aspx 中私聊窗口所示。
聊天窗口中为了防止页面的重复刷新，可以使用 AJAX 控件实现无刷新功能。为了能够让页面在指
定的时间内进行局部刷新，就需要使用 Timer 控件进行实现，示例代码如下所示。
上述代码实现了聊天页面中的主窗口，其中主窗口包括群聊窗口、私聊窗口、发言窗口和发言人窗
口，当用户单击其中的按钮控件进行聊天时，会根据其中的发言窗口和发言人窗口在群聊窗口和私聊窗
650
中显示相应的数据，如图 27-5 所示。
在聊天页面的右侧有一个用户列表，当加载该页面时会初始化页面信息并载入用户列表，当用多个
用户时用户列表就会呈现为多个用户，用户可以单击用户列表与相应的用户进行聊天。
图 27-5 聊天页面窗口
27.3.4 聊天室界面 CSS
同样该聊天室窗口不太人性化也没有任何的用户体验，使用 CSS 能够提高用户体验，不同的页面的
CSS 都可以放置在同一个 CSS 文件中，这些 CSS 文件能够被单个或多个页面使用，减少了冗余代码，
CSS 代码如下所示。
.room
{
margin:10px auto;
width:800px;
background:white;
border:1px solid #ccc;
}
.banner
{
width: 536px;
background:white url(images/bg.png) repeat-x;
}
由于两个页面使用的是同一个 CSS 文件所以很多样式控制可以无需再次编写，只需要对该页面中需
要使用的样式进行样式编写，聊天室界面需要控制其主聊天窗口的长度和宽度，为了提高用户友好度，
也可以使用图片进行样式控制，如图 27-6 所示。
651
图 27-6 布局后的聊天窗口
正如图 27-6 所示，在使用 CSS 进行样式控制后的页面具有更好的友好度，在用户列表区域，当有
多个用户时会呈现多个不同的用户列表。在用户列表中用户可以选择相应的用户并与用户发送私密消
息，当用户发送私密消息时，其消息不会呈现在群聊窗口，而是呈现在私聊窗口。
27.4 代码实现
聊天模块不需要进行数据存储和读取，在聊天模块中，当用户发送一个信息到页面中需要进行聊天
时，在相应的窗口就应该显示用户发布的信息。对于不同的用户而言，不同的用户所看到的页面是不同
的，这里必须使用 Application 对象进行跨页存储。
27.4.1 登陆代码实现
当用户进行页面访问时，页面中的一些控件初始化是无法看见的，只有当用户填写了用户名昵称并
选择了相应的聊天室才能够进行登陆操作，在用户选择聊天室之前，必须填写用户名。用户填写用户名
之后就能够单击【选择聊天室】按钮进入聊天室。示例代码如下所示。
protected void Button1_Click(object sender, EventArgs e)
{
RadioButtonList1.Visible = true;
Button2.Visible = true;
TextBox1.ReadOnly = true;
}
//显示控件
//显示控件
//锁定用户名
当用户填写了用户名之后并单击选择聊天室按钮进入聊天室选择，在选择聊天室时就不能够再修改
用户名，因为一旦用户确定了用户名并进行聊天室选择时就无法再修改自己的用户名。在这里其实也可
652
以让用户能够修改用户名，只是这样做会造成网站应用的不安全。当用户进行聊天室选择后就可以进入
聊天室，进入聊天室按钮代码实现如下所示。
protected void Button2_Click(object sender, EventArgs e)
{
if (RadioButtonList1.SelectedIndex == -1)
{
Label1.Text = "请选择一个聊天室";
//判断单选列表
//提示选择
}
else
{
}
}
Session["roomid"] = RadioButtonList1.SelectedItem.Value;
Session["username"] = TextBox1.Text;
Response.Redirect("room.aspx?id=”+ RadioButtonList1.SelectedItem.Value +”");
//赋予 Session 值
//跳转
上述代码当用户单击选择聊天室按钮后就能够进行聊天室的选择，用户必须选择一个自己感兴趣的
聊天室进行聊天，否则系统会提示“请选择一个聊天室”。如果用户选择了聊天室并进行登陆，系统会
为用户赋予两个 Session 值，这两个 Session 值分别为 roomid 和 username，其中 roomid 为聊天室的 ID
号，而 username 用于存储进行聊天的用户名。当聊天页面被载入时，用户的 Session 对象的 roomid 值会
与传递的参数进行判断，如果是相应的聊天室就允许用户进行聊天，如果不是相应的聊天室则不允许用
户聊天。
27.4.2 多人聊天代码实现
多人聊天相对比较简单，用户可以在页面中直接进行信息输入发布聊天信息。多人聊天时，用户发
布的信息能够被所有人看见，这也就是说用户的信息能够呈现在多人聊天窗口。当多人聊天时，不同的
用户所打开的页面是不相同的，这样就造成可能信息呈现的时间不一致，为了保证信息的一致性，这里
使用了 AJAX 的 Time 控件进行刷新。
在聊天页面加载时，首先需要判断用户是否包含 Session 值或者聊天室是否为用户选择的聊天室，
否则会跳回登陆页面，不仅如此，当页面被初次加载时还需要进行一些初始化工作，示例代码如下所示。
protected void Page_Load(object sender, EventArgs e)
{
if (Session["roomid"] == null || Session["username"] == null)
{
Response.Redirect("login.aspx");
}
if (Request.QueryString["id"] != Session["roomid"].ToString())
{
Response.Redirect("login.aspx");
}
Label1.Text = "";
for(int i=0;i "+(Session[i * 2 + 1] + "
"); 653
"); 653
相关推荐
2023年江西萍乡中考道德与法治真题及答案.doc
2012年重庆南川中考生物真题及答案.doc
2013年江西师范大学地理学综合及文艺理论基础考研真题.doc
2020年四川甘孜小升初语文真题及答案I卷.doc
2020年注册岩土工程师专业基础考试真题及答案.doc
2023-2024学年福建省厦门市九年级上学期数学月考试题及答案.doc
2021-2022学年辽宁省沈阳市大东区九年级上学期语文期末试题及答案.doc
2022-2023学年北京东城区初三第一学期物理期末试卷及答案.doc
2018上半年江西教师资格初中地理学科知识与教学能力真题及答案.doc
2012年河北国家公务员申论考试真题及答案-省级.doc
2020-2021学年江苏省扬州市江都区邵樊片九年级上学期数学第一次质量检测试题及答案.doc
2022下半年黑龙江教师资格证中学综合素质真题及答案.doc
