67 lines
2.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket Echo Test</title>
</head>
<body>
<h1>WebSocket Echo Test</h1>
<p>1. Go run main.go</p>
<p>2. Create a Zoraxy proxy rule (and add to hosts file) from ws.localhost (port 80) to 127.0.0.1:8888</p>
<p>3. Click the Connect button below to test if headers are correctly sent over</p>
<button id="connectBtn">Connect</button>
<button id="disconnectBtn" disabled>Disconnect</button>
<input type="text" id="messageInput" placeholder="Enter message">
<button id="sendBtn" disabled>Send</button>
<div id="output"></div>
<script>
let socket;
const connectBtn = document.getElementById('connectBtn');
const disconnectBtn = document.getElementById('disconnectBtn');
const sendBtn = document.getElementById('sendBtn');
const messageInput = document.getElementById('messageInput');
const output = document.getElementById('output');
connectBtn.addEventListener('click', () => {
output.innerHTML = '';
//socket = new WebSocket('ws://localhost:8888/echo');
socket = new WebSocket('ws://ws.localhost/echo');
socket.onopen = () => {
output.innerHTML += '<p>Connected to WebSocket server</p>';
connectBtn.disabled = true;
disconnectBtn.disabled = false;
sendBtn.disabled = false;
};
socket.onmessage = (event) => {
output.innerHTML += `<p>Received: ${event.data}</p>`;
};
socket.onclose = () => {
output.innerHTML += '<p>Disconnected from WebSocket server</p>';
connectBtn.disabled = false;
disconnectBtn.disabled = true;
sendBtn.disabled = true;
};
socket.onerror = (error) => {
output.innerHTML += `<p>Error: ${error.message}</p>`;
};
});
disconnectBtn.addEventListener('click', () => {
socket.close();
});
sendBtn.addEventListener('click', () => {
const message = messageInput.value;
socket.send(message);
output.innerHTML += `<p>Sent: ${message}</p>`;
messageInput.value = '';
});
</script>
</body>
</html>