网页聊天室需求分析.docx
《网页聊天室需求分析.docx》由会员分享，可在线阅读，更多相关《网页聊天室需求分析.docx（14页珍藏版）》请在冰豆网上搜索。
网页聊天室需求分析
聊天室的设计与实现
实验报告
计算机科学与技术学院
2011电子商务
组长：
20110874005张艺婧
成员：
20110874002张博
20110874006徐偏偏
20110874007滕雪娇
20110874011宋丽红
20110874015郑元斌
20110874025杨海磊
一、目的和意义
这是一个具有最简单功能的聊天室。
通过该聊天室，用户可以通过设置不同的用户名和密码以各种不同的身份进入聊天室，用户的类型有两种：
普通用户和管理员。
普通用户可以在聊天室中发送信息，也可以和指定的聊天对象用户私聊。
管理员出了具有普通用户的功能外，还可以对在线用户和所有数据库中的用户进行设置，以便对聊天室进行维护。
管理员可以把在线用户踢出聊天室，还可以删除其他管理员不希望再次进入聊天室的用户。
聊天室又分为三类，用户可以根据自己的需要进入不同的聊天室进行聊天。
系统还应具有自动把在线但是不发言的时间超过系统设置的时间的用户踢出聊天室和的功能，还应具有当有新用户进入聊天室时，实时更新在线用户的功能。
聊天室的特点就是要求能够实时显示出聊天者所谈的内容。
即在同一个聊天室的使用者，可以在短时间内立刻看到其他聊天者的发言。
作为用户喜欢的Web应用程序，出了具有能够实时显示出聊天者所谈论的内容外，还应具有以多种方式发布信息的功能。
JSP正好可以满足聊天室的这种要求，它可以快速地创建和显示Web页面的动态内容。
总的来说，本聊天室主要实现了以下的功能：
●用户输入帐号,密码登录聊天室
●把用户的聊天信息写入数据库
●多人共同聊天
●防止恶意刷屏
●语言过滤功能，避免一些敏感词汇
●显示当前聊天客户列表
●显示聊天室人员变动信息（进入聊天室、离开聊天室等）
●聊天室不断地对数据库进行刷新、读取
二、设计中用到的知识
（一）开发工具的选择
TML代码和嵌入其中的JAVA代码所组成。
服务器在页面被客户端请求以后对这些JAVA代码进行处理，然后将生成的HTML页面返回给客户端的浏览器。
JSP技术使用JAVA编程语言编写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑。
网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。
本实验利用JSP编写基础的网页跳转等代码，利用.css样式表文件规定页面所应用的格式。
（二）硬件、软件、运行环境和开发环境方面的条件和限制
（1）硬件资源
服务器：
小型机
网络设备：
网络交换机、网卡、网线
（2）软件资源
服务器端软件的具体要求:
操作系统：
WindowsXP/Windows7
开发平台：
Eclipse
客户端软件的具体要求：
Web浏览器
三、聊天室分析
（一）功能模块分析
1、用户注册登录模块
完成新用户注册，将注册信息添加到数据库中，用于用户的股验证，经过登录验证的用户即可进入聊天室进行聊天。
2、用户发言的模块
除了提供聊天的内容输入外，还可显示当前用户正在对谁发言，可以选择发言的颜色和发言的表情。
完成聊天的内容输入外，通过单击“提交”按钮或者按回车按钮外，即可显示聊天的内容。
3、聊天内容显示模块
主要将每个用户的聊天内容显示到网页中，让内容对指定的内容可见（指私聊中）。
4、在线用户列表显示模块
其实现在线用户和在线人数的统计，并将在线用户显示出来。
5、辅助区模块
可提供清屏，刷新，显示名单的操作功能。
6、退出系统
退出在线聊天系统，关闭页面。
（二）系统功能模块图为：
（三）系统流程图
四、系统设计（界面、功能、数据库）
建立一个名为chatroom的Mysql数据库。
数据库中共使用五个表分别名为：
表4-1用户信息表（userinfo）
列名
数据类型
长度
允许空
User_name
Varchar
50
No
password
Varchar
50
No
User_id
Int
8
No
User_mail
Varchar
50
Yes
Flag
Varchar
50
表4-2在线用户表（onlineuser）
列名
数据类型
长度
允许空
User_id
Int
10
User_name
Varchar
50
Chat_room
Varcahr
255
Login_time
Datetime
8
表4-3聊天记录（msginfo）
列名
数据类型
长度
允许空
chatroom
Varchar
50
msgfrom
Varchar
50
Msgto
Varchar
50
msgkind
Int
8
msgcontent
Text
16
msgtime
Date
4
表4-4聊天室表（chatinfo）
列名
数据类型
长度
允许空
chatid
Int
50
Chatname
Varchar
50
chatmsg
Varchar
50
五、系统实现
（一）登陆界面
用户可以任意填写用户名登录聊天室，但不允许为空。
利用javascript语言完成。
实现代码：
functioncheck（）{
if（form1.username.value==""）{
alert（"请输入用户名！
"）;form1.username.focus（）;returnfalse;
}elseif（form1.username.value=="\'"）{
alert（"请不要输入非法字符！
"）;form1.username.focus（）;returnfalse;
}
}
用户登录成功以后通过一个form表单跳转到main.jsp界面进入聊天状态。
跳转代码：
action=loginRoom"onSubmit="returncheck（）">
页面如下：
页面上方的文字主要通过系统公告的方式，主要实现代码如下：
varsysBBS="14px;line-height:
30px;'>欢迎光临GOSSIP聊天室，请遵守聊天室规则，不要使用不文明用语。
22px;'>";
//此处需要加?
nocache="+newDate（）.getTime（），否则将出现在线人员列表不更新的情况。
（二）聊天界面
用户进入聊天界面主要以各种表情、各种文字颜色对不同的聊天者发送信息。
用户可以通过聊天者发言功能，发送聊天信息，实现发言功能的程序是main.jsp
用户聊天时必须选择聊天对象，所有人和正在在线的人的名称2种选项，实现方式：
functionset（selectPerson）{//自动添加聊天对象
if（selectPerson!
="${username}"）{
form1.to.value=selectPerson;
}else{
alert（"请重新选择聊天对象！
"）;
}
当聊天信息超过一屏时，设置最先发送的聊天信息不显示，实现代码如下：
functioncheckScrollScreen（）{
if（!
form1.scrollScreen.checked）{
document.getElementById（"content"）.style.overflow='scroll';
}else{
document.getElementById（"content"）.style.overflow='hidden';
document.getElementById（'content'）.scrollTop=document.getElementById（'content'）.scrollHeight*2;
}
setTimeout（'checkScrollScreen（）',500）;
}
用户选择表情时通过select函数，具体代码如下：
无表情的
微笑着
笑呵呵地
热情的
温柔的
红着脸
幸福的
嘟着嘴
热泪盈眶的
依依不舍的
得意的
神秘兮兮的
恶狠狠的
大声的
生气的
幸灾乐祸的
同情的
遗憾的
正义凛然的
严肃的
慢条斯理的
无精打采的
用户可以选用自己喜欢的颜色做字体颜色，具体代码如下：
字体颜色：
默认颜色
#FF0000"value="FF0000">红色热情
#0000FF"value="0000ff">蓝色开朗
#ff00ff"value="ff00ff">桃色浪漫
#009900"value="009900">绿色青春
#009999"value="009999">青色清爽
#990099"value="990099">紫色拘谨
#990000"value="990000">暗夜兴奋
#000099"value="000099">深蓝忧郁
#999900"value="999900">卡其制服
#ff9900"value="ff9900">镏金岁月
#0099ff"value="0099ff">湖波荡漾
#9900ff"value="9900ff">发亮蓝紫
#ff0099"value="ff0099">爱的暗示
#006600"value="006600">墨绿深沉
#999999"value="999999">烟雨蒙蒙
/’;.
（三）聊天内容获取
用户获取聊天内容是通过contentType函数，代码：
<%@pagecontentType="text/html"pageEncoding="UTF-8"%>
${message}
（四）信息发送
用户发送信息是通过从新定向的方法，跳转页面到main.jsp中利用其中的功能
代码：
<%@pagecontentType="text/html"pageEncoding="UTF-8"%>
<%@includefile="content.jsp"%>
<%response.sendRedirect（"main.jsp"）;
%>
（五）保存用户信息
用户利用用户名进行登录，利用
Stringusername=request.getParameter（"username"）;//获得登录用户名
UserInfouser=UserInfo.getInstance（）;//获得UserInfo类的对象
session.setMaxInactiveInterval（600）;//设置Session的过期时间为10分钟
Vectorvector=user.getList（）;
booleanflag=true;//标记是否登录的变量
//判断用户是否登录
if（vector!
=null&&vector.size（）>0）{
for（inti=0;iif（user.equals（vector.elementAt（i）））{
out.println（"alert（'该用户已经登录'）;window.location.href='index.jsp';"）;
flag=false;
break;
}
}
}
//保存用户信息
if（flag）{
UserListenerul=newUserListener（）;
ul.setUser（username）;
session.setAttribute（"user",ul）;
session.setAttribute（"username",username）;
user.addUser（ul.getUser（））;
//保存当前登录的用户名
session.setAttribute（"loginTime",newDate（）.toLocaleString（））;//保存登录时间
response.sendRedirect（"Messages?
action=loginRoom"）;
}
%>
（六）用户登录时间过期
代码：
<%@pagecontentType="text/html"pageEncoding="UTF-8"%>
<%if（null==session.getAttribute（"username"）||"".equals（session.getAttribute（"username"）））{
out.println（"alert（'您的账户已经过期，请重新登录!
'）;window.location.href='index.jsp';"）;
return;
}%>
（七）退出界面
用户退出聊天室时出现欢迎您下次光临对话框，点击确定后回到主页面主要实现方式是通过button-exit按钮的onclick事件，
安全退出时：
functionExit（）{
window.location.href="leave.jsp";
alert（"欢迎您下次光临！
"）;
}
当不安全退出时：
window.onbeforeunload=function（）{//当用户单击浏览器中的关闭按钮时执行退出操作
if（event.clientY<0&&event.clientX>document.body.scrollWidth）{
Exit（）;//执行退出操作
}
返回登录界面代码：
<%@pagecontentType="text/html"pageEncoding="UTF-8"%>
<%
session.invalidate（）;
response.sendRedirect（"index.jsp"）;
%>
（八）样式表
代码：
a{
font-size:
9pt;text-decoration:
none;color:
#3C404D;
}
td{
font-size:
12px;
}
.btn_grey{
font-family:
"宋体";font-size:
9pt;color:
#333333;
background-color:
#eeeeee;cursor:
hand;padding:
1px;height:
19px;
border-top:
1pxsolid#FFFFFF;border-right:
1pxsolid#666666;
border-bottom:
1pxsolid#666666;border-left:
1pxsolid#FFFFFF;
}
.btn_bg{
background-image:
url（../images/button.jpg）;border:
#436E9Bthin0px;
width:
56px;
height:
20px;padding:
4px;
color:
#FFFFFF;
}
input{
font-family:
"宋体";
font-size:
9pt;
color:
#333333;
border:
1pxsolid#777777;
}
input.login{
font-family:
"宋体";
font-size:
9pt;
color:
#333333;
border:
1pxsolid#6f9c61;
width:
150px;
height:
22px;
}
.wenbenkuang{
font-family:
"宋体";
font-size:
9pt;
color:
#333333;
border:
1pxsolid#444444;
}
.noborder{
border-style:
none;
}
-->
升级会员 