软件工程毕业设计

天津师范大学

本科毕业论文（设计）题目：网上互动交流平台的设计与实现

学院：计算机与信息工程学院

学生姓名：龚玲玲

学号： 07509273

专业：软件工程

年级： 2007级

完成日期： 2011年5月

指导教师：夏玮

网上互动交流平台的设计与实现

摘要：在当今信息时代,计算机技术与网络技术越来越广范地应用于各个领域,改变着人们的学习、工作、生活乃至思维方式，人们越来越注重随时随地的方便快捷的交流方式，更重交流工如雨后春笋拔地而起，大大改变了人们的生活，在线交流网站应运而生，而能实现即时交互的学习平台却是凤毛麟角，总是需要麻烦的安装过程。本系统着重于用户间的交流学习，更好的迎合了广大使用者的需求。系统主要功能部分用了BS架构，只需要一台服务器，其他PC机只需要登录主机的网址便可以进入系统，进行交流，这主要归功于Jabber技术。本系统使用方便，注册简单，以用户名为关键字，不像其他交流软件，注册过程复杂，注册成功后可以根据需要自行填补信息，实现组内交流功能是一个很人性化的模块，可以根据需要实现组内成员间的“私聊”。还可以设置自己的即时状态（忙碌、在线、欢迎聊天、离线等），对于已经存在的好友也可以做不同的操作，可以聊天、编辑、添加、删除、添加分组等。

关键词：互动交流；B/S；即时

The Design and Implementation of On-line

Interaction communication Platform

Abstract: In this information age, computer technology and network technology is more and more widely applied in various fields, changing people's study, work and life and even a way of thinking, people pay more and more attention to the convenient anytime the way of communication, the more heavy exchange work have mushroomed ground, changed people's life greatly, on-line exchange website born, and can realize real-time interactive learning platform is rare, always need trouble installation process. This system focuses on the communication between users , better cater to the user's need. It use B/S structure on the main function part, only one server, thanks to Jabber technology, the other users just need login the host url ,then it will be able to enter the system for communication. This system is easy and comfort to use, the keyword is the unique user name , unlike other communication software,whose registration process is complicated, in this system, after successfully register ,we can fill the information as we wish, the humanized part of this system is that it achieve the goal of talking in a room. In addition, clients can set their own instant state (busy, online, welcome to chat, offline, etc.), for existing friends can also do different operation, we can chat, edit, add, delete, add group, etc.

Key words: interaction；communication；B/S；in-time

目录

1绪论 (1)

1.1项目开发的背景 (1)

1.3项目开发的内容和意义 (2)

2关键技术 (2)

2.1.1 前台 (2)

2 .1.2后台 (2)

2.1.3 项目架构 (3)

2.2JA V A简介 (3)

2.2.1Java 体系结构介绍 (3)

2.3Ajax (3)

2.3.1Ajax简介 (3)

2.4Jabber (3)

2.4.1Jabber简介 (3)

2.4.2 Jabber特点 (4)

2.5JavaEE (4)

3系统设计 (4)

3.1需求分析 (4)

3.2系统概述 (5)

3.3系统功能 (5)

3.4系统需求及可行性 (6)

3.2数据库设计 (6)

3.2.1系统数据库的介绍 (6)

4系统实现 (10)

4.1登陆界面截图 (10)

4.1.1关键代码 (11)

4.2已登陆截图 (12)

4.3群聊天室的配置界面截图 (13)

4.3.1关键代码 (14)

4.4添加好友、聊天界面截图 (15)

4.4.1关键代码 (16)

4.5个人信息填写界面、状态选择截图 (16)

4.5.1关键代码 (17)

5总结和展望 (19)

参考文献 (1)

致谢 (2)

1绪论

1.1项目开发的背景

随着生活节奏的加快，科技的高度发展，互联网的全球化，地球的“村”化，人们越来越重视足不出户知天下，网上交流显得尤为重要了，网上学习我们听到的都是最优秀的老师的讲解，而在现实当中这是只有一少部分人能享受到的！并且这第一流的教育是随时随地的，只要能上网就可以，灵活有效，完全是自己掌握自己的学习时间，学习主动权，不会再与什么活动有冲突，在你有空的时候学习！不仅如此，网上提供的还是个性化的学习，按照章节划分，在视频学习过程中，学习进度完全由自己掌控，懂得的可以直接跳过，不懂的可以多听几遍，直到完全消化为止。网上学习操作简单，即使是初学者也没关系，因为有些网站也有导航，一步一步的手把手的教。但是很多时候在学习的过程中会遇到困惑、有些问题亟待解决，这时候在线交流就显得尤为重要了。

