本文介绍了基于SSM的Web聊天系统设计，包含登录验证、个人信息展示、设置功能、注销、聊天界面、在线用户列表以及图灵机器人集成。详细设计了登录、聊天主界面和功能栏模块，展示了如何利用AmazeUI、Layer和JQuery进行前端开发。
文章目录
前言
Hi，同学们好呀，学长今天带大家复盘一个学长帮往届同学做的一个毕业作品
基于SSM的Web聊天系统
1 课题背景
随着当今社会经济的飞速发展和地球村的建设，现在的人们在平常的生活中由于平常的工作生活等原因，造成了许多亲朋长时间无法见面的情况。沟通交流的缺失造成了许多人感情的淡薄。而在现在飞速发展的网络技术的支持下，越来越多的人选择通过网络即时通讯系统来进行每天的沟通，常用的PC端的QQ，移动端的微信等。然而现在流行的通讯软件大多都需要下载安装专用的客户端才能实现通讯。
2 系统设计方案
解用户的需求才能够做出让用户使用起来满意的产品。经过需求分析和实际使用现在市面上现有的web通讯软件，决定将整个系统分为登陆页面，聊天页面，个人信息页面，设置页面，系统日志查看页面,在线用户页面。
2.1 登陆
用户通过注册功能获得注册账号，然后通过登陆功能进行登陆，只有登陆成功才能进入主页面，否则返回登陆界面。
2.2 个人信息页面
展示用户的个人信息，包括：昵称，性别，年龄，简介，注册时间，最近登录时间。能够实时根据用户在设置界面修改的信息更新对应的信息。
2.3 设置页面
设置通过一个下拉弹窗包括了个人设置和系统设置两个部分。个人设置展示用户基本信息，能够实现修改头像，修改密码修改基本信息等功能。系统设置展示系统基本设置，能够实现修改头像，修改密码，修改系统设置等功能。
2.4 注销页面
注销页面注销当前用户登陆，返回到登陆界面。
2.5 用户页面
用户页面包括用户资料，设置，注销功能。分别展示用户资料，用户设置，注销返回登陆。
2.6 聊天页面
聊天页面包括展示聊天信息，当前输入信息，发送对象，链接服务，断开服务，检查链接，清理聊天信息，发送输入信息。
2.7 在线列表页面
在线列表页面显示当前连接的用户信息，可对用户发起私聊。
2.8 图灵机器人功能
通过图灵提供的API端口实现聊天中引入图灵机器人和用户进行对话。
3 详细设计
学长通过SSM框架和JSP,前端的设计使用了Amaze UI，弹窗和分页使用了Layer和JQuery。首先，在进行开发之前，先将Amaze UI, Laye以及JQuery下载下来，导入进入工程中。
3.1 用户登录界面
用户登录界面是用户进入系统的第一步，所以一定要有特色，能够第一时间抓住用户的眼球，产生使用的欲望。
整体登录界面的账号密码验证交由控制器LoginController来进行，通过@RequestMapping(value = “/login”, method = RequestMethod.POST)来获取表单数据，进行判断，跳转到对应页面。
@RequestMapping(value = "/login", method = RequestMethod.POST)
public String login(String userid, String password, HttpSession session, RedirectAttributes attributes,
WordDefined defined, CommonDate date, LogUtil logUtil, NetUtil netUtil, HttpServletRequest request) {
String ip=netUtil.getIpAddress(request);
User user = userService.selectUserByUserid(userid);
if (user == null) {
attributes.addFlashAttribute("error", defined.LOGIN_USERID_ERROR);
return "redirect:/user/login";
} else {
if (!user.getPassword().equals(password)) {
attributes.addFlashAttribute("error", defined.LOGIN_PASSWORD_ERROR);
return "redirect:/user/login";
} else {
if (user.getStatus() != 1) {
attributes.addFlashAttribute("error", defined.LOGIN_USERID_DISABLED);
return "redirect:/user/login";
} else {
logService.insert(logUtil.setLog(userid, date.getTime24(), defined.LOG_TYPE_LOGIN, defined.LOG_DETAIL_USER_LOGIN, netUtil.getIpAddress(request)));
session.setAttribute("userid", userid);
session.setAttribute("login_status", true);
user.setLasttime(date.getTime24());
user.setIp(ip);
userService.update(user);
attributes.addFlashAttribute("message", defined.LOGIN_SUCCESS);
return "redirect:/chat";
}
}
}
}
验证账号密码成功之后，通过return “redirect:/caht”来进入聊天界面。 登录界面效果图如图
3.2 用户聊天主界面
主聊天界面主要分为四个部分，分别是顶部的状态栏模块，左侧的功能栏模块，右侧的用户列表栏模块以及中央的聊天栏模块。本部分将对这三个部分进行详细的描述并给出关键实现代码。聊天主界面如图所示。
3.3 状态栏模块
顶部状态栏主要用于显示应用的名称以及右侧的导航下拉菜单。下拉菜单包括个人资料，设置，注销三个功能。由于考虑到这一栏需要一直显示在页面最顶部，所以我将其单独写入了一个JSP文件中，其后的都直接引用该文件达到这个效果。具体代码如下：
<button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>
...
<ul class="am-dropdown-content">
<li><a href="${ctx}/${userid}"><span class="am-icon-user"></span> 资料</a></li>
<li><a href="${ctx}/${userid}/config"><span class="am-icon-cog"></span> 设置</a></li>
<li><a href="${ctx}/user/logout"><span class="am-icon-power-off"></span> 注销</a></li>
</ul>
...
3.4 功能栏模块
功能栏主要有显示个人信息，个人设置和系统设置，查看系统日志，获取帮助，关于和注销功能。整个功能栏的主要思路就是通过${user.**}来获取用户对应的字段的值。再在jsp中展示出来。
3.4.1 个人信息展示功能
根据用户的userid在数据库查询出相应的信息，再通过ModelAndView selectUserByUserid()方法展示出来。效果如图所示：
3.4.2 个人设置功能
个人设置功能能够在其中修改用户的昵称，性别，年龄以及个性签名。修改完成后点击提交就可以完成更新。修改头像可以修改用户的头像。修改密码能够修改用户的登陆密码，用户输入当前密码再输入新密码，验证旧密码成功后即可以完成密码的修改。其中比较重要的功能为修改用户的头像。用户的头像可以在个人资料，聊天信息框中均可展示。所以这个实时根据用户的选择更新还是比较重要的。基本思路就是首先我们上传的只能是图片文件，即后缀为"bmp",“jpg”,“gif”,"png"的文件，那么首先要通过下列代码：
var format = ["bmp","jpg","gif","png"];
var filename = $("#file").val();
var ext = filename.substring(filename.lastIndexOf('.') + 1).toLowerCase();
来获得选择的文件的后缀名，在通过jQuery.inArray(ext,format)函数来进行对比即可。如果其值不等于-1，则说明文件格式正确，否则通过layer.msg()函数来显示提示信息。最后在通过下面的代码将文件进行更新即可。
$(function() {
$('#file').on('change', function() {
var fileNames = '';
$.each(this.files, function() {
fileNames += '<span class="am-badge">' + this.name + '</span> ';
});
$('#file-list').html(fileNames);
});
});
4.4 用户列表模块
在进入用户聊天模块之后，用户可以在消息输入框中输入消息进行群发或者给指定的在线用户发送私聊。那么，前后台的数据交互就要有一定的格式了。经过分析，对于用户之间传递的信息可以分为聊天信息和提示信息两种，聊天信息就是用户发送的信息，可以使全局广播或是指定发送。二提示信息则是用户登录或者登出是的提示信息，这个必须是全局广播让所有在线用户接收到。能够相应的更新在线列表。定义前后台的数据交互格式如下：
"message" : {
"from" : "xxx",
"to" : "xxx",
"content" : "xxxxxx",
"time" : "xxxx.xx.xx"
},
"type" : {
"xxx"
},
"list" : {
["xx","xx"]
}
其中,message是消息部分,from是发信人用户名,to是收信人用户名(如果是群聊则置空),content是消息内容,time是发送时间,这里发信时间是前台JS获取,from和to都是直接用用户名而不是昵称。
type是消息类型,分为两种,notice和message.notice是提示类型,比如xxx用户加入了聊天室,xxx用户离开了聊天室;message是消息类型,就是用户之间发送的消息。对于这两类的处理代码如下：
function analysisMessage(message){
message = JSON.parse(message);
if(message.type == "message"){ //会话消息
showChat(message.message);
}
if(message.type == "notice"){ //提示消息
showNotice(message.message);
}
if(message.list != null && message.list != undefined){ //在线列表
showOnline(message.list);
}
}
list是当前在线的用户名的列表,只在后台触发onopen和onclose时返回list,然后更新前台的在线列表,实现实时的列表展示。实现代码如下：
function showOnline(list){
$("#list").html(""); //清空在线列表
$.each(list, function(index, item){ //添加私聊和视频按钮
var li = "<li>"+item+"</li>";
if('${userid}' != item){ //排除自己
li = "<li>"+item+" <button type=\"button\" class=\"am-btn am-btn-xs am-btn-primary am-round\" οnclick=\"addChat('"+item+"');\"><span class=\"am-icon-phone\"><span> 私聊</button>"
+"<button type=\"button\" class=\"am-btn am-btn-xs am-btn-primary am-round\" οnclick=\"startVideo('item');\"><span class=\"am-icon-phone\"><span> 视频</button></li>";
}
$("#list").append(li);
});
$("#onlinenum").text($("#list li").length); //获取在线人数
}
当获取到对方发送过来的数据时，通过JSonObject的put方法进行操作，再返回该对象给前台就可以显示出来了。方法如下：
public String getMessage(String message, String type, List list){
JSONObject member = new JSONObject();
member.put("message", message);
member.put("type", type);
member.put("list", list);
return member.toString();
}
扫一扫
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
