nahida
/
zksy-website-service


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
							<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>客服聊天测试</title>
    <style>
        body {
            font-family: sans-serif;
        }

        #messages {
            border: 1px solid #ccc;
            height: 300px;
            overflow-y: auto;
            padding: 8px;
        }

        #typingIndicator {
            color: gray;
            font-style: italic;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<h2>客服聊天测试</h2>
<div id="messages"></div>
<div id="typingIndicator"></div>
<input type="text" id="msgInput" placeholder="输入消息"/>
<button onclick="sendMessage()">发送</button>
<input type="text" id="adminId" placeholder="输入客服ID"/>

<script>
    const userId = prompt("请输入您的用户ID");
    fetch('/chat/getToken', {
        method: "GET"
    }).then(response => response.json())
        .then(token => {
            const customInfo = { token: token.data };

            const queryParams = new URLSearchParams();
            Object.entries(customInfo).forEach(([key, value]) => {
                queryParams.append(key, value);
            });

            const wsUrl = `ws://localhost:8081/ws?${queryParams.toString()}`;
            const ws = new WebSocket(wsUrl);

            const messagesDiv = document.getElementById("messages");
            const typingIndicator = document.getElementById("typingIndicator");

            let typingTimeout = null; // 停止输入的定时器
            let lastTypingSent = 0;   // 防抖用
            const TYPING_INTERVAL = 500; // 最小间隔
            const STOP_DELAY = 2000; // 超过2秒没输入则发送 stop

            ws.onopen = () => {
                console.log("已连接");
                ws.send(JSON.stringify({from: userId, type: "login", role: "user"}));
            };

            ws.onmessage = (e) => {
                const msg = JSON.parse(e.data);

                if (msg.type === "typing") {
                    typingIndicator.textContent = msg.from + " 正在输入...";
                } else if (msg.type === "typingStop") {
                    typingIndicator.textContent = "";
                } else if (msg.type === "chat") {
                    const p = document.createElement("p");
                    p.textContent = msg.from + ": " + msg.content;
                    messagesDiv.appendChild(p);
                    typingIndicator.textContent = ""; // 收到消息时清掉 typing
                }
            };

            window.sendMessage = function () {
                const input = document.getElementById("msgInput");
                const content = input.value;
                if (content.trim()) {
                    const adminIdInput = document.getElementById("adminId");
                    const toAdminId = adminIdInput.value.trim();
                    ws.send(JSON.stringify({
                        from: userId,
                        to: toAdminId,
                        type: "chat",
                        content: content,
                        role: "user"
                    }));
                    input.value = "";
                }
            };

            // 🔥 监听输入框 typing
            const input = document.getElementById("msgInput");
            input.addEventListener("input", () => {
                const now = Date.now();
                if (now - lastTypingSent > TYPING_INTERVAL) {
                    const adminIdInput = document.getElementById("adminId");
                    const toAdminId = adminIdInput.value.trim();
                    ws.send(JSON.stringify({
                        from: userId,
                        to: toAdminId,
                        type: "typing",
                        role: "user"
                    }));
                    lastTypingSent = now;
                }

                // 重置停止输入的定时器
                if (typingTimeout) clearTimeout(typingTimeout);
                typingTimeout = setTimeout(() => {
                    const adminIdInput = document.getElementById("adminId");
                    const toAdminId = adminIdInput.value.trim();
                    ws.send(JSON.stringify({
                        from: userId,
                        to: toAdminId,
                        type: "typingStop",
                        role: "user"
                    }));
                }, STOP_DELAY);
            });
        })
        .catch(error => {
            console.error('获取token失败:', error);
            alert('获取token失败，无法建立连接');
        });
</script>
</body>
</html>