在传统的课堂教学中，大多数教师没有机会和班级中的每个学生进行交流，也有很多学生因为种种原因，不敢和教师进行面对面交流。在线学习却改变了这一切。在互联网上，学习者不仅可从网上下载教师的讲义、作业和其他有关的参考资料，而且可向远在千万里之外的教师提问，从而激发了学习的积极性。

在线学习充分实现了个性化学习。在传统的课堂教学条件下，因材施教和个性化学习只是一个理想化的追求。而互联网使因材施教成为可能，学习变成一个各取所需的过程，个性化的学习得以真正实现。在互联网上，没有统一的教材，没有统一的进度。每一位学习者都可以根据自己的特点，在自己方便的时间从互联网上自由地选择合适的学习资源，按照适合于自己的方式学习。

1.2 研究现状

现在互联网上有很多在线交流的平台，包括腾讯公司的QQ，阿里巴巴旗下的阿里旺旺，以及Google使用的Gtalk等，但大多数都是C/S的项目。C/S项目需要在客户端的机器上安装相应客户端，虽然客户体验度较高，但是可移植性较低，在移动学习的当下，并不能很好的被客户利用。这个互动交流平台是基于XMPP协议的B/S项目，只要能接上互联网，随时随地都可以进行交流，方便大家使用。

目前也有很多学习网站，但是都缺乏交流的灵活性，也就是很多学习者在遇到困难时，不能得到及时的解决，要不就是自己翻阅资料，要不就是直接跳过，很难保证学习质量，浪费了学习时间还可能得到错误的结论、观点，可谓得不偿

失！当然也可以发问，但是回答问题的人的专业水平又值得考量，并且总是会有延时，大大降低了学习者的学习兴趣。

在线交流不光可以实现学习使得因材施教和个性化学习成为真正的可能。最重要的是，它可以最大限度地激发学习者的学习动机，从而最大限度地激发学习者的潜能。

1.3项目开发的内容和意义

本在线互动学习平台最大的亮点就是实现了在线及时交流，学习者在学习的过程中可以随时发问，可以跟一起学习的同学讨论，也可以单独的与老师进行交流，提高了学习效率，交流的功能很强大，可以进入群组交流，可以实现组内交流功能是一个很人性化的特点，可以根据需要实现组内成员间的“私聊”。还可以设置自己的即时状态（隐身、在线、欢迎聊天、离线等），对于已经存在的好友也可以做不同的操作，可以聊天、编辑、添加、删除、添加分组等。管理员可以对不同的用户设置不同的权限，可以为特定的成员累开辟不同的组，然后通过系统播放的形式通知有需要的人。权限的限定使得本网站更专业。

2关键技术

2.1系统介绍

2.1.1 前台

互动交流平台前台使用的是javascript技术和ajax技术实现的，JavaScript是一种基于对象的客户端脚本语言。同时也是一种广泛用于Web开发使用的脚本语言，常用来给HTML网页添加动态功能。

JavaScript看上去像Java，语法、名称和命名规范上与java有相似之点，但JavaScript的主要设计原则还是来自于源自Self和Scheme. JavaScript具有非常丰富的特性，虽然JavaScript是给非程序人员的脚本语言[12]。

Ajax是一种创建交互式网页应用的网页开发技术。AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。

2 .1.2后台

后台采用的即使通讯协议是是基于XMPP的协议的jabber服务器openfire。系统的运行环境是基于Apache Tomcat。XMPP是一种基于XML的协议，它继承了在XML环境中灵活的发展性。所以，基于XMPP的应用具有很好的可扩展性。经过扩展以后的XMPP可以通过发送扩展的信息来处理用户的需求。

Jabber 是著名的Linux即时通讯服务服务器，它是一个自由开源软件，能

让用户自己架即时通讯服务器，可以在Internet上应用，也可以在局域网中应用。Jabber最有优势的就是其通信协议，可以和多种即时通讯对接。

Tomcat是java程序员最喜欢的服务器，因为简单，易用，对工程的部署和动态加载相对容易。它能够很好的支持JSP，HTML以及CGI的展示和服务。

2.1.3 项目架构

项目主要采用的就是Ajax技术来在前后台产生即时交互，网页中对消息的处理主要就是通过Javascript和Ajax来实现的。后台处理数据时，采用了HTTPBIND对数据进行处理，简单，易用。服务器框架是tomcat，即时通信框架是基于jabber的openfire服务器。对消息，用户，分组聊天都做了对应的支持。

2.2JA V A简介

