Mercurial
diff mrjunejune/src/talk/index.html @ 125:f236c895604e
[MrJuneJune] Added web socket for chat to this.
| author | June Park <parkjune1995@gmail.com> |
|---|---|
| date | Thu, 08 Jan 2026 08:46:49 -0800 |
| parents | |
| children | 75c144fd6964 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/mrjunejune/src/talk/index.html Thu Jan 08 08:46:49 2026 -0800 @@ -0,0 +1,66 @@ +<!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>