Mercurial

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Talk!</title>
  {{/parts/base_head.html}}
  <style>
    body { font-family: sans-serif; padding: 20px; }
    #messages { height: 200px; border: 1px solid #ccc; overflow-y: scroll; margin-bottom: 10px; padding: 10px; }
    #chat { display: flex; gap: 10px; }
    input { flex-grow: 1; }
  </style>
</head>
<body>
  {{/parts/header.html}}
  <h1>Talks</h1>

  <div id="messages"></div>

  <div id="chat">
    <input type="text" id="messageInput" placeholder="Type a message...">
    <button id="sendBtn">Send</button>
  </div>
  {{/parts/footer.html}}
  <script>
    const ws = new WebSocket('ws://localhost:6969/echo');
    const messagesDiv = document.getElementById('messages');

    ws.onopen = () => {
      console.log('Connected!');
      appendMessage('System: Connected to server');
    };

    ws.onmessage = (event) => {
      console.log('Received:', event.data);
      appendMessage('Server: ' + event.data);
    };

    // Function to send message
    sendBtn.onclick = () => {
      const message = messageInput.value;
      if (message) {
        ws.send(message);
        appendMessage('You: ' + message);
        messageInput.value = ''; // Clear input
      }
    };

    // Helper to show messages on screen
    function appendMessage(text) {
      const msg = document.createElement('p');
      msg.textContent = text;
      messagesDiv.appendChild(msg);
      messagesDiv.scrollTop = messagesDiv.scrollHeight;
    }

    messageInput.addEventListener('keydown', (event) => {
      if (event.key === 'Enter' && !event.shiftKey)
      {
      event.preventDefault();
      sendBtn.click();
      }
    });
  </script>
</body>
</html>
author	June Park <parkjune1995@gmail.com>
date	Fri, 09 Jan 2026 11:17:20 -0800
parents	f236c895604e
children	75c144fd6964