<!DOCTYPE html>
<html lang="zh-CN">
<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;
}
.container {
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
}
h1, h2 {
color: #333;
}
input, button {
padding: 8px;
margin: 5px;
border-radius: 3px;
border: 1px solid #ccc;
}
button {
background-color: #007bff;
color: white;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#messages {
height: 300px;
overflow-y: auto;
border: 1px solid #eee;
padding: 10px;
background-color: #f9f9f9;
margin-top: 10px;
}
.message {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
}
.sent {
background-color: #d1ecf1;
text-align: right;
}
.received {
background-color: #f8d7da;
}
.status {
font-weight: bold;
margin: 10px 0;
}
.connected {
color: green;
}
.disconnected {
color: red;
}
</style>
</head>
<body>
<h1>模拟WebSocket通信</h1>
<div class="container">
<h2>连接控制</h2>
<button id="connectBtn">连接</button>
<button id="disconnectBtn">断开</button>
<div id="status" class="status disconnected">未连接</div>
</div>
<div class="container">
<h2>消息发送</h2>
<input type="text" id="messageInput" placeholder="输入消息..." />
<button id="sendBtn">发送</button>
</div>
<div class="container">
<h2>消息记录</h2>
<div id="messages"></div>
</div>
<script>
// 模拟WebSocket对象
class MockWebSocket {
constructor(url) {
this.url = url;
this.readyState = 0; // CONNECTING
this.onopen = null;
this.onmessage = null;
this.onclose = null;
this.onerror = null;
// 模拟连接过程
setTimeout(() => {
this.readyState = 1; // OPEN
if (this.onopen) {
this.onopen(new Event('open'));
}
}, 1000);
}
send(data) {
if (this.readyState !== 1) {
if (this.onerror) {
this.onerror(new Error('WebSocket未连接'));
}
return;
}
// 模拟服务器响应(回显消息)
setTimeout(() => {
if (this.onmessage) {
// 创建模拟的消息事件
const messageEvent = {
data: `服务器回复: ${data}`,
type: 'message'
};
this.onmessage(messageEvent);
}
}, 500);
}
close() {
this.readyState = 3; // CLOSED
if (this.onclose) {
this.onclose(new CloseEvent('close'));
}
}
}
// DOM元素
const connectBtn = document.getElementById('connectBtn');
const disconnectBtn = document.getElementById('disconnectBtn');
const sendBtn = document.getElementById('sendBtn');
const messageInput = document.getElementById('messageInput');
const messagesDiv = document.getElementById('messages');
const statusDiv = document.getElementById('status');
// WebSocket实例
let socket = null;
// 连接按钮事件
connectBtn.addEventListener('click', () => {
if (socket && socket.readyState === 1) {
addMessage('已经连接到服务器', 'received');
return;
}
// 创建模拟WebSocket连接
socket = new MockWebSocket('ws://mock-server');
socket.onopen = (event) => {
statusDiv.textContent = '已连接';
statusDiv.className = 'status connected';
addMessage('已连接到服务器', 'received');
};
socket.onmessage = (event) => {
addMessage(event.data, 'received');
};
socket.onclose = (event) => {
statusDiv.textContent = '未连接';
statusDiv.className = 'status disconnected';
addMessage('与服务器断开连接', 'received');
};
socket.onerror = (error) => {
addMessage(`发生错误: ${error.message}`, 'received');
};
});
// 断开按钮事件
disconnectBtn.addEventListener('click', () => {
if (socket) {
socket.close();
socket = null;
}
});
// 发送按钮事件
sendBtn.addEventListener('click', () => {
sendMessage();
});
// 回车发送消息
messageInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage();
}
});
// 发送消息函数
function sendMessage() {
const message = messageInput.value.trim();
if (message && socket) {
socket.send(message);
addMessage(message, 'sent');
messageInput.value = '';
} else if (!socket) {
addMessage('请先连接到服务器', 'received');
}
}
// 添加消息到显示区域
function addMessage(message, type) {
const messageElement = document.createElement('div');
messageElement.className = `message ${type}`;
messageElement.textContent = message;
messagesDiv.appendChild(messageElement);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
}
</script>
</body>
</html>
html模拟websocket通信
夏天想2025-08-18 8:32
相关推荐
木易 士心1 小时前
Ref 和 Reactive 响应式原理剖析与代码实现程序员博博1 小时前
概率与决策 - 模拟程序让你在选择中取胜被巨款砸中1 小时前
一篇文章讲清Prompt、Agent、MCP、Function Callingsophie旭1 小时前
一道面试题,开始性能优化之旅(1)-- beforeFetchCache技术分享1 小时前
204. Java 异常 - Error 类:表示 Java 虚拟机中的严重错误uhakadotcom1 小时前
execjs有哪些常用的api,如何逆向分析网站的加签机制ObjectX前端实验室1 小时前
【图形编辑器架构】:无限画布标尺与网格系统实现解析你的电影很有趣2 小时前
lesson71:Node.js与npm基础全攻略:2025年最新特性与实战指南闲蛋小超人笑嘻嘻2 小时前
find数组方法详解||Vue3 + uni-app + Wot Design(wd-picker)使用自定义插槽内容写一个下拉选择器小牛itbull2 小时前
初始化electron项目运行后报错 electron uninstall 解决方法