Lyra/client-test.html at main · faneeshh/Lyra · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
  <head>
    <title>Lyra Chat Test</title>
    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
  </head>
  <body>
    <h2>Lyra Socket Chat Test</h2>

    <input id="sender" placeholder="Sender ID" />
    <input id="receiver" placeholder="Receiver ID" />
    <input id="message" placeholder="Message" />
    <button onclick="sendMessage()">Send</button>

    <script>
      const socket = io('http://localhost:5000');

      // Join room as a user
      function join(userId) {
        socket.emit('join', userId);
      }

      // Listen for new messages
      socket.on('newMessage', (msg) => {
        console.log('📩 New message:', msg);
        alert(`New message from ${msg.sender}: ${msg.content}`);
      });

      function sendMessage() {
        const sender = document.getElementById('sender').value;
        const receiver = document.getElementById('receiver').value;
        const content = document.getElementById('message').value;

        socket.emit('sendMessage', { sender, receiver, content });
      }

      // Automatically join with sender ID once typed
      document.getElementById('sender').addEventListener('change', (e) => {
        join(e.target.value);
      });
    </script>
  </body>
</html>