Mercurial

comparison mrjunejune/src/talk/index.html @ 125:f236c895604e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[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
comparison
equal deleted inserted replaced
124:dbf14f84d51c 125:f236c895604e
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Talk!</title>
6 {{/parts/base_head.html}}
7 <style>
8 body { font-family: sans-serif; padding: 20px; }
9 #messages { height: 200px; border: 1px solid #ccc; overflow-y: scroll; margin-bottom: 10px; padding: 10px; }
10 #chat { display: flex; gap: 10px; }
11 input { flex-grow: 1; }
12 </style>
13 </head>
14 <body>
15 {{/parts/header.html}}
16 <h1>Talks</h1>
17
18 <div id="messages"></div>
19
20 <div id="chat">
21 <input type="text" id="messageInput" placeholder="Type a message...">
22 <button id="sendBtn">Send</button>
23 </div>
24 {{/parts/footer.html}}
25 <script>
26 const ws = new WebSocket('ws://localhost:6969/echo');
27 const messagesDiv = document.getElementById('messages');
28
29 ws.onopen = () => {
30 console.log('Connected!');
31 appendMessage('System: Connected to server');
32 };
33
34 ws.onmessage = (event) => {
35 console.log('Received:', event.data);
36 appendMessage('Server: ' + event.data);
37 };
38
39 // Function to send message
40 sendBtn.onclick = () => {
41 const message = messageInput.value;
42 if (message) {
43 ws.send(message);
44 appendMessage('You: ' + message);
45 messageInput.value = ''; // Clear input
46 }
47 };
48
49 // Helper to show messages on screen
50 function appendMessage(text) {
51 const msg = document.createElement('p');
52 msg.textContent = text;
53 messagesDiv.appendChild(msg);
54 messagesDiv.scrollTop = messagesDiv.scrollHeight;
55 }
56
57 messageInput.addEventListener('keydown', (event) => {
58 if (event.key === 'Enter' && !event.shiftKey)
59 {
60 event.preventDefault();
61 sendBtn.click();
62 }
63 });
64 </script>
65 </body>
66 </html>