基于Web的聊天室构建

1. 1. 系统总体设计

本聊天室除了主页面使用了框架，一些判断页面使用了servlet控制之外，其余页面均包含有头页面（head.jsp）和尾页面(foot.jsp)。本聊天室还包含有两张图片，即背景图片和头页面的图片。

该聊天系统主要由用户注册、用户登录、主聊天室和一些修改功能组成，系统的总体流程图如下所示：欢迎模块就是聊天室开始的欢迎页面，是整个聊天室的首页，是带领用户进入本聊天室的向导，其中包括用户登录界面和用户注册界面两个链接。

用户模块主要包括用户登录和用户注册两个单元,分别是用来给用户登录和用户注册使用的页面。

用户的注册单元是常规的注册，主要包含用户名、密码、性别、年龄、邮箱、以及用于密码保护的问题和回答。用户注册使用javascript对用户所填写的信息验证，查看用户所填信息是否符合要求，只有填写的所有内容都符合要求之后，表单才能提交。表单提交后交给servlet控制器转发，之前javabean会提取表单提交的内容并进行相应的处理，servlet根据bean的处理结果决定转发方向，若用户注册的用户名数据库中已经存在，即该用户名已经被注册过，则返回相应的错误信息，提示重新注册。若用户注册的用户名不存在，则用户注册成功，相应的信息就会被插入到数据库的user表中。用户注册的流程图如下所示

用户的登录使用已经注册的注册用户身份登录，用户登录时也要经过检查后才会成功地提交表单，javabean提取表单的内容处理，servlet根据处理结果决定转发方向。用户每成功登录一次其积分就会加2分，积分大于1000分时该用户就可以自动升级为高级用户，具备管理员的功能，即具有踢人的权限。用户登录的流程图如下所示：

已注册用户的登录实现主要通过将用户的提交用户名和密码与数据库中的数据作对比，查找是否有该用户名、密码是否正确。如果数据库内没有该用户名，则该用户显然尚未注册，显示用户名不存在；若有该用户名且密码正确则将页面转到聊天室房间选择界面，否则提示相应的错误信息。并同时将登录成功的用户的用户名保存到session中，选择房间后从session中取出用户名并从用户注册的信息表中查询出用户的积分将该用户的用户名、所选房间和用户的积分写入到在线用户表中从而在聊天主页面查看在线聊友的列表里能被显示出来。将查询出的用户积分保存到session中，以便在聊天主页面中显示出该用户的积分。

聊天页面由四个单元组成,分别为输入单元，显示单元，基本操作单元和处理单元。基本操作单元包括在线用户列表的查看、用户基本资料修改、用户密码修改、更换房间、用户注销，在这个模块也显示了用户目前所在的聊天房间，处理单元是隐藏的，负责将从输入单元输入的信息处理后在显示单元显示出来。

基本操作单元中在线用户列表显示当前在线用户的用户名、所在聊天室以及用户的积分。用户列表通过查询在线聊友数据表，显示用户的一些关于聊天的基本信息。

基本操作单元中用户基本资料的修改是根据用户名和问题回答来修改年龄和邮箱。用户名是通过session传递过来的。sql语句根据用户名等于传入的用户名和输入的问题回答是否与数据库中相匹配决定是否能修改成功。

基本操作单元中用户密码的修改根据session中传入的用户名找到数据库中对应的记录，再根据输入的旧密码是否与数据库中的一样决定修改操作是否成功。

基本操作单元中用户注销将在线用户表中对应的信息删除，再将session里的对应信息清空来实现的。

显示模块是用户的发言区，所有的谈话都将在这里得到显示，无论是公告、对所有人的聊天或者是私聊的话语。但是如果是私聊则只有聊天对象和自己看得到聊天内容，其他人是看不到的。信息的得到是通过输入区获得（用户自己的一些发言），或系统自动生成（对某用户的进入或某户被踢出的一些系统提示）的。用户可以根据自己的喜好选择和大家一起聊天或和某人进行私聊。显示单元的文字条数在多于显示页面大小的时候会自动产生滚动条并滚动，这只要通过window.scroll()函数就可以实现了，以保持最新的聊天内容在显示单元显示。用户查看聊天记录也是显示页面实现的，所有聊天记录在信息未清除（服务器重启后或用户的发言在超过200条时，系统会自动清楚所有记录内容，以便丢弃不再需要的已发送内容记录。）之前都会显示在该页面上。

