测试webSocket工具 html_websocket 测试工具-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客服聊天测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 20px;
        }
        #chatBox {
            height: 400px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            margin-bottom: 20px;
            padding: 10px;
            overflow-y: auto;
            background-color: #fafafa;
        }
        .message {
            margin: 10px 0;
            padding: 12px;
            border-radius: 8px;
            max-width: 70%;
            word-wrap: break-word;
        }
        .user-message {
            background-color: #e3f2fd;
            margin-left: auto;
            color: #1565c0;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        .ai-message {
            background-color: white;
            margin-right: auto;
            color: #333;
            border: 1px solid #e0e0e0;
        }
        .system-message {
            background-color: #fff3e0;
            text-align: center;
            margin: 10px auto;
            color: #e65100;
            font-size: 0.9em;
        }
        .error-message {
            background-color: #ffebee;
            text-align: center;
            margin: 10px auto;
            color: #c62828;
        }
        #inputArea {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        #messageInput {
            flex-grow: 1;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        #messageInput:focus {
            outline: none;
            border-color: #1976d2;
        }
        button {
            padding: 12px 24px;
            background-color: #1976d2;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #1565c0;
        }
        button:active {
            transform: scale(0.98);
        }
        #status {
            margin-bottom: 20px;
            padding: 12px;
            border-radius: 8px;
            text-align: center;
            font-weight: bold;
        }
        .connected {
            background-color: #c8e6c9;
            color: #2e7d32;
        }
        .disconnected {
            background-color: #ffcdd2;
            color: #c62828;
        }
        .settings {
            margin-bottom: 20px;
            padding: 15px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .settings label {
            display: block;
            margin-bottom: 8px;
            color: #666;
        }
        .settings input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>客服聊天测试</h1>
        
        <div class="settings">
            <label for="serverUrl">服务器地址：</label>
            <input type="text" id="serverUrl" value="ws://192.168.1.11:8080/jeecg-boot/websocket/customerService/" />
        </div>

        <div id="status" class="disconnected">未连接</div>
        <div id="chatBox"></div>
        <div id="inputArea">
            <input type="text" id="messageInput" placeholder="请输入消息..." />
            <button onclick="sendMessage()">发送</button>
        </div>
    </div>

    <script>
        let ws;
        const userId = 'test_user_' + Math.random().toString(36).substr(2, 9);
        
        function connect() {
            const serverUrl = document.getElementById('serverUrl').value.trim();
            const wsUrl = `${serverUrl}${userId}`;
            
            if (ws) {
                ws.close();
            }

            console.log('正在连接到:', wsUrl);
            ws = new WebSocket(wsUrl);

            ws.onopen = function() {
                document.getElementById('status').className = 'connected';
                document.getElementById('status').textContent = '已连接';
                addMessage('系统', '连接成功', 'system-message');
            };

            ws.onmessage = function(event) {
                console.log('收到消息:', event.data);
                try {
                    const response = JSON.parse(event.data);
                    if (response.type === 'connection') {
                        addMessage('系统', response.content, 'system-message');
                    } else if (response.type === 'chat') {
                        addMessage('AI', response.content, 'ai-message');
                    } else if (response.type === 'error') {
                        addMessage('系统', response.content, 'error-message');
                    }
                } catch (e) {
                    console.error('解析消息失败:', e);
                    addMessage('系统', '收到无效消息格式', 'error-message');
                }
            };

            ws.onclose = function() {
                document.getElementById('status').className = 'disconnected';
                document.getElementById('status').textContent = '已断开连接';
                addMessage('系统', '连接已断开，5秒后重试...', 'system-message');
                setTimeout(connect, 5000);
            };

            ws.onerror = function(error) {
                console.error('WebSocket错误:', error);
                addMessage('系统', '连接错误', 'error-message');
            };
        }

        function sendMessage() {
            const input = document.getElementById('messageInput');
            const message = input.value.trim();
            
            if (message && ws && ws.readyState === WebSocket.OPEN) {
                const data = {
                    type: 'chat',
                    content: message
                };
                console.log('发送消息:', data);
                ws.send(JSON.stringify(data));
                addMessage('用户', message, 'user-message');
                input.value = '';
            } else if (!ws || ws.readyState !== WebSocket.OPEN) {
                addMessage('系统', '未连接到服务器，请等待重连...', 'error-message');
            }
        }

        function addMessage(sender, content, className) {
            const chatBox = document.getElementById('chatBox');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${className}`;
            messageDiv.textContent = `${sender === '系统' ? '' : sender + ': '}${content}`;
            chatBox.appendChild(messageDiv);
            chatBox.scrollTop = chatBox.scrollHeight;
        }

        // 监听回车键
        document.getElementById('messageInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });

        // 监听服务器地址变化
        document.getElementById('serverUrl').addEventListener('change', function() {
            connect(); // 重新连接
        });

        // 页面加载完成后连接WebSocket
        window.onload = connect;
    </script>
</body>
</html>