基于SpringBoot+WebSocket实现网页在线聊天室

 更新时间:2026年05月22日 08:50:10   作者: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 实时消息

核心流程:

  1. 用户登录成功
  2. 前端建立 WebSocket 连接
  3. 后端把用户 ID → Session 存入 ConcurrentHashMap(线程安全)
  4. 发送消息时,后端查询会话内所有用户
  5. 逐个推送消息给在线用户
  6. 消息落库保存历史记录
// 在线用户管理(线程安全)
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网页在线聊天室的资料请关注脚本之家其它相关文章!

相关文章

  • Java利用读写的方式实现音频播放代码实例

    Java利用读写的方式实现音频播放代码实例

    这篇文章主要介绍了Java利用读写的方式实现音频播放代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • Java 泛型总结及详解

    Java 泛型总结及详解

    这篇文章主要介绍了Java 泛型的相关资料,并附简单实例代码,需要的朋友可以参考下
    2016-09-09
  • 关于@ApiImplicitParams、ApiImplicitParam的使用说明

    关于@ApiImplicitParams、ApiImplicitParam的使用说明

    这篇文章主要介绍了关于@ApiImplicitParams、ApiImplicitParam的使用说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-10-10
  • Spring的Bean容器介绍

    Spring的Bean容器介绍

    今天小编就为大家分享一篇关于Spring的Bean容器介绍,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 关于LocalDateTime使用详解

    关于LocalDateTime使用详解

    这篇文章主要介绍了关于LocalDateTime使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • 深入解析Java的WatchService及功能说明

    深入解析Java的WatchService及功能说明

    WatchService是Java NIO用于监控文件系统目录变化的API,支持创建、修改、删除等事件,提供线程安全的注册与监听机制,处理事件溢出及平台依赖性问题,本文给大家深入解析Java的WatchService及功能说明,感兴趣的朋友一起看看吧
    2025-09-09
  • Java并发之不可思议的死循环详解

    Java并发之不可思议的死循环详解

    下面小编就为大家带来一篇Java并发之不可思议的死循环详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • Java的SPI机制实例详解

    Java的SPI机制实例详解

    这篇文章主要介绍了Java的SPI机制实例详解的相关资料,需要的朋友可以参考下
    2017-06-06
  • SpringBoot项目启动失败:APPLICATION FAILED TO START的解决方法

    SpringBoot项目启动失败:APPLICATION FAILED TO START的

    文章介绍了在使用Spring Boot 4.0.0版本时遇到的Mapper文件找不到的问题,并通过将依赖版本切换到3.5.7来解决问题,此外,文章还提供了关于Spring Boot新版本使用注意事项的总结,包括版本兼容性、配置变更、新特性、迁移建议和常见问题,需要的朋友可以参考下
    2025-11-11
  • Java IO API实现获取路径信息并去除冗余信息

    Java IO API实现获取路径信息并去除冗余信息

    这篇文章主要为大家详细介绍了Java IO API实现获取路径信息并去除冗余信息,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2026-03-03

最新评论