基於 Tomcat 7 的 WebSocket 聊天室實戰教程：從後端到前端完整實現

前言：為什麼選擇 WebSocket？

傳統的輪詢與長連接技術雖能實現服務器推送，但頻繁的 HTTP 請求會佔用大量伺服器資源，且實時性難以保障。HTML5 WebSocket 提供全雙工通訊，僅需一次握手即可建立持久連接，極大降低開銷，成為即時通訊、實時協作等場景的首選。

技術棧與環境

• 伺服器：Apache Tomcat 7.0.32+（需支援 JSR-356 WebSocket API）
• 後端：Java Servlet + Tomcat 專屬 org.apache.catalina.websocket 實現
• 前端：ExtJS 4 框架 + 原生 WebSocket API
• 依賴：catalina.jar、tomcat-coyote.jar

後端核心實現

1. WebSocket 入口 Servlet

@WebServlet(urlPatterns = {"/message"})
public class WebSocketMessageServlet extends org.apache.catalina.websocket.WebSocketServlet {
    public static int ONLINE_USER_COUNT = 1;

    public String getUser(HttpServletRequest request) {
        return (String) request.getSession().getAttribute("user");
    }

    @Override
    protected StreamInbound createWebSocketInbound(String subProtocol, HttpServletRequest request) {
        return new WebSocketMessageInbound(this.getUser(request));
    }
}

2. 連接處理器 WebSocketMessageInbound

繼承 MessageInbound，覆寫三大生命週期方法：

• onOpen：用戶上線，廣播加入通知，發送當前在線列表給新用戶
• onClose：用戶下線，從連接池移除，廣播離開通知
• onTextMessage：接收聊天消息，廣播給所有在線用戶

3. 連接池 WebSocketMessageInboundPool

使用 Map<String, WebSocketMessageInbound> 管理在線連接，提供：

• addMessageInbound / removeMessageInbound：增刪連接
• sendMessage / sendMessageToUser：廣播與單發
• getOnlineUser：獲取在線用戶列表

前端實現要點

1. 入口頁 index.jsp

若 Session 無用戶則自動生成「游客 + 序號」並存入 Session，隨後載入 ExtJS 與自定義 websocket.js。

2. 核心邏輯 websocket.js

• MessageContainer：基於 Ext.view.View 的消息展示組件，支援自我/遠端消息樣式區分與自動滾動
• Ext.onReady：初始化 WebSocket 連接（ws://localhost:8080/WebSocket/message），綁定 onopen/onerror/onclose/onmessage 事件
• 消息類型處理：message（聊天）、get_online_user（初始列表）、user_join/leave（上下線動態更新用戶樹）
• 發送邏輯：Ctrl+Enter 或按鈕觸發，封裝 JSON 經 websocket.send() 發送

部署避坑指南

1. 移除部署目錄下的衝突 JAR：將 Tomcat webapps/項目/WEB-INF/lib 下的 catalina.jar、tomcat-coyote.jar 刪除，否則會拋出 Could not initialize class WebSocketMessageServlet。
2. Tomcat 版本兼容：7.0.3xx 及以上版本的 createWebSocketInbound 方法包含 HttpServletRequest 參數，舊版本無此參數，需下載對應版本 Tomcat。

總結與擴展

本例展示了基於 Tomcat 原生 WebSocket 實現的輕量級聊天室，具備實時推送、用戶狀態感知、ExtJS 豐富界面等特性。後續可結合 Spring WebSocket API 實現跨容器部署，或整合 WebRTC 拓展語音/視頻聊天功能。