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>模拟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>