From b2b8023e65062bf261b41e65ae37ac05175da193 Mon Sep 17 00:00:00 2001
From: Sander Speetjens <sander.speetjens@gmail.com>
Date: Sun, 15 Sep 2024 16:52:54 +0200
Subject: [PATCH] add html page for testing server

---
 chat.html | 68 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 chat.html

diff --git a/chat.html b/chat.html
new file mode 100644
index 0000000..86c00b7
--- /dev/null
+++ b/chat.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WebSocket Chat</title>
+  <style>
+    body {
+      font-family: Arial, Helvetica, sans-serif;
+      align-items: center;
+    }
+    #chat-box {
+      height: 800px;
+      overflow-y: scroll;
+      border: 1px solid #ccc;
+      padding: 10px;
+    }
+    #message-input {
+      width: 90%;
+      border: 1px solid #999999;
+      padding: 5px;
+    }
+    .client_message {
+      text-align: right;
+    }
+  </style>
+</head>
+<body>
+  <div id="chat-box"></div>
+  <input type="text" id="message-input" placeholder="Type your message..." onkeypress="input_event(event)">
+  <button onclick="sendMessage()">Send</button>
+
+  <script>
+    const socket = new WebSocket('ws://localhost:9002');
+    const chatBox = document.getElementById('chat-box');
+    const messageInput = document.getElementById('message-input');
+
+    // Event listener for when the WebSocket connection is established
+    socket.addEventListener('open', (event) => {
+      console.log('WebSocket connection opened:', event);
+    });
+
+    // Event listener for when a message is received from the WebSocket server
+    socket.addEventListener('message', (event) => {
+      chatBox.innerHTML += `<p>${event.data}</p>`;
+      chatBox.scrollTop = chatBox.scrollHeight; // Auto-scroll to the bottom
+    });
+
+    // Function to send a message to the WebSocket server
+    function sendMessage() {
+      const message = messageInput.value;
+
+      if (message.trim() !== '') {
+        socket.send(message);
+        chatBox.innerHTML += `<p class="client_message">${message}</p>`;
+        chatBox.scrollTop = chatBox.scrollHeight;
+        messageInput.value = '';
+      }
+    }
+    
+    function input_event(event) {
+    if (event.key == "Enter") {
+        sendMessage();
+      }
+    }
+  </script>
+</body>
+</html>
\ No newline at end of file