<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>WebSocket 検証</title>
<style>
body { font-family: sans-serif; padding: 20px; }
#log { border: 1px solid #ccc; padding: 10px; height: 300px; overflow-y: auto; background: #f9f9f9; }
#status { font-weight: bold; margin-bottom: 10px; }
.connected { color: green; }
.disconnected { color: red; }
</style>
</head>
<body>
<h2>WebSocket 検証</h2>
<p id="status" class="disconnected">未接続</p>
<button onclick="connect()">接続</button>
<button onclick="disconnect()">切断</button>
<hr>
<div id="log"></div>
<script>
let ws = null;
function log(msg) {
const div = document.getElementById("log");
div.innerHTML += `<p>${msg}</p>`;
div.scrollTop = div.scrollHeight;
}
function connect() {
ws = new WebSocket("ws://localhost:8000");
ws.onopen = () => {
document.getElementById("status").textContent = "接続中";
document.getElementById("status").className = "connected";
log("✅ サーバーに接続しました");
};
ws.onmessage = (event) => {
log(`📩 受信: ${event.data}`);
};
ws.onclose = () => {
document.getElementById("status").textContent = "未接続";
document.getElementById("status").className = "disconnected";
log("❌ 切断されました");
};
}
function disconnect() {
if (ws) ws.close();
}
</script>
</body>
</html>
import asyncio
import websockets
import random
# 流すデータのリスト(現場の形式に合わせて変更する)
MESSAGES = [
"SEC|SPOT|USDJPY|157.123|157.456",
"SEC|SPOT|EURJPY|169.123|169.456",
"SEC|SPOT|GBPJPY|198.123|198.456",
"SEC|SPOT|AUDJPY|101.123|101.456",
]
async def handler(websocket):
print(f"クライアント接続: {websocket.remote_address}")
try:
while True:
for message in MESSAGES:
await websocket.send(message)
print(f"送信: {message}")
await asyncio.sleep(1)
except websockets.exceptions.ConnectionClosed:
print("クライアント切断")
async def main():
print("モックWebSocketサーバー起動: ws://localhost:8000")
async with websockets.serve(handler, "localhost", 8000):
await asyncio.Future()
asyncio.run(main())