Java平台是由Java虚拟机和Java 应用编程接口构成。Java 应用编程接口为Java应用提供了一个独立于操作系统的标准接口，可分为基本部分和扩展部分。在硬件或操作系统平台上安装一个Java平台之后，Java应用程序就可运行。现在Java平台已经嵌入了几乎所有的操作系统。这样Java程序可以只编译一次，就可以在各种系统中运行。

2.2.1Java 体系结构介绍

Java可以保证安全的、健壮的且和平台无关的程序通过网络传播，在很多不同的计算机和设备上运行。

体系结构 Java程序设计语言 Java class文件格式 Java应用编程接口Java 虚拟机 Java虚拟机和Java API组合共同组成可以在任何地方运行的Java平台。

Java程序设计语言使用Java语言写程序，能够充分利用如下的许多软件技术：面向对象、多线程、结构化错误处理、垃圾收集、动态连接、动态扩展、使用Java语言最引人注目的原因之一是，它能够提高开发者的效率。

2.3Ajax

2.3.1Ajax简介

Ajax 指异步JavaScript 及XML。从基于Web的应用到基于数据的应用的转换。在基于数据的应用中，用户需求的数据如联系人列表，可以从独立于实际网页的服务端取得并且可以被动态地写入网页中，给缓慢的Web应用体验着色使之像桌面应用一样。

2.4Jabber

2.4.1Jabber简介

Jabber 是著名的Linux即时通讯服务服务器，它是一个自由开源软件，能让用户自己架即时通讯服务器，可以在Internet上应用，也可以在局域网中应用。Jabber最有优势的就是其通信协议，可以和多种即时通讯对接。

2.4.2 Jabber特点

常用的jabber 服务器软件就是 openfire 。openfire 是一款基于XMPP 协议的一款即时通信开源的服务器端软件，正如它的开源精神一样，XMPP 协议也是容纳各种协议的一种通信协议，总之，XMPP 协议可说是一种“开放式协议”，允许客户端使用各种通信协议连接到 openfire （服务器端），所以，使用基于XMPP 协议的openfire 允许客户使用基于各种协议的客户端进行通信。

Jabber协定是自由、开放、公开的，并且易于了解。而且在客户端、服务器、元件、源码库等方面，都已经各自有多种实作。

2.5JavaEE

JavaEE 是 J2EE的一个新的名称,之所以改名，目的还是让大家清楚J2EE 只是Java企业应用.随着WEB和EJB容器概念诞生，使得软件应用业开始担心SUN的伙伴们是否还在Java平台上不断推出翻新的标准框架，致使软件应用业的业务核心组件架构无所适从，从一直以来是否需要EJB的讨论声中说明了这种彷徨[5]。

3系统设计

3.1需求分析

网络的使用让人们各方面的需求都发生了变化，人们对于交流方式的要求越来越高，因此网上聊天工具的人性化、便捷化、全面性是十分重要的。基于这一点，本系统致力于方便用户，时刻站在用户的角度上去开发、制作。

首先是对于用户的注册管理，以用户名为关键字，注册方便简洁，省去了繁琐的表格的填写，只需要用户名与密码，这也减轻了数据库的搜索（在登陆的时候），提高了系统的灵活性。

其次是聊天室，用户可以根据需要组织聊天室成员，方便于组内聊天，类似于一个meeting。聊天室的后台管理很严格，专业化的管理是的系统的交流显得更加专业、专一。

然后对于组的管理，对于一部分分组是管理员与后台设定的，用户不可以随意删除、添加。用户对此只有使用与否的选择。而另外一些是可以自己设置的，方便与用户的查找。

3.2系统概述

本产品面向普通用户，主要为校园网等网络条件较好的使用者，力求简单易用，为广大学习交流的用户提供一个方便的平台。

本产品包含两部分内容：

1）客户端部分。用来连接远程机器及启动相应软件。

2）SERVER端，管理本地文件的共享及数据库，查看连接到本地的用户数量及控制网络连接状况。

3.3系统功能

本软件初步设计界面如下：

客户端部分：

图3-1用户登陆页面

上图此为用户登陆页面，只有先登录了才可以进行操作，若没有注册则需先注册。

图3-2用户交流界面

上图为用户交流界面，为了方便演示，故在同一台服务器上登录，从外观上看简单明了、聊天目的明确，让人眼前清晰了然。

下图为系统功能示意图

图3-3 系统用例图

3.4系统需求及可行性

本软件主要目的是为学习者的交流搭建一个方便的平台，任何可以上网的用户都可以使用本网站。由于一般的学习网站只提供在线自主学习功能[4]，很少有交流功能，更谈不上学习者之间的交流，各人之间是互不知晓的。而本网站能提供此项功能，能够满足学习者的需求，更加有效地促进学习。

