WebSocket实现聊天功能

使用SpringBoot + WebSocket 实现模拟QQ聊天功能

登录界面展示

登录界面模仿QQ登录操作，支持拖动、最小化和关闭

聊天界面展示

登录后的右侧显示在线用户，右下方显示在线用户的登录日志
窗口支持拖动、关闭操作

发送消息界面展示

在线用户实现及时聊天功能，可以对指定用户发起聊天（实现点对点的消息推送功能）
支持消息的本地缓存，聊天内容不会因为页面的刷新、关闭、退出登录等操作而丢失（消息只是做了简单缓存），清理浏览器缓存数据时消息数据便会丢失。

点对点消息推送，实现一对一的即时通信功能

Demo的目录代码

该Demo主要使用的是 SpringBoot + WebSocket 技术实现

下面是Demo的后端代码实现及说明

创建SpringBoot项目，导入依赖

项目pom依赖配置

	
		1.8
		1.8
		1.8
		UTF-8
		UTF-8
	

	
		
		
			org.springframework.boot
			spring-boot-starter-web
		

		
		
			org.springframework.boot
			spring-boot-starter-websocket
		

		
		
			org.springframework.boot
			spring-boot-devtools
			true
			true
		

		
		
			org.apache.commons
			commons-lang3
		
        
        
			cn.hutool
			hutool-all
			5.7.16
		

		
		
			org.slf4j
			slf4j-api
		
		
			org.slf4j
			slf4j-log4j12
		

		
		
			com.alibaba
			fastjson
			1.2.55
		
	

	
		
		
			
				org.springframework.boot
				spring-boot-maven-plugin
			
		
	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

项目配置文件说明

application.properties

# 项目名称
spring.application.name=websocket-chatroom
# 配置资源路径
spring.resource.static-locations=classpath:/static/
# 视图前缀配置
spring.mvc.view.prefix=/chat/
# 视图后缀配置
spring.mvc.view.suffix=.html
###########################【热部署】#########################
# 重启目录
spring.devtools.restart.additional-paths=src/main/java
# 设置开启热部署
spring.devtools.restart.enabled=true
# 设置字符集
spring.freemarker.charset=utf-8
# 页面不加载缓存,修改后立即生效
spring.freemarker.cache=false
# 服务端口配置
server.port=80
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

application.yml

spring:
  resource:
    static-locations: classpath:/static/    
  application:
    name: websocket-chatroom
  mvc:
    view:
      suffix: .html
      prefix: /chat/
  devtools: 
    restart:
      additional-paths: src/main/java
      enabled: true
  freemarker: 
    charset: utf-8
    cache: false
server:
  port: 80
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

项目的配置类说明

WebConfig.java

WebConfig 配置类

配置后项目启动时，访问默认项目路径时，会跳转到该类指定的页面中

/**
 * @title web配置类 设置默认访问页面
 * @author 陌路
 * @date 2022-04-16
 * @apiNote 配置默认页面
 */
@Configuration
public class WebConfig implements WebMvcConfigurer {
	/**
	 * 自定义静态路径，spring.resource.static-locations=classpath:/static/
	 */
	@Override
	public void addViewControllers(ViewControllerRegistry registry) {
		registry.addViewController("/").setViewName("/chat/login");
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

WebSocketConfig.java

使用WebSocket前首先配置 @ServerEndpoint

• 首先需要注入 ServerEndpointExporter ，

• 这个bean会自动注册使用 @ServerEndpoint 注解来声明WebSocket endpoint。

• 注意：如果使用独立的Servlet容器，而不是直接使用SpringBoot内置容器，就不需要注入 ServerEndpointExporter，因为他将由容器自己提供和管理。

/**
 * @Desc 	首先需要注入 ServerEndpointExporter ， 
 * 			这个bean会自动注册使用 @ServerEndpoint 的注解来声明WebSocket endpoint。
 *     注意：如果使用独立的Servlet容器，而不是直接使用SpringBoot内置容器，就不需要注入
 *       	ServerEndpointExporter，因为他将有容器自己提供和管理。
 * @author 陌路
 * @date 2022-04-16
 */
@Configuration
public class WebSocketConfig {
	/**
	 * @title 扫描注册使用 @ServerEndpoint 注解的类
	 */
	@Bean
	public ServerEndpointExporter serverEndpointExporter() {
		return new ServerEndpointExporter();
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

GetHttpSessionConfigurator.java

该类可以在建立连接后存放HttpSession，方便后续的使用

用户建立连接时，通过 EndpointConfig 获取存在 session 中的用户数据

/**
 * @tite 用来获取HttpSession对象.
 * @author 陌路
 * @date 2022-04-16
 */
public class GetHttpSessionConfigurator extends ServerEndpointConfig.Configurator {
	/**
	 * @title 该配置可以在不手动传入HttpSession的情况下在websocket服务类中使用
	 */
	@Override
	public void modifyHandshake(ServerEndpointConfig sec, 
                                HandshakeRequest request, 
                                HandshakeResponse response) {
		// 获取httpsession对象
		HttpSession httpSession = (HttpSession) request.getHttpSession();
		// 存放httpsession对象
		Map userProperties = sec.getUserProperties();
		userProperties.put(HttpSession.class.getName(), httpSession);
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

创建用户对象实体

/**
 * (User)实体类
 * @author 陌路
 * @since 2022-04-16
 */
@Data
public class User implements Serializable {
    private static final long serialVersionUID = -31513108721728277L;
    /** 用户id */
	private String userId;
    /**  用户名 */
    private String username;
    /** 用户手机号 */
    private String phone;
    /** 用户密码 */
    private String password;
    public User(String userId, String username, 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16