在一些网站应用中，常常需要模块的设计，例如网站的客户服务。聊天模块的设计往往不需要使用到数据库，因为是一种即时的行为，当用户离开页面时，可能无需进行用户信息的保存。 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
648
图27-2 聊天操作流程图
在用户进入聊天室之前，首先需要初始化聊天室信息，例如已经在此页面的用户数量和用户的遍历。当用户离开聊天室时，需要刷新聊天室信息，因为一个用户离开了聊天室，那么聊天室信息中的用户数量和用户名称都已经被改变。无论聊天室中用户数量是增加还是减少，都需要进行数据的刷新。
27.3 界面设计
聊天室是用户与用户之间信息沟通的页面，聊天室的界面设计能够加强用户的粘度以便用户的再次回访。提高用户体验能够让用户在聊天应用中感觉到舒适，从而提高网站的口碑让更多的用户参与到中。
27.3.1 登陆界面设计
用户能够在登陆界面进行登陆和聊天室的选择，在登陆操作和聊天室选择中可以使用ASP.NET 3.5 AJAX 进行无刷新验证，登陆界面设计核心代码见光盘中源代码\第27章\27-1\27-1\login.aspx 。
其中，代码使用了TextBox 控件用于用户的昵称编写，用户必须填写昵称进行聊天，昵称是用户的一
个标识，当用户进入聊天页面进行聊天时昵称就能够显示相应的用户信息，以便聊天中用户身份的区别。上述代码还使用RadioButtonList 控件进行聊天室的选择，用户在填写昵称后需要选择相应的聊天室进行聊天。如果用户不选择聊天室同样不能够进行聊天，只有选择了相应的聊天室才能够聊天，例如用户可以选择“谈天说地”聊天室进行聊天，在该聊天室中的所有用户都是基于“谈天说地”这个话题进行聊天的。上述代码使用了AJAX 进行无刷新效果实现，其布局如图27-3所示。
美国经济简介649
图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
//控制登陆框样式 {
margin:50px auto;
width:520px;
background:white;
border:1px solid #ccc;
}
.top //控制头部样式
{
margin:0px auto;
width:500px;
padding:10px 10px 10px 10px;
background:white url(images/bg.png) repeat-x;
}
.center //控制登陆样式
650 {
margin:0px auto;
width:500px;
padding:10px 10px 10px 10px; }
.
end
//控制底部样式
{
margin:0px auto;
width:500px;
padding:10px 10px 10px 10px;
元钢} 上述CSS 分别为登陆页面进行了样式控制，其中定义了全局样式并定义了页面的字体大小，定义了全局样式后为其他的DIV 层定义了样式，包括外对齐、宽度和内对齐等。在CSS 文件中使用了图片让页面看上去更加友好，良好的背景图片和导航的图片的应用能够提升网站的设计效果，CSS 样式控制后的页面效果如图27-4所示。
图27-4 布局后的效果
通过CSS 进行样式布局后的页面效果明显好很多，当用户访问该页面时会感觉到页面设计的友好度，提高了用户体验，增强了网站对用户的粘度和可信度。
27.3.3 聊天室显示界面
聊天室主窗口包含一些常用的窗口，这些窗口用于呈现相应的文本，包括用户的聊天发布窗口和用户的对话窗口。在聊天室面板中还包含用户列表，这些列表能够为用户提供私聊服务，聊天室显示界面核心代码见光盘中源代码\第27章\27-1\27-1\room.aspx 。
在页面中的上部分代码实现的是聊窗口，当用户不指定私聊对象时，其发布的聊天信息将会呈现在聊窗口。如果用户希望与某个用户进行私聊，就需要使用私聊窗口，示例代码见光盘中源代码\第27章\27-1\27-1\room.aspx 中私聊窗口所示。
聊天窗口中为了防止页面的重复刷新，可以使用AJAX 控件实现无刷新功能。为了能够让页面在指定的时间内进行局部刷新，就需要使用Timer 控件进行实现，示例代码如下所示。
<asp:Timer ID="Timer1" runat="server" Interval="10000" ontick="Timer1_Tick">
</asp:Timer>
上述代码实现了聊天页面中的主窗口，其中主窗口包括聊窗口、私聊窗口、发言窗口和发言人窗口，当用户单击其中的按钮控件进行聊天时，会根据其中的发言窗口和发言人窗口在聊窗口和私聊窗
中显示相应的数据，如图27-5所示。
第六届cctv电视节目主持人大赛图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
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议