基于以上两点，我们认为本软件功能若全部实现，潜在的用户数量是有保证的，并且本系统粘在用户的角度上，人性化的设计更是会吸引众多的用户。3.2数据库设计

3.2.1系统数据库的介绍

本数据库主要包括十多张表，表之间有着紧密的联系，依照第三范式[10]，有效的解决了数据冗余量大、更新异常、插入异常、删除异常等等的问题。

图3-4系统E-R图

数据字典节选

关于用户表格，有用户名、昵称、注册日期、密码、电子邮箱、修改日期，值得一提的就是加密密码，这是由系统自动生成的。这个特性是基于XMPP协议的openfire特有的。

表3-1 用户表

Table1 ofUser

username V ARCHAR 64 NOT NULL plainPassword V ARCHAR 32

encryptedPassword V ARCHAR 255

name V ARCHAR 100

email V ARCHAR 100

creationDate CHAR 15 NOT NULL modificationDate CHAR 15 NOT NULL, PRIMARY KEY username

用户表主要是存储用户的信息，用户在登录的时候会去数据库中查询。

表3-2 个人私有信息表

Table 2 ：ofPrivate

username V ARCHAR 64 NOT NULL

name V ARCHAR 100 NOT NULL namespace V ARCHAR 200 NOT NULL

privateData TEXT NOT NULL

PRIMARY KEY username, name, namespace 100

Table 3是关于用户好友信息的花名册，包括好友ID、好友用户名、好友登录服务器编号、昵称。这个表是系统自动生成，管理员可以通过查看信息了解到好友的一些基本信息，如果有意外，管理员可以设置权限拒绝该好友的存在。

表3-3 用户好友信息的花名册

Table3 ofRoster

rosterID BIGINT NOT NULL

username V ARCHAR 64 NOT NULL

jid V ARCHAR 1024 NOT NULL

sub TINYINT NOT NULL

ask TINYINT NOT NULL

recv TINYINT NOT NULL

nick V ARCHAR 255 NOT NULL

PRIMARY KEY rosterID

Table 4 记录的是组的情况，主要存储组名、组的所属用户用户名、以及给予权限的管理员。

表3-4 组信息表

Table 4 ofGroupUser

groupName V ARCHAR 50 NOT NULL

username V ARCHAR 100 NOT NULL administrator TINYINT NOT NULL

PRIMARY KEY groupName, username, administrator

Table 6到Table 8 是聊天室的一些表，聊天室管理是很复杂的一项任务，由于是学术交流的网站，所以容不得嬉闹、不正式，房间的创建权只能属于管理员，可以通过发布系统消息的方式知会所有的用户，让第一个进入房间的人成为聊天室管理员，也可以是把管理权限赋予特定的用户，让用户自己去创建聊天室，然后自行通知特定的组内好友等。对于进入聊天室管理员也可以进行限制，如果

限制了只有被邀请的人才可以进入，则及时用户知道聊天室的存在，也不可加入讨论。由于系统的平台和配置的特殊性，很多时候系统会自动生成一些属性，使得系统更加安全稳定。

表3-5 聊天室成员表

Table 5 ofMucMember

roomID BIGINT NOT NULL,

jid TEXT NOT NULL,

nickname V ARCHAR 255 NOT NULL,

firstName V ARCHAR 100 NOT NULL,

lastName V ARCHAR 100 NOT NULL,

url V ARCHAR 100 NOT NULL,

email V ARCHAR 100 NOT NULL,

faqentry V ARCHAR 100 NOT NULL,

PRIMARY KEY roomID,jid 70

聊天时成员表是方便聊天室管理是很复杂的一项任务，通过发布系统消息的方式知会所有的用户，让第一个进入房间的人成为聊天室管理员。

表3-6 聊天室聊天信息表

Table 6 ofMucConversationLog

roomID BIGINT NOT NULL,

sender TEXT NOT NULL,

nickname V ARCHAR 255 NULL,

logTime CHAR 15 NOT NULL,

subject V ARCHAR 255 NULL,

body TEXT NOT NULL,

聊天室信息表，存储聊天记录，用户可以在之后自己查询聊天记录，方便用户，人性化。

表3-7 聊天室附属信息

Table 7ofMucAffiliation

roomID BIGINT NOT NULL,

jid TEXT NOT NULL,

affiliation TINYINT NOT NULL,

PRIMARY KEY roomID,jid 70

