《ASP动态网页编程与上机指导》第10章：创建聊天室

1、第10章 创建聊天室,教学提示： 语音聊天和视频聊天都是建立在文字聊天的基础上，本章主要介绍如何创建基于文本的在线聊天室。,第10章 创建聊天室,教学目标： 了解Ajax在ASP中的应用以及如何创建基于文本的在线聊天室系统。,第10章 创建聊天室,10.1 系统总体设计 10.2 用 户 登 录 10.3 使用Ajax 10.4 聊天主页面 10.5 后 台 管 理,10.1 系统总体设计,10.1.1 系统功能 10.1.2 数据库结构设计 10.1.3 系统配置文件 10.1.4 系统的文件组织,返回,10.1.1 系统功能,在本章所创建的聊天室系统中，其主要功能设计如下： 用户登录和注册

2、。 在线用户列表。 获取聊天信息。 聊天主页面的设置 。 发布公告。 用户管理。 限制用户。,返回,系统采用SQL Server 2000作为数据库，数据库名为LTS。在数据库中，需要创建以下7个数据表。 Admin表：用于存储系统管理员的基本信息。 UserInfo表：用于存储注册用户的基本信息。 LTInfo表：用于存储用户的聊天信息。 LimitInfo表：用于存储聊天用户的限制信息。 Param_BQ表：用于存储聊天过程中可选表情的参数信息。 Param_Color表：用于存储聊天过程中字体可选颜色的参数信息。 Param_Face表：用于存储用户信息中可选头像的参数信息。,10.1.

3、2 数据库结构设计,返回,10.1.3 系统配置文件,本系统的一些基本的配置文件 ：,返回,1. 全局配置文件 2. 数据库连接文件 3. CSS文件,10.1.4 系统的文件组织,本系统中的主要页面文件及其相应的文件功能（部分）：,返回,10.2 用 户 登 录,在本系统的设计中，是不允许用户以游客的身份进入的。用户必须拥有自己的账号(即用户名和密码)，并经过登录后进入聊天室才可正常聊天。 在登录界面中，通过选择不同的用户身份，并输入正确的用户名和密码，即可进入不同的操作界面。对于一般用户来说，成功登录后将直接进入聊天室的主界面；而对于管理员来说，在成功登录后将进入后台管理的主界面。,返回,

4、10.3 使用Ajax,定时刷新信息的显示，是聊天室的一个主要特色。其中，所需刷新显示的信息主要包括在线用户列表和聊天信息。在本例中，将使用目前非常流行的Ajax来实现聊天信息的无刷新显示。,返回,10.3.1 关于Ajax 10.3.2 XmlHttpRequest对象的属性和方法 10.3.3 Ajax的简单示例,10.3.1 关于Ajax,Ajax，又称为异步JavaScript与XML，它是Asynchronous JavaScript+XML的缩写。Ajax并不是一种单独的技术，它实际上是多种技术的结合，其中包括CSS、XHTML、JavaScript、XML以及XSLT(可扩展样式

5、语言转换)等。,返回,10.3.2 XmlHttpRequest对象的属性和方法,XmlHttpRequest对象所提供的属性:onreadystatechange 、readyState 、responseText 、responseXML 、status 、statusText 除了以上属性，XmlHttpRequest对象还提供了各种方法用于初始化和处理HTTP请求，它们分别是Abort方法、Open方法、Send方法、setRequestHeader方法、getResponseHeader方法和getAllResponseHeaders方法。,返回,10.3.3 Ajax的简单示例,简

6、单的应用示例 ： 首先，创建一个用于发送HTTP请求的ASP页面，它也是调用XmlHttpRequest对象的页面，页面的文件名为Ex_Ajax.asp ； 然后，创建一个接受请求并进行处理的ASP页面，其文件名为Ex_Ajax1.asp 。,返回,10.4 聊天主页面,一般用户在登录成功后，将直接进入聊天的主页面，这也是聊天室系统中最为关键和主要的功能页面。,返回,10.4.1 页面布局 10.4.2 在线用户列表 10.4.3 获取聊天信息 10.4.4 发送聊天信息 10.4.5 检测用户的发言权 10.4.6 关于分屏和滚屏 10.4.7 关于清屏 10.4.8 关于退出,10.4.1

