基于SpringBoot+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网页在线聊天室的资料请关注脚本之家其它相关文章!
相关文章
关于@ApiImplicitParams、ApiImplicitParam的使用说明
这篇文章主要介绍了关于@ApiImplicitParams、ApiImplicitParam的使用说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2021-10-10
SpringBoot项目启动失败:APPLICATION FAILED TO START的
文章介绍了在使用Spring Boot 4.0.0版本时遇到的Mapper文件找不到的问题,并通过将依赖版本切换到3.5.7来解决问题,此外,文章还提供了关于Spring Boot新版本使用注意事项的总结,包括版本兼容性、配置变更、新特性、迁移建议和常见问题,需要的朋友可以参考下2025-11-11


最新评论