聊天室附属信息表就是关于聊天室的信息，如聊天时性质，最大容量，已有人数，属性等。主要是方便后台管理员管理。

表3-8 聊天室配置表

Table 8ofMucRoomProp

roomID BIGINT NOT NULL,

name V ARCHAR 100 NOT NULL,

propValue TEXT NOT NULL,

PRIMARY KEY roomID, name

4系统实现

4.1登陆界面截图

图4-1登陆、注册界面

上图为登陆、注册界面，如果数据库中没有记录，即用户还未注册，则需要填写一个唯一的用户名，并且设定密码，对[注册新账号]项挑勾，便可以注册成功，对于已经注册过的用户，则直接点击登录即可进入下图，系统登陆页面

图4－2登录进入界面

上图为登陆之后的界面

主要实现的是登陆后好友的模块可以分组显示添加的好友方便进行交流，同时，可以于老师进行交流。

4.1.1关键代码

function selStatusMessage(el) {

if (!el.selected)

el.className = 'myStatusMsgSelected';

else

el.className = 'myStatusMsg';

el.selected = !el.selected;

return true;

}

function setStatusMessage() {

var el = document.getElementById('statusMsg');

if (!el.selected)

return true;

selStatusMessage(el);

top.changeStatus(top.onlstat,el.value);

el.blur();

return true;

}

function keyPressed(e) {

if (e.ctrlKey && e.keyCode == 74)

parent.Debug.start();

if (e.keyCode != 13)

return;

var firingObj = (top.is.ie)?event.srcElement:e.target; if (firingObj.id != 'statusMsg')

return;

return setStatusMessage();

}

function handleClick(e) {

var firingObj = (top.is.ie)?e.srcElement:e.target;

if (firingObj.id == 'statusMsg' && !firingObj.selected) return selStatusMessage(firingObj);

else

return setStatusMessage();

}

在网页中的javaScript代码

4.2已登陆截图

图4-3已登录用户设置部分的常规界面

上图为已登录用户设置部分的常规界面，选项有：隐藏离线用户、自动打开消息、

离开时也自动打开、播放音效、新消息是到来时激活窗口、在聊天窗口显示时间

戳等，用户可以根据需要，选择适合自己的选项。

图4-4已登录用户设置部分的改密码界面

上图为已登录用户设置部分的改密码界面，只需要键入新的密码，并且重新确认，

点击[提交查询内容]按钮即可完成操作。

4.3群聊天室的配置界面截图

图4-5群聊天室的配置界面

上图为群聊天室的配置界面，包括房间名称、描述，更改权限、房间人数限制，还有房间里在线者的角色，房间对外开放权限等，设置密码等等。

4.3.1关键代码

for (var i=0; i

switch(error.childNodes.item(i).nodeName) {

case'not-allowed':

putMsgHTML("不允许",new Date(),group,null,true);

break;

case'forbidden':

putMsgHTML("禁用的",new Date(),group,null,true);

break;

case'item-not-found':

putMsgHTML("没有找到",new Date(),group,null,true);

break;

default:

putMsgHTML(error.childNodes.item(i).nodeName,new

Date(),group,null,true);

break;

}

}

4.4添加好友、聊天界面截图

图4-6添加好友的界面

上图为添加好友的界面，点击“打开搜索”后开始查找，只要是登陆了服务器的用户都可以添加，而且还可以根据需要填写添加好友的原因，让被添加者明了，时时刻刻体现人性化。

图4-7聊天界面

上图为聊天界面，简洁明了，还可以查看历史记录。对话框也可以根据需要拉大缩小，人性化。

4.4.1关键代码

function getNextMSG() { // 通过列表获得消息

var user = srcW.roster.getUserByJID(jid);

if (srcW.is.ie5||srcW.is.op) {

messages[lastMSG++] = user.messages[0];

user.messages = user.messages.slice(1,user.messages.length);

} else

messages[lastMSG++] = user.messages.shift();

if (user.messages.length == 0 && user.chatmsgs.length == 0) {

var images = srcW.roster.getUserIcons(jid);

for (var i=0; i

images[i].src = https://www.360docs.net/doc/3113521846.html,stsrc;

https://www.360docs.net/doc/3113521846.html,stsrc = null;

if (https://www.360docs.net/doc/3113521846.html,ersHidden && user.status == 'unavailable')

srcW.roster.print();

} }

4.5个人信息填写界面、状态选择截图

图4-9 状态栏选择界面

上图为状态栏选择界面，用户可以根据需要选择自己的当前状态，（在线、欢迎聊天、离开、不可用、请勿打扰、隐身、离线等），小图标清晰明了，界面