[Java项目] Spring Boot + 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