您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 綜合教學

WebSocket 實戰：基於 JavaWeb + Tomcat 打造即時通訊 Demo

編輯：Java 綜合教學

WebSocket 實戰：基於 JavaWeb + Tomcat 打造即時通訊 Demo

在專案開發中，常遇到這類場景：前端發起請求後，後端需分多個步驟處理，且每個步驟耗時不定。若採用 AJAX 輪詢獲取即時數據，不僅浪費客戶端與伺服器資源，延遲也難以接受。此時，WebSocket 的長連接特性成為最佳解決方案——它能保持連接常開，雙向實時收發數據，無需頻繁建立/銷毀連接。

核心概念：三大生命週期事件

WebSocket 通訊雙方（客戶端/伺服端）均可監聽三類基礎事件：

onopen：連接建立成功觸發
onmessage：收到數據觸發
onclose：連接關閉觸發

伺服端實作（Tomcat 7.0+）

本 Demo 使用 Eclipse 建立 Web Project，需在 WEB-INF/lib 引入 Tomcat 7 的兩個核心 JAR：

tomcat7-websocket.jar
websocket-api.jar

1. 掃描配置類 `ApplicationConfig`

實作 ServerApplicationConfig 接口，負責掃描 @ServerEndpoint 註解：

package cn.test.websocket;

import java.util.Set;
import javax.websocket.Endpoint;
import javax.websocket.server.ServerApplicationConfig;
import javax.websocket.server.ServerEndpointConfig;

public class ApplicationConfig implements ServerApplicationConfig {

    @Override
    public Set<Class<?>> getAnnotatedEndpointClasses(Set<Class<?>> scan) {
        System.out.println("scan WebSocket: " + scan.size());
        return scan; // 可在此過濾特定類
    }

    @Override
    public Set<ServerEndpointConfig> getEndpointConfigs(Set<Class<? extends Endpoint>> arg0) {
        return null; // 註解模式下無需實作
    }
}

2. 業務處理類 `EchoSocket`

以 @ServerEndpoint("/echo") 定義訪問路徑，處理連接、收發、錯誤等事件：

package cn.test.websocket;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/echo")
public class EchoSocket {

    @OnOpen
    public void open(Session session, EndpointConfig config) {
        System.out.println(session.getId() + " 連接建立");
    }

    @OnClose
    public void close(Session session, CloseReason reason) {
        System.out.println(session.getId() + " 連接關閉: " + reason);
    }

    @OnMessage
    public void message(Session session, boolean last, String msg) {
        System.out.println("收到客戶端訊息: " + msg);
        try {
            session.getBasicRemote().sendText("ni hao too");
            Thread.sleep(3000); // 模擬異步處理延遲
            session.getBasicRemote().sendText("ni hao too twice");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @OnError
    public void error(Session session, Throwable error) {
        System.out.println("異常 Session ID: " + session.getId());
        error.printStackTrace();
    }

    public EchoSocket() {
        System.out.println("Socket 實例建立 - 驗證實例隔離性");
    }
}

客戶端頁面 (index.jsp)

簡單的 HTML + JavaScript 即可建立 WebSocket 連線並收發訊息：

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Demo</title>
</head>
<body>
    <button onclick="subOpen()">建立連線</button><br/>
    <input type="text" id="msg" placeholder="輸入訊息"><br/>
    <button onclick="send()">發送</button>
    <div id="div" style="margin-top:10px; color:blue;"></div>

    <script>
        var ws;
        var target = "ws://127.0.0.1:8080/WebSocket/echo";

        function subOpen() {
            if ('WebSocket' in window) {
                ws = new WebSocket(target);
            } else if ('MozWebSocket' in window) {
                ws = new MozWebSocket(target);
            } else {
                alert("瀏覽器不支援 WebSocket");
                return;
            }

            ws.onmessage = function(event) {
                document.getElementById("div").innerHTML = event.data;
                console.log("收到回應:", event);
            };
            ws.onopen = function() { console.log("連線已開啟"); };
            ws.onclose = function() { console.log("連線已關閉"); };
        }

        function send() {
            var msg = document.getElementById("msg").value;
            if (msg && ws) {
                ws.send(msg);
                document.getElementById("msg").value = "";
            }
        }
    </script>
</body>
</html>