南理工在线交流群

1.项目介绍

该项目是一款基于websocket协议的在线群聊系统，多个用户可以在对应频道接收发消息，也可以查看历史信息

2.技术栈

ajax+html+css+js+servlet+jdbc+MySql(5.7)+Maven

3.项目展示

1.项目注册页面

2.项目登录页面

3.频道列表显示页面

4.多用户进入频道收发消息页面

1. 用户A的界面
   
2. 用户B的界面
   

4.项目分析

1.需求分析

1：实现用户注册，登录，退出登录功能
2：用户登陆成功之后，进入主页面
3：主页面显示的是当前用户所关注的频道列表
4：点击某个频道之后，就能看见频道里面的消息内容(某个用户在该频道中发消息，所有在线的用户在该频道中都能看到)
5：每个用户都能发送消息
6：还有就是历史消息功能，用户登录上线之后，能够看见从上次下线之后发送的所有历史消息记录，也就是这段之间内错过的消息

2.核心技术：websocket协议

       ~~~~~~       在H5出来之前，消息推送基本上都是使用http请求的，但http请求只能在客户端发起请求之后服务端才会返回消息，而不能在客户端未发起请求时服务端主动推送消息给客户端,websocket协议的出现能够实现服务器主动给客户端推送消息，打破了传统的一问一答的通信模式，在多人聊天系统中需要服务器主动给客户端推送消息，所以在这个项目中使用websocket协议是比较合适的。
       ~~~~~~       websocket协议是基于tcp协议基础上的应用层协议的，客户端中的js代码通过指定的url向服务器发送http请求，发送的http请求头信息中connection的value为upgrade,表示要升级协议，upgrade的value为websocket，表示和服务器协商要升级成websocket协议。服务器收到http请求之后，会返回一个101状态码的响应报文，并且在header中加上一个upgrade字段，value为websocket协议，表示要升级成websocket协议。这样客户端和服务器之间websocket连接就建立成功了。（要想顺利升级成websocket协议，首先要保证客户端和服务器都能支持websocket协议，否则前段new websocket的时候就抛异常不会发送http请求了，现在大部分的浏览器都支持wensocket协议，像火狐，谷歌浏览器，除了ie浏览器不支持）

服务器端：

1：在创建类时，使用@ServerEndpoint注释来指定该类所对应的URL路径
2：实现类的一些方法
2.1：onOpen：连接建立调用
2.2：onMessage：收到消息时调用
2.3：onError：连接异常时调用
2.4：onClose：连接关闭时调用
注意： 以上的方法都是不用程序员自己调用，在合适的时机由Tomcat自己进行调用
session.getBasicRemote().sendText()： 这个方法是需要程序员自己调用的，服务器给客户端发送消息的接口：这个方法只要连接建立好，调用这个方法就能写回数据给客户端，无须客户端先发送请求

客户端：

1：创建websocket对象，同时指定连接服务器的url
2：给websocket对象注册一些方法
2.1：onOpen：连接建立成功是调用
2.2：onMessage：收到消息时调用
2.3：onError：连接异常时调用
2.4：onClose：连接关闭时调用
websocket.send()：给服务器发送消息

3.数据库设计

User:用户信息

@Getter
@Setter
@ToString
public class User extends Response implements Serializable {

    private static final Long serialVersionUID = 1L;

    private Integer userId;
    private String name;
    private String password;
    private String nickName;
    private String iconPath;
    private String signature;
    private java.util.Date lastLogout;//上次登录时间
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Channel:频道信息

@Getter
@Setter
@ToString
public class Channel {
    private Integer channelId;
    private String channelName;
}
1
2
3
4
5
6
7

Message:消息信息

@Getter
@Setter
@ToString
public class Message {
    private Integer messageId;
    private Integer userId;
    private Integer channelId;
    private String content;
    private java.util.Date sendTime;
    //接收客户端发送的消息，转发到所有客户端的消息，需要昵称
    private String nickName;
}
1
2
3
4
5
6
7
8
9
10
11
12

4.前后端接口设计（api）

1.注册
请求：

Post   /register
{
name:XXX,
password: XXX,
nickName:XXX,
signature:XXX
}
1
2
3
4
5
6
7

响应：

HTTP/1.1   200  OK
{
	OK:true
	reason:XXX
	data:XXX
} 
1
2
3
4
5
6

2.登录
请求：

Post    /login
{
	name:XXX,
	password:XXX
}
1
2
3
4
5

响应：

HTTP/1.1   200  OK
{
	OK:true
	reason:XXX
	data:XXX
} 
1
2
3
4
5
6

3.检查登录状态
请求：

Get    /login
1

响应：

HTTP/1.1   200  OK
{
	OK:true
	reason:XXX
	data:XXX
} 
1
2
3
4
5
6

4.退出登录
请求：

Get    /logout
1

响应：

HTTP/1.1   200  OK
{
	OK:true
	reason:XXX
	data:XXX
} 
1
2
3
4
5
6

5.新增频道
请求：

Post    /channel
{
	channelName:XXX,
}
1
2
3
4

响应：

HTTP/1.1   200  OK
{
	OK:true
	reason:XXX
	data:XXX
} 
1
2
3
4
5
6

6.获取频道列表
请求：

Get   /channel
1

响应：

HTTP/1.1   200  OK
{
	OK:true
	reason:XXX
	data:XXX
} 
1
2
3
4
5
6

5.项目测试

使用Junit单元测试框架进行单元测试

对项目的注册以及通过名字查找用户功能进行单元测试

public class UserDAOTest {

    @Test
    public void queryByName() {
        UserDAO userDAO = new UserDAO();
        User user = userDAO.queryByName("杨琳");
        System.out.println(user.getName());
    }

    @Test
    public void add() {
        //1.首先new出包含该测试方法的类
        UserDAO userDAO = new UserDAO();
        //2.然后new对象
        User user = new User();
        user.setNickName("李顺");
        user.setPassword("admin123");
        user.setName("李顺");
        //3.使用这个方法中的对象
        userDAO.add(user);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22