websocket_server.py
import asyncio
import websockets
# 存储所有连接的客户端
connected = set()
# 处理客户端连接的协程函数
async def echo(websocket):
# 将客户端添加到连接集合中
connected.add(websocket)
try:
# 接收客户端消息并广播给所有连接的客户端
async for message in websocket:
print(f"收到消息: {message}")
# 广播消息给所有客户端
await asyncio.gather(
*[client.send(message) for client in connected if client != websocket]
)
finally:
# 客户端断开连接时将其从集合中移除
connected.remove(websocket)
# 主函数：启动 WebSocket 服务器
async def main():
# 监听所有可用 IP 地址，端口为 8765
async with websockets.serve(echo, "0.0.0.0", 8765):
print("WebSocket 服务器已启动，监听在 ws://0.0.0.0:8765")
await asyncio.Future() # 保持服务器运行
if __name__ == "__main__":
asyncio.run(main())
websocket_client.html
<!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;
}
#messages {
border: 1px solid #ccc;
height: 300px;
overflow-y: auto;
margin-bottom: 10px;
padding: 10px;
}
input, button {
padding: 8px;
margin: 5px 0;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.system {
color: #888;
font-style: italic;
}
.message {
margin: 5px 0;
}
</style>
</head>
<body>
<h1>WebSocket 客户端</h1>
<div id="messages"></div>
<input type="text" id="messageInput" placeholder="输入消息..." />
<button onclick="sendMessage()">发送</button>
<script>
// 创建 WebSocket 连接，使用服务器的公共 IP 地址
// const socket = new WebSocket('ws://10.37.75.246/irex/frontend/admin_users/');
const socket = new WebSocket('ws://e168-238-175gmp.datarangers-onpremise.volces.com/irex/frontend/admin_users/');
// const socket = new WebSocket('ws://10.37.75.246/irex/frontend/admin_item/');
// const socket = new WebSocket('ws://10.37.75.246/irex/');
// const socket = new WebSocket(`ws://10.37.75.246:8765`);
const messagesDiv = document.getElementById('messages');
const messageInput = document.getElementById('messageInput');
// 连接建立时触发
socket.onopen = () => {
appendMessage('系统', '已连接到服务器');
};
// 接收到消息时触发
socket.onmessage = (event) => {
appendMessage('服务器', event.data);
};
// 连接关闭时触发
socket.onclose = () => {
appendMessage('系统', '连接已断开');
};
// 错误处理
socket.onerror = (error) => {
appendMessage('系统', `错误: ${error.message}`);
};
// 发送消息函数
function sendMessage() {
const message = messageInput.value.trim();
if (message) {
socket.send(message);
appendMessage('你', message);
messageInput.value = '';
}
}
// 辅助函数：添加消息到消息区域
function appendMessage(sender, message) {
const msgDiv = document.createElement('div');
msgDiv.className = sender === '系统' ? 'system message' : 'message';
msgDiv.innerHTML = `<strong>${sender}:</strong> ${message}`;
messagesDiv.appendChild(msgDiv);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
}
// 支持按 Enter 键发送消息
messageInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage();
}
});
</script>
</body>
</html>