基于SpringBoot+WebSocket实现网页在线聊天室
作者：Boop...
文章介绍了从零构建一套前后端分离的网页聊天室系统,涵盖架构设计、数据库设计、登录认证、WebSocket实时消息推送及全局异常处理等核心功能,文章详细描述了前端页面与交互、后端技术栈及核心功能实现、数据库设计等以及项目运行等等内容,需要的朋友可以参考下
从今天开始带你从零到一实现一套前后端分离、登录拦截、实时消息推送的网页聊天室系统。包含完整架构、数据库设计、登录认证、WebSocket 通信、全局异常处理
一、项目整体架构概览
项目采用经典 Spring Boot 后端 + 原生前端 架构，轻量、易跑、逻辑清晰。
浏览器页面 ├── login.html 登录页 ├── register.html 注册页 └── client.html 聊天主界面 ↓ HTTP / WebSocket Spring Boot 后端 ├── Controller 接口层（用户/好友/消息/会话） ├── Interceptor 登录拦截器 ├── Exception 全局异常处理 ├── WebSocket 实时消息推送 └── MyBatis 数据持久层 ↓ MySQL 用户表、好友表、会话表、消息表、会话用户关联表
核心能力
- 登录/注册 + Session 状态保持
- 登录拦截保护接口，未登录无法访问
- 单聊/会话模式
- WebSocket 实时消息收发
- 在线用户管理
- 全局统一返回与异常处理
二、前端页面与交互设计
前端使用 原生 HTML + JS + jQuery，无框架、无打包、直接运行。
1. 登录页面 login.html
- 用户名/密码输入
- 表单 POST 提交到 /login 接口
- 登录成功跳转到 client.html
- 登录失败提示“请先登录”
2. 聊天主界面 client.html
左侧：
- 个人信息展示
- 搜索框
- 会话列表 / 好友列表切换
- 会话/好友列表展示
右侧：
- 消息展示区（左右气泡）
- 消息输入框 + 发送按钮
- WebSocket 实时收发消息
3. 前端状态管理
- 登录状态：HttpSession 维持
- 实时通信：
new WebSocket(ws://host/WebSocketMessage) - 页面切换：通过 class 控制 show/hide
- 消息列表：动态 DOM 拼接
三、后端技术栈
- Spring Boot 3.x
- Spring WebSocket
- MyBatis
- MySQL
- Tomcat 内嵌容器
- 统一返回体 + 全局异常处理
四、核心功能实现详解
1. 登录认证与 Session 机制
登录接口逻辑：
@PostMapping("/login")
public Object login(String username, String password, HttpServletRequest req) {
User user = userMapper.selectByName(username);
if(user == null || !user.getPassword().equals(password)) {
return new User();
}
HttpSession session = req.getSession(true);
session.setAttribute("user", user);
return user;
}- 登录成功把 User 存入 Session
- 后续请求通过 Cookie 自动携带 SessionID
2. 登录拦截器（核心）
你之前写的拦截器，保护需要登录的接口：
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
HttpSession session = request.getSession(false);
if (session == null || session.getAttribute("user") == null) {
response.setContentType("application/json;charset=utf-8");
response.setStatus(401);
response.getWriter().write("请先登录");
return false;
}
return true;
}拦截路径
- /friendList
- /message
- /sessionList
- /session
放行路径
- /login
- /register
- /WebSocketMessage
- /**.html 静态页面
3. WebSocket 实时消息
核心流程：
- 用户登录成功
- 前端建立 WebSocket 连接
- 后端把用户 ID → Session 存入 ConcurrentHashMap（线程安全）
- 发送消息时，后端查询会话内所有用户
- 逐个推送消息给在线用户
- 消息落库保存历史记录
// 在线用户管理（线程安全）
private ConcurrentHashMap<Integer, WebSocketSession> sessions = new ConcurrentHashMap<>();
public void online(int userId, WebSocketSession session) {
sessions.put(userId, session);
}
public WebSocketSession getSession(int userId) {
return sessions.get(userId);
}4. 全局异常处理
专门处理：
- 404 找不到页面（包括 favicon.ico）
- 用户名重复
- 空指针
- 服务器内部错误
@RestControllerAdvice
public class GlobalExceptionHandler {
@ExceptionHandler(NoResourceFoundException.class)
public Result handleNoResource() {
return Result.success(null);
}
@ExceptionHandler(Exception.class)
public Result handleError(Exception e) {
return Result.fail("服务器异常");
}
}作用：避免浏览器自动请求 favicon.ico 触发登录拦截器疯狂报错。
五、数据库设计（5张表标准聊天结构）
- user 用户表：userId, username, password
- friend 好友关系表：userId, friendId
- message_session 会话表：sessionId, lastTime
- message_session_user 会话-用户关联表
- message 消息表：messageId, fromId, sessionId, content, postTime
标准多对多、会话隔离、消息可追溯设计。
六、项目运行与访问地址
启动 Spring Boot 后直接访问：
- 登录：http://localhost:8080/login.html
- 注册：http://localhost:8080/register.html
- 聊天：http://localhost:8080/client.html
测试账号
- zhangsan / 123
- lisi / 123
以上就是基于SpringBoot+WebSocket实现网页在线聊天室的详细内容，更多关于SpringBoot WebSocket网页在线聊天室的资料请关注脚本之家其它相关文章！