输入单元是用户进行聊天的主要单元，用户的发言、聊天对象、表情用语、是否私聊、是否退出私聊或者是否退出聊天室，都是通过输入区实现的。这里是用户的操作界面。用户可以在聊天对象的文本框中输入自己喜欢的聊友给他发送信息或给所有人发送信息（默认是给所有人发送信息），当用户勾选了“悄悄话”，则该用户的发言就只有他所输入的聊天对象可以看到，其他人是看不到的，如果没有勾选（即退出了私聊），则他的发言是在线聊友都可以看到的。表情用语、字体、字体颜色、字体样式等都是下拉式列表框，可以直观的选取，用户的发言内容是将是所有这些的组合文字。离开按钮是调用用户退出页面，即logout.jsp页面，从而将用户从当前用户列表的session中删除该用户名，并从在线聊友表中删除，实现用户的退出。“聊天帮助”链接可以查看一些关于如何使用本聊天室的说明信息。“高级功能”链接是高级用户具备的管理员功能，可以踢出其他在线用户。

高级功能是高级用户具有的类似于管理员的功能。当某用户的积分大于1000分时，该用户就具备了该功能，启用该功能后可以根据下拉框选择要踢出的用户名，踢人成功后会有提示框，提示所选用户已经被踢出。被踢出的用户将不能再聊天，其他用户可以给他留言，但他是不能看到的，因为在他能看到的时候聊天信息已经被清空了。被踢出的用户可以正常登录聊天室，但要在服务器重启之后，才能继续正常聊天。

1. 1. 系统数据库设计
      1. 数据库

本系统采用的数据库是Microsoft Office Access数据库，共有两张表

1. 1. 1. 基本表的设计

该数据库系统的E-R图如下所示：

该系统用两张表：注册用户信息表（user表）和在线用户信息表（user_list表）。

表1 注册用户信息表（user表）

字段名称	数据类型	字段大小	是否主键	说明
username	文本	50	是	用户名
psw	文本	50	否	用户密码
sex	文本	50	否	性别
age	文本	50	否	年龄
mail	文本	50	否	电子邮箱
question	文本	50	否	注册问题
reply	文本	50	否	问题回答
integral	文本	50	否	用户积分

表2 在线用户信息表（user_list表）

字段名称	数据类型	字段大小	是否主键	说明
username	文本	50	是	在线用户名
chatroom	文本	50	否	用户所在聊天室
integral	文本	50	否	用户积分

1. 功能实现

本聊天室大部分页面都包含了头页面和尾页面，是通过JSP的动作指令实现的，主要实现代码为：

<jsp:include page="header.jsp"></jsp:include>

<jsp:include page="footer.jsp"></jsp:include>

1. 1. 用户注册与登录功能
      1. 用户注册

用户注册是JSP页面、JavaBean和Servlet的结合，JSP负责注册的显示，使用javascript在表单提交之前对用户填写的信息进行验证，验证通过，表单提交给Servlet，Servlet通过调用JavaBean决定注册是否成功，JavaBean会将用户提交的表单信息封装并处理，然后显示相应的信息，失败可再回到注册页面，若成功则可连接到登录页面。

主要实现部分代码为： 

private String username;

public String getUsername() {

return username;

}

public void setUsername(String username) {

this.username = username;

}

boolean valid = false;

String username = rtb.getUsername();

RegisterBean rb = new RegisterBean();

rb.setUsername(request.getParameter("username"));

RegisterCheckBean rcb = new RegisterCheckBean(rb);

if (rcb.validate())

{

out.println("<div align='center'>");

out.println("<br><br><br><br><br>");

out.println("该用户已经存在，请重新<a href='register.jsp'>注册</a>！");

out.println("</div>");

}

1. 1. 1. 用户登录

用户登录功能类似于用户注册，也是通过以上几种技术的集合来实现的，用户注册时，若成功则将用户信息保存到数据库中，而用户登录时，若成功则将表单上的信息与数据库中对应的信息作比较，若符合就可以成功跳转。实现代码与用户注册类似。

1. 1. 用户选择聊天房间功能

用户登录成功后就可以连接到选择聊天房间的页面，用户可以根据自己的喜好选择聊天房间，在用户登录并成功选择聊天房间后，用户的用户名、所选聊天室和用户的积分就会被添加到user_list表中，只有在用户注销或被他人踢出后用户的这些信息才会从user_list中被删除。

该功能也是通过JSP页面、JavaBean和Servlet相结合实现的。

主要实现代码为： 

private String chatroom;

public String getChatroom()

{

return chatroom;

}

public void setChatroom(String chatroom)

{

this.chatroom = chatroom;

}