7、 页面布局,返回,整个聊天页面可分为5大块，左上部分为当前用户的个人信息(包括用户名、上次登录时间和本次登录时间)，左下部分为在线用户列表，右上部分为公聊信息的显示区域，右中部分为私聊信息的显示区域，右下部分则为聊天信息的发送区域。,10.4.2 在线用户列表,在线用户列表的显示是通过页面UserList.asp来完成的。在该页面中所需实现的功能包括以下几点： (1) 显示所有的在线用户列表，并实现页面的定时刷新。 (2) 控制聊天主页面中在线人数的显示。 (3) 当单击其中的某个在线用户时，使该用户处于选中状态，设置其背景色和字体颜色，使其突出显示，同时所单击的用户名应显示在发送聊天信息框架

8、中的聊友下拉列表框中，以便向该用户发送聊天信息，达到私聊的目的。,返回,10.4.3 获取聊天信息,聊天信息的获取是由Ajax来实现的。由于在定义页面的标记时，设置了onLoad事件(即页面加载时所执行的事件)为JavaScript函数init()，因此一切操作均从此函数开始。,返回,10.4.4 发送聊天信息,发送聊天信息的功能是由页面Send.asp来完成的。 用户在输入聊天信息后，并不能即刻提交数据，还需对用户发言的合法性进行检测。只有当用户有权发言时，表单数据才会被提交至服务器。检测工作与提交工作均由JavaScript函数aa()来完成，其中对用户的检测使用了Ajax来实现。,返回,

9、10.4.5 检测用户的发言权,对用户发言权的检测是由页面ChkUser.asp来完成的。 一般来说，有两种情况会导致用户无法正常发言。一种情况是，当前用户账号已被管理员封号。 另一种情况则是已被管理员设置为在指定的时间内不能发言，且该限制时间尚未到期。,返回,10.4.6 关于分屏和滚屏,分屏，是指聊天信息分公聊和私聊两个区域显示。如果取消分屏，则表示所有信息均显示在公聊区域，而私聊区域将被隐藏。滚屏，是指当聊天信息不断增多时，显示区域的滚动条是否自动滚动到最后，以便显示最新的聊天信息。如果取消滚屏，则显示区域的滚动条不会自动滚动，用户需要手动拖动。默认情况下，分屏功能和滚屏功能均是开启的。

10、,返回,10.4.7 关于清屏,在聊天主页面中，提供了两种类型的清屏操作：清屏(公聊)和清屏(私聊) 。 清屏(公聊)是指清除前面所显示的所有公聊信息；清屏(私聊)是指清除前面所显示的私聊信息。单击相应的标签，即可执行相应的功能。,返回,10.4.8 关于退出,当用户登录后，该用户在用户信息表UserInfo中对应的在线标志OnLineTag为1。在用户退出时，设置其相应的在线标志OnLineTag为0，否则该用户仍被标识为在线。判断用户的退出有下面方法： 一种常用的方法是通过Session变量的过期来判断。 一种更好的办法是，当用户关闭聊天页面时，就意味着用户离开了聊天室，此时即可执行相应的

11、数据库操作。而对当前聊天页面的关闭操作的判断，可通过页面的onUnLoad事件来实现。,返回,10.5 后 台 管 理,在后台管理中，提供了3项功能：发布公告、用户管理和限制用户。当用户以管理员的身份登录后，将默认地进入发布公告的功能页面。,返回,10.5.1 发布公告 10.5.2 用户管理 10.5.3 限制用户,10.5.1 发布公告,返回,管理员可发布两种类型的公告，一种是全体公告，即面向所有在线的用户；另一种则是针对某些用户单独发送的公告，这种公告是以悄悄话的形式发送的。全体公告将显示在公聊信息中，所有在线人员均可看到；而单独发送的公告将显示将在私聊信息中，只有指定的人员才能看到。,10.5.2 用户管理,返回,用户管理的后台功能，可执行的操作包括封号/解封、限制和删除等操作。其中，封号和解封是相对的。