從今天開(kāi)始帶你從零到一實(shí)現(xiàn)一套前后端分離、登錄攔截、實(shí)時(shí)消息推送的網(wǎng)頁(yè)聊天室系統(tǒng)。包含完整架構(gòu)、數(shù)據(jù)庫(kù)設(shè)計(jì)、登錄認(rèn)證、WebSocket 通信、全局異常處理

一、項(xiàng)目整體架構(gòu)概覽

項(xiàng)目采用經(jīng)典 Spring Boot 后端 + 原生前端 架構(gòu)，輕量、易跑、邏輯清晰。

瀏覽器頁(yè)面
  ├── login.html    登錄頁(yè)
  ├── register.html 注冊(cè)頁(yè)
  └── client.html   聊天主界面
↓ HTTP / WebSocket
Spring Boot 后端
  ├── Controller    接口層（用戶/好友/消息/會(huì)話）
  ├── Interceptor   登錄攔截器
  ├── Exception     全局異常處理
  ├── WebSocket     實(shí)時(shí)消息推送
  └── MyBatis       數(shù)據(jù)持久層
↓ MySQL
用戶表、好友表、會(huì)話表、消息表、會(huì)話用戶關(guān)聯(lián)表

核心能力

• 登錄/注冊(cè) + Session 狀態(tài)保持
• 登錄攔截保護(hù)接口，未登錄無(wú)法訪問(wèn)
• 單聊/會(huì)話模式
• WebSocket 實(shí)時(shí)消息收發(fā)
• 在線用戶管理
• 全局統(tǒng)一返回與異常處理

二、前端頁(yè)面與交互設(shè)計(jì)

前端使用 原生 HTML + JS + jQuery，無(wú)框架、無(wú)打包、直接運(yùn)行。

1. 登錄頁(yè)面 login.html

• 用戶名/密碼輸入
• 表單 POST 提交到 /login 接口
• 登錄成功跳轉(zhuǎn)到 client.html
• 登錄失敗提示“請(qǐng)先登錄”

2. 聊天主界面 client.html

左側(cè)：

• 個(gè)人信息展示
• 搜索框
• 會(huì)話列表 / 好友列表切換
• 會(huì)話/好友列表展示

右側(cè)：

• 消息展示區(qū)（左右氣泡）
• 消息輸入框 + 發(fā)送按鈕
• WebSocket 實(shí)時(shí)收發(fā)消息

3. 前端狀態(tài)管理

• 登錄狀態(tài)：HttpSession 維持
• 實(shí)時(shí)通信：new WebSocket(ws://host/WebSocketMessage)
• 頁(yè)面切換：通過(guò) class 控制 show/hide
• 消息列表：動(dòng)態(tài) DOM 拼接

三、后端技術(shù)棧

• Spring Boot 3.x
• Spring WebSocket
• MyBatis
• MySQL
• Tomcat 內(nèi)嵌容器
• 統(tǒng)一返回體 + 全局異常處理

四、核心功能實(shí)現(xiàn)詳解

1. 登錄認(rèn)證與 Session 機(jī)制

登錄接口邏輯：

@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
• 后續(xù)請(qǐng)求通過(guò) Cookie 自動(dòng)攜帶 SessionID

2. 登錄攔截器（核心）

你之前寫的攔截器，保護(hù)需要登錄的接口：

@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("請(qǐng)先登錄");
        return false;
    }
    return true;
}

攔截路徑

• /friendList
• /message
• /sessionList
• /session

放行路徑

• /login
• /register
• /WebSocketMessage
• /**.html 靜態(tài)頁(yè)面

3. WebSocket 實(shí)時(shí)消息

核心流程：

1. 用戶登錄成功
2. 前端建立 WebSocket 連接
3. 后端把用戶 ID → Session 存入 ConcurrentHashMap（線程安全）
4. 發(fā)送消息時(shí)，后端查詢會(huì)話內(nèi)所有用戶
5. 逐個(gè)推送消息給在線用戶
6. 消息落庫(kù)保存歷史記錄

// 在線用戶管理（線程安全）
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 找不到頁(yè)面（包括 favicon.ico）
• 用戶名重復(fù)
• 空指針
• 服務(wù)器內(nèi)部錯(cuò)誤

@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("服務(wù)器異常");
    }
}

作用：避免瀏覽器自動(dòng)請(qǐng)求 favicon.ico 觸發(fā)登錄攔截器瘋狂報(bào)錯(cuò)。

五、數(shù)據(jù)庫(kù)設(shè)計(jì)（5張表標(biāo)準(zhǔn)聊天結(jié)構(gòu)）

• user 用戶表：userId, username, password
• friend 好友關(guān)系表：userId, friendId
• message_session 會(huì)話表：sessionId, lastTime
• message_session_user 會(huì)話-用戶關(guān)聯(lián)表
• message 消息表：messageId, fromId, sessionId, content, postTime

標(biāo)準(zhǔn)多對(duì)多、會(huì)話隔離、消息可追溯設(shè)計(jì)。

六、項(xiàng)目運(yùn)行與訪問(wèn)地址

啟動(dòng) Spring Boot 后直接訪問(wèn)：

• 登錄：http://localhost:8080/login.html
• 注冊(cè)：http://localhost:8080/register.html
• 聊天：http://localhost:8080/client.html

測(cè)試賬號(hào)

• zhangsan / 123
• lisi / 123

以上就是基于SpringBoot+WebSocket實(shí)現(xiàn)網(wǎng)頁(yè)在線聊天室的詳細(xì)內(nèi)容，更多關(guān)于SpringBoot WebSocket網(wǎng)頁(yè)在線聊天室的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論