Mercurial

annotate 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
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
125
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
1 <!DOCTYPE html>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
2 <html lang="en">
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
3 <head>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
4 <meta charset="UTF-8">
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
5 <title>Talk!</title>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
6 {{/parts/base_head.html}}
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
7 <style>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
8 body { font-family: sans-serif; padding: 20px; }
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
9 #messages { height: 200px; border: 1px solid #ccc; overflow-y: scroll; margin-bottom: 10px; padding: 10px; }
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
10 #chat { display: flex; gap: 10px; }
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
11 input { flex-grow: 1; }
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
12 </style>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
13 </head>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
14 <body>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
15 {{/parts/header.html}}
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
16 <h1>Talks</h1>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
17
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
18 <div id="messages"></div>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
19
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
20 <div id="chat">
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
21 <input type="text" id="messageInput" placeholder="Type a message...">
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
22 <button id="sendBtn">Send</button>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
23 </div>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
24 {{/parts/footer.html}}
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
25 <script>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
26 const ws = new WebSocket('ws://localhost:6969/echo');
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
27 const messagesDiv = document.getElementById('messages');
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
28
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
29 ws.onopen = () => {
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
30 console.log('Connected!');
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
31 appendMessage('System: Connected to server');
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
32 };
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
33
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
34 ws.onmessage = (event) => {
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
35 console.log('Received:', event.data);
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
36 appendMessage('Server: ' + event.data);
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
37 };
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
38
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
39 // Function to send message
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
40 sendBtn.onclick = () => {
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
41 const message = messageInput.value;
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
42 if (message) {
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
43 ws.send(message);
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
44 appendMessage('You: ' + message);
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
45 messageInput.value = ''; // Clear input
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
46 }
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
47 };
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
48
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
49 // Helper to show messages on screen
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
50 function appendMessage(text) {
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
51 const msg = document.createElement('p');
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
52 msg.textContent = text;
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
53 messagesDiv.appendChild(msg);
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
54 messagesDiv.scrollTop = messagesDiv.scrollHeight;
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
55 }
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
56
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
57 messageInput.addEventListener('keydown', (event) => {
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
58 if (event.key === 'Enter' && !event.shiftKey)
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
59 {
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
60 event.preventDefault();
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
61 sendBtn.click();
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
62 }
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
63 });
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
64 </script>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
65 </body>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
66 </html>