node-chat/index.html at main · Rubius/node-chat · 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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Simple Node Chat</title>
  <style>
    body { margin: 0; font-family: Arial, sans-serif; }
    #chat{ height: 80vh; overflow-y: auto; padding: 10px; border-bottom: 1px solid #ccc; }
    #msg{ width: 100%; box-sizing:border-box; padding:5px; }
    .msg{ margin:5px 0; }
    .system{ color:#777; font-style:italic; }
  </style>
</head>
<body>
  <div id="chat"></div>
  <input id="msg" type="text" placeholder="Type... (Ctrl+Enter to send)" autofocus />
  <!-- CDN host for Socket.IO client -->
  <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
  <script>
    const socket = io();

    const chatDiv = document.getElementById('chat');
    const msgInput = document.getElementById('msg');

    // Render a message
    function append(msg) {
      const el = document.createElement('div');
      el.className = 'msg';
      el.textContent = `[${new Date(msg.time).toLocaleTimeString()}] ${msg.user}: ${msg.text}`;
      chatDiv.appendChild(el);
      chatDiv.scrollTop = chatDiv.scrollHeight;
    }

    // Show system notifications
    function system(txt) {
      const el = document.createElement('div');
      el.className = 'msg system';
      el.textContent = txt;
      chatDiv.appendChild(el);
    }

    socket.on('connect', () => system('⚡ Connected'));
    socket.on('disconnect', () => system('❌ Disconnected'));

    socket.on('history', msgs => msgs.forEach(append));
    socket.on('message', append);

    // UI → server
    msgInput.addEventListener('keydown', e => {
      if (e.key === 'Enter' && !e.shiftKey) {
        const text = msgInput.value.trim();
        if (text) { socket.emit('message', text); msgInput.value = ''; }
      }
    });
  </script>
</body>
</html>