1
0

test.html 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>WebSocket Echo Test</title>
  7. </head>
  8. <body>
  9. <h1>WebSocket Echo Test</h1>
  10. <p>1. Go run main.go</p>
  11. <p>2. Create a Zoraxy proxy rule (and add to hosts file) from ws.localhost (port 80) to 127.0.0.1:8888</p>
  12. <p>3. Click the Connect button below to test if headers are correctly sent over</p>
  13. <button id="connectBtn">Connect</button>
  14. <button id="disconnectBtn" disabled>Disconnect</button>
  15. <input type="text" id="messageInput" placeholder="Enter message">
  16. <button id="sendBtn" disabled>Send</button>
  17. <div id="output"></div>
  18. <script>
  19. let socket;
  20. const connectBtn = document.getElementById('connectBtn');
  21. const disconnectBtn = document.getElementById('disconnectBtn');
  22. const sendBtn = document.getElementById('sendBtn');
  23. const messageInput = document.getElementById('messageInput');
  24. const output = document.getElementById('output');
  25. connectBtn.addEventListener('click', () => {
  26. output.innerHTML = '';
  27. //socket = new WebSocket('ws://localhost:8888/echo');
  28. socket = new WebSocket('ws://ws.localhost/echo');
  29. socket.onopen = () => {
  30. output.innerHTML += '<p>Connected to WebSocket server</p>';
  31. connectBtn.disabled = true;
  32. disconnectBtn.disabled = false;
  33. sendBtn.disabled = false;
  34. };
  35. socket.onmessage = (event) => {
  36. output.innerHTML += `<p>Received: ${event.data}</p>`;
  37. };
  38. socket.onclose = () => {
  39. output.innerHTML += '<p>Disconnected from WebSocket server</p>';
  40. connectBtn.disabled = false;
  41. disconnectBtn.disabled = true;
  42. sendBtn.disabled = true;
  43. };
  44. socket.onerror = (error) => {
  45. output.innerHTML += `<p>Error: ${error.message}</p>`;
  46. };
  47. });
  48. disconnectBtn.addEventListener('click', () => {
  49. socket.close();
  50. });
  51. sendBtn.addEventListener('click', () => {
  52. const message = messageInput.value;
  53. socket.send(message);
  54. output.innerHTML += `<p>Sent: ${message}</p>`;
  55. messageInput.value = '';
  56. });
  57. </script>
  58. </body>
  59. </html>