2025.6.2
WebSocket 测试页面
以下是一个简单的 HTML 测试页面，用于测试你的 WebSocket 接口。这个页面允许用户连接 WebSocket，发送消息并接收响应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket 面试测试页面</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
#controls {
margin-bottom: 20px;
}
#connectBtn {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
#disconnectBtn {
background-color: #f44336;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
#startInterviewBtn {
background-color: #2196F3;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}
#endInterviewBtn {
background-color: #ff9800;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}
#messageLog {
height: 300px;
border: 1px solid #ddd;
padding: 10px;
overflow-y: auto;
margin-bottom: 10px;
background-color: #f9f9f9;
}
#messageInput {
width: 70%;
padding: 10px;
margin-right: 10px;
}
#sendBtn {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.message {
margin-bottom: 10px;
padding: 8px;
border-radius: 4px;
}
.received {
background-color: #e3f2fd;
border-left: 4px solid #2196F3;
}
.sent {
background-color: #e8f5e9;
border-left: 4px solid #4CAF50;
}
.system {
background-color: #fff3e0;
border-left: 4px solid #ff9800;
}
.error {
background-color: #ffebee;
border-left: 4px solid #f44336;
}
</style>
</head>
<body>
<h1>WebSocket 面试测试</h1>
<div id="controls">
<input type="text" id="clientId" placeholder="输入客户端ID" value="1">
<button id="connectBtn">连接</button>
<button id="disconnectBtn" disabled>断开连接</button>
<button id="startInterviewBtn" disabled>开始面试</button>
<button id="endInterviewBtn" disabled>结束面试</button>
</div>
<div id="messageLog"></div>
<div>
<input type="text" id="messageInput" placeholder="输入消息..." disabled>
<button id="sendBtn" disabled>发送</button>
</div>
<script>
let socket;
const clientIdInput = document.getElementById('clientId');
const connectBtn = document.getElementById('connectBtn');
const disconnectBtn = document.getElementById('disconnectBtn');
const startInterviewBtn = document.getElementById('startInterviewBtn');
const endInterviewBtn = document.getElementById('endInterviewBtn');
const messageInput = document.getElementById('messageInput');
const sendBtn = document.getElementById('sendBtn');
const messageLog = document.getElementById('messageLog');
// 添加消息到日志
function addMessage(content, type = 'received') {
const messageElement = document.createElement('div');
messageElement.className = `message ${type}`;
messageElement.textContent = content;
messageLog.appendChild(messageElement);
messageLog.scrollTop = messageLog.scrollHeight;
}
// 连接 WebSocket
connectBtn.addEventListener('click', () => {
const clientId = clientIdInput.value.trim();
if (!clientId) {
alert('请输入客户端ID');
return;
}
// 创建 WebSocket 连接
socket = new WebSocket(`ws://localhost:8000/ws/${clientId}`);
socket.onopen = (event) => {
addMessage('WebSocket 连接已建立', 'system');
connectBtn.disabled = true;
disconnectBtn.disabled = false;
startInterviewBtn.disabled = false;
clientIdInput.disabled = true;
// 发送客户端ID
socket.send(clientId);
};
socket.onmessage = (event) => {
try {
const data = JSON.parse(event.data);
if (data.type === 'question') {
addMessage(`AI 问题 (回合 ${data.turn_count}): ${data.content}`, 'received');
messageInput.disabled = false;
sendBtn.disabled = false;
endInterviewBtn.disabled = false;
} else if (data.type === 'end') {
addMessage(`系统: ${data.content}`, 'system');
messageInput.disabled = true;
sendBtn.disabled = true;
startInterviewBtn.disabled = false;
endInterviewBtn.disabled = true;
} else if (data.type === 'error') {
addMessage(`错误: ${data.content}`, 'error');
} else {
addMessage(`服务器: ${event.data}`, 'received');
}
} catch (e) {
addMessage(`服务器: ${event.data}`, 'received');
}
};
socket.onclose = (event) => {
if (event.wasClean) {
addMessage(`连接已关闭，代码=${event.code} 原因=${event.reason}`, 'system');
} else {
addMessage('连接中断', 'error');
}
connectBtn.disabled = false;
disconnectBtn.disabled = true;
startInterviewBtn.disabled = true;
endInterviewBtn.disabled = true;
messageInput.disabled = true;
sendBtn.disabled = true;
clientIdInput.disabled = false;
};
socket.onerror = (error) => {
addMessage(`WebSocket 错误: ${error.message}`, 'error');
};
});
// 断开 WebSocket 连接
disconnectBtn.addEventListener('click', () => {
if (socket) {
socket.close();
}
});
// 开始面试
startInterviewBtn.addEventListener('click', () => {
if (socket && socket.readyState === WebSocket.OPEN) {
const message = {
type: "start_interview"
};
socket.send(JSON.stringify(message));
addMessage('发送: ' + JSON.stringify(message), 'sent');
startInterviewBtn.disabled = true;
}
});
// 结束面试
endInterviewBtn.addEventListener('click', () => {
if (socket && socket.readyState === WebSocket.OPEN) {
const message = {
type: "end_interview"
};
socket.send(JSON.stringify(message));
addMessage('发送: ' + JSON.stringify(message), 'sent');
messageInput.disabled = true;
sendBtn.disabled = true;
startInterviewBtn.disabled = false;
endInterviewBtn.disabled = true;
}
});
// 发送消息
sendBtn.addEventListener('click', () => {
const message = messageInput.value.trim();
if (message && socket && socket.readyState === WebSocket.OPEN) {
const data = {
type: "answer",
content: message
};
socket.send(JSON.stringify(data));
addMessage(`发送答案: ${message}`, 'sent');
messageInput.value = '';
messageInput.disabled = true;
sendBtn.disabled = true;
}
});
// 允许按 Enter 键发送消息
messageInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendBtn.click();
}
});
</script>
</body>
</html>
使用说明
- 将上面的代码保存为
websocket_test.html文件 - 在浏览器中打开该文件
- 输入客户端ID（默认为1）
- 点击"连接"按钮建立WebSocket连接
- 连接成功后，点击"开始面试"按钮开始面试
- 在输入框中回答AI的问题，然后按Enter或点击"发送"按钮
- 面试结束后，点击"结束面试"按钮
- 可以随时点击"断开连接"按钮关闭WebSocket连接
功能说明
- 页面会显示所有发送和接收的消息
- 不同类型的消息有不同的颜色标识：
- 蓝色：接收到的消息（AI问题）
- 绿色：发送的消息（用户回答）
- 橙色：系统消息（连接状态等）
- 红色：错误消息
- 按钮状态会根据连接状态自动更新
这个测试页面模拟了完整的面试流程，包括连接、开始面试、回答问题、结束面试和断开连接等所有功能。
浙公网安备 33010602011771号