200 lines
6.6 KiB
HTML
200 lines
6.6 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>WebSocket Custom Request Tester</title>
|
|
<style>
|
|
body {
|
|
background: #000;
|
|
color: #fff;
|
|
font-family: Arial, sans-serif;
|
|
margin: 24px;
|
|
}
|
|
h1 {
|
|
color: #5865f2;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
color: #b9bbbe;
|
|
}
|
|
input,
|
|
textarea,
|
|
select,
|
|
button {
|
|
background: #23272a;
|
|
color: #fff;
|
|
border: 1px solid #444;
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
font-size: 15px;
|
|
}
|
|
textarea {
|
|
resize: vertical;
|
|
min-height: 60px;
|
|
}
|
|
button {
|
|
background: #5865f2;
|
|
color: #fff;
|
|
border: none;
|
|
cursor: pointer;
|
|
margin-top: 12px;
|
|
font-weight: bold;
|
|
}
|
|
button:hover {
|
|
background: #4752c4;
|
|
}
|
|
#log {
|
|
background: #111;
|
|
border: 1px solid #222;
|
|
padding: 12px;
|
|
margin-top: 24px;
|
|
height: 220px;
|
|
overflow-y: auto;
|
|
font-size: 14px;
|
|
white-space: pre-wrap;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
.row > .form-group {
|
|
flex: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>WebSocket Custom Request Tester</h1>
|
|
<form id="wsForm" autocomplete="off">
|
|
<div class="form-group">
|
|
<label for="type">Request Type</label>
|
|
<input
|
|
id="type"
|
|
name="type"
|
|
type="text"
|
|
placeholder="e.g. update, fetch, customType"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="row">
|
|
<div class="form-group">
|
|
<label for="address">Address (string)</label>
|
|
<input
|
|
id="address"
|
|
name="address"
|
|
type="text"
|
|
placeholder="e.g. user123"
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="to">To (int)</label>
|
|
<input
|
|
id="to"
|
|
name="to"
|
|
type="number"
|
|
placeholder="e.g. 42"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="items">Items (JSON array)</label>
|
|
<textarea
|
|
id="items"
|
|
name="items"
|
|
placeholder='e.g. [{"name":"apple","count":5}]'
|
|
></textarea>
|
|
</div>
|
|
<button type="submit">Send WebSocket Request</button>
|
|
</form>
|
|
<div id="log"></div>
|
|
|
|
<script>
|
|
const logEl = document.getElementById("log");
|
|
function log(msg, type = "info") {
|
|
const color =
|
|
type === "error"
|
|
? "#ff5555"
|
|
: type === "sent"
|
|
? "#23a559"
|
|
: "#b9bbbe";
|
|
const div = document.createElement("div");
|
|
div.style.color = color;
|
|
div.textContent = msg;
|
|
logEl.appendChild(div);
|
|
logEl.scrollTop = logEl.scrollHeight;
|
|
}
|
|
|
|
// Connect to WebSocket server at same host/port
|
|
const wsUrl =
|
|
(location.protocol === "https:" ? "wss://" : "ws://") +
|
|
location.host;
|
|
let ws;
|
|
function connectWS() {
|
|
ws = new WebSocket(wsUrl);
|
|
ws.onopen = () => log("[system] Connected to " + wsUrl, "info");
|
|
ws.onclose = () => log("[system] Disconnected", "error");
|
|
ws.onerror = () => log("[system] Error", "error");
|
|
ws.onmessage = (e) => {
|
|
let data = e.data;
|
|
try {
|
|
const parsed = JSON.parse(data);
|
|
log(
|
|
"[recv] " + JSON.stringify(parsed, null, 2),
|
|
"info",
|
|
);
|
|
} catch {
|
|
log("[recv] " + data, "info");
|
|
}
|
|
};
|
|
}
|
|
connectWS();
|
|
|
|
document.getElementById("wsForm").onsubmit = function (e) {
|
|
e.preventDefault();
|
|
if (!ws || ws.readyState !== WebSocket.OPEN) {
|
|
log("[system] WebSocket not connected", "error");
|
|
return;
|
|
}
|
|
const type = document.getElementById("type").value.trim();
|
|
const address = document.getElementById("address").value.trim();
|
|
const to = document.getElementById("to").value.trim();
|
|
const itemsRaw = document.getElementById("items").value.trim();
|
|
|
|
let items;
|
|
if (itemsRaw) {
|
|
try {
|
|
items = JSON.parse(itemsRaw);
|
|
if (!Array.isArray(items))
|
|
throw new Error("Items must be a JSON array");
|
|
} catch (err) {
|
|
log(
|
|
"[error] Items JSON invalid: " + err.message,
|
|
"error",
|
|
);
|
|
return;
|
|
}
|
|
}
|
|
|
|
const payload = {
|
|
type,
|
|
...(address && { address }),
|
|
...(to && { to: Number(to) }),
|
|
...(items && { items }),
|
|
};
|
|
|
|
try {
|
|
ws.send(JSON.stringify(payload));
|
|
log("[sent] " + JSON.stringify(payload, null, 2), "sent");
|
|
} catch (err) {
|
|
log("[error] Failed to send: " + err.message, "error");
|
|
}
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|