stmt.executeUpdate("insert into user_list

values('"+username+"','"+chatroom+"','"+integral+"')");

valid = true;

ChooseBean cb = new ChooseBean();

cb.setUsername(request.getParameter("username"));

cb.setChatroom(request.getParameter("chatroom"));

ChooseCheckBean ccb = new ChooseCheckBean(cb);

if(ccb.validate())

{

goToPage("main.jsp", request, response);

}

用户相应信息的是在JavaBean处理时被添加到数据表中的。

1. 1. 用户聊天功能

聊天室的主页面是用框架技术构建的，对于不支持框架的浏览器是无法访问的，聊天主页面主要集成了四个页面，即显示页面（show.jsp）、用户信息修改页面（right.jsp）、处理页面（transact.jsp）和输入页面（input.jsp）。

1. 1. 1. 显示功能

显示页面将用户的一些发言显示出来，也可以实现聊天记录的查看，

主要实现代码为：

<script language="javascript" type="text/javascript">

function GetData(url) {

url = "class_method.jsp?action=transact.jsp";

try {

DataLoad.src = url;

} catch (e) {

return false;

}{

var timeoutid = setTimeout("GetData()", 2000);

 } }</script>

<script id="DataLoad" language="javascript" 

type="text/javascript" defer></script>

<body onLoad="javascript:GetData();" background="background.jpg">

<span id=loadcontent>数据载入中......</span>

</body>

1. 1. 1. 用户信息修改功能

用户信息修改页面首先会显示用户所在的聊天房间，用户在聊天过程中可以修改用户资料、密码、更换房间等。主要是通过超链来将这些功能放在该页面的。

更换房间操作是用表单将更换之后的信息提交出去处理的。

用户修改资料的时候通过session将用户名传递过去，可以修改年龄和邮箱，在修改时会检查数据，查看用户名为指定用户名时，问题回答是否正确，若正确则修改成功，否则会有相应的提示信息。

用户密码修改也是通过session将用户名传递过去，查看数据表中指定用户名的旧密码是否正确，若正确，则将旧密码更新为新输入的密码，若不正确，则有相应的提示信息。

1. 1. 1. 处理功能

处理页面两秒钟就会更新一次，以获得最新的用户聊天信息在显示页面中显示，使得用户之间可以及时地看到聊天内容，从而进行回复。主要实现代码为：

<meta http-equiv="refresh" content="2">

处理页面是将输入页面中存放在application中用户填写和选择的一些操作取出来放入一个Vector数组中，然后根据这些元素（如是自己对别人说话还是别人对自己说话，有没有动作，是否为悄悄话）决定发出的消息的组成结构，通过字符串相加得到。再通过javascript的write方法在显示页面中写出来。

主要实现为：

<%

synchronized (application) {

String alone = new String("yes");

Vector DisplayMessage = null;

DisplayMessage = (Vector) application.getAttribute("Message");

if (DisplayMessage != null) {

if (DisplayMessage.size() < MessageIndex.intValue()) {

MessageIndex = new Integer(DisplayMessage.size()); }

if (MessageIndex.intValue() != DisplayMessage.size()) {

for (int i=MessageIndex.intValue(); i<DisplayMessage.size(); i=i+6){

  int aloneindex = i;

  int nameindex = i + 1;

  int talkwithindex = i + 2;

  String Messagestr = (String) DisplayMessage.get(i + 3);

  String systemSpeak = (String) DisplayMessage.get(i + 4);

  String action2 = (String) DisplayMessage.get(i + 5);

  String alonetag = (String) DisplayMessage.get(aloneindex);

  if (alonetag == null)alonetag = new String("all");

  String nametag = (String) DisplayMessage.get(nameindex);

  String talkwithtag = (String) DisplayMessage.get(talkwithindex);

  if (systemSpeak.compareTo("yes") == 0) {

  Messagestr = str1 + Messagestr + str6;%>

<script language="JavaScript">

  parent.mainframe.document.write("<%=Messagestr%>")

</script>

<%}%>……

1. 1. 1. 输入功能

输入页面中主要有通过sesison传递过来的用户名；聊天对象，聊天对象是一个输入文本域，用户可以手动输入，这样在其他用户离开或被踢出之后还可以对他留言，留言内容会放在application中，在留言对象下次登录的时候就可以看到，并可以做相应的处理，而只有在服务器重启之后application中保存的留言信息才会被清空，这样可以使用户的聊天方式更加简便、灵活；聊天的一些动作，这个是固定的，在聊天室创建好之后就具备那么多的动作，用户可以选择自己相要表达的动作；悄悄对话框，若勾选了这个对话框，就可以进入私聊的状态，用户的发言只有私聊的对象才可以看得到，其他人是看不到的；积分，积分是通过session传递过来的；发送按钮，用户点击该按钮后，系统就会将用户输入的一系列信息添加到Message中交给处理页面处理；离开按钮，用户点击该按钮后，就会有清空session中相应信息的操作，并且将user_list表中的相应信息清除。其实

该页面的一些主要功能实现的代码为：

if (first == null){

talkMessage="系统公告："+username + "进入了"+chatroom+"聊天室，大家欢迎！";

action = "no";

systemSpeak = "yes";

}

synchronized (application) {

Message = (Vector) application.getAttribute("Message");

if (Message == null) {

Message = new Vector(30, 10);

}

if (Message.size() > 200) {

Message.removeAllElements();

}

Message.addElement(aloneTalk);

Message.addElement(username);

Message.addElement(talkwith);

Message.addElement(talkMessage);

Message.addElement(systemSpeak);

Message.addElement(action2);

application.setAttribute("Message", Message); }

资源传送门：待审核中