前端ws测试代码

6 months ago · 6ba346097a
1 changed files with 79 additions and 0 deletions
--- a/demo/ws_demo.html
+++ b/demo/ws_demo.html
@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WebSocket with STOMP</title>
+    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.5.1/dist/sockjs.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
+</head>
+<body>
+    <h2>WebSocket STOMP Client</h2>
+    <input type="text" id="messageInput" placeholder="Enter your message">
+    <button onclick="sendMessage()">Send</button>
+    <div id="response"></div>
+
+<script>
+    let stompClient = null;
+    let socket = null;
+    const wsUrl = 'http://localhost:8080/ws';  // WebSocket 服务器地址
+    const reconnectInterval = 5000;  // 重连间隔（5秒）
+
+    function connectWebSocket() {
+        console.log("尝试连接 WebSocket...");
+        socket = new SockJS(wsUrl);
+        stompClient = Stomp.over(socket);
+        stompClient.debug = null;  // 关闭调试日志
+
+        stompClient.connect({}, function (frame) {
+            console.log('WebSocket 连接成功:', frame);
+
+            // 订阅服务器的推送消息
+            stompClient.subscribe('/topic/greetings', function (greeting) {
+                const response = document.getElementById('response');
+                response.innerHTML = 'Server says: ' + greeting.body;
+            });
+
+            stompClient.subscribe('/topic/cmd', function (result) {
+                console.log("命令执行反馈:", result.body);
+            });
+
+        }, function (error) {
+            console.error("WebSocket 连接失败:", error);
+            attemptReconnect();
+        });
+
+        // 监听 WebSocket 关闭事件，自动重连
+        socket.onclose = function () {
+            console.warn("WebSocket 连接已断开！");
+            attemptReconnect();
+        };
+    }
+
+    // **重连机制**
+    function attemptReconnect() {
+        if (stompClient !== null) {
+            stompClient.disconnect();
+        }
+        console.log(`将在 ${reconnectInterval / 1000} 秒后尝试重新连接 WebSocket...`);
+        setTimeout(connectWebSocket, reconnectInterval);
+    }
+
+    // **发送消息**
+    function sendMessage() {
+        if (stompClient && stompClient.connected) {
+            const messageInput = document.getElementById('messageInput');
+            const message = messageInput.value;
+            stompClient.send("/app/hello", {}, message);  // 发送消息到 "/app/hello"
+            console.log("消息已发送:", message);
+        } else {
+            console.warn("WebSocket 未连接，无法发送消息！");
+        }
+    }
+
+    // **初始化 WebSocket 连接**
+    connectWebSocket();
+</script>
+
+</body>
+</html>