Lost Messages in WebSocket App — Socket.io Reconnection Fix

// ─────────────────────────────────────────────────
// POLLING APPROACH (the old, wasteful way)
// The browser keeps asking the server for updates
// even when there is nothing new to report.
// ─────────────────────────────────────────────────

function pollForNewMessages() {
  // This runs every 2 seconds, forever.
  // Even when nothing has changed on the server.
  setInterval(async () => {
    const response = await fetch('/api/messages/latest');
    const data = await response.json();

    if (data.messages.length > 0) {
      console.log('New messages received:', data.messages);
    } else {
      // Most of the time this is what happens — wasted round trip.
      console.log('No new messages. Connection opened and closed for nothing.');
    }
  }, 2000); // Fires every 2,000 milliseconds (2 seconds)
}

// pollForNewMessages();
// With 500 users online: 500 × 30 requests/min = 15,000 requests/min
// Just to hear "nothing new" almost every single time.


// ─────────────────────────────────────────────────
// WEBSOCKET APPROACH (the modern, efficient way)
// One connection stays open. The server pushes data
// to the client the moment something happens.
// ─────────────────────────────────────────────────

// Open a single persistent connection to the server
const socket = new WebSocket('ws://localhost:3000');

// This fires ONCE when the connection is established
socket.addEventListener('open', () => {
  console.log('Connection open — staying open until we close it.');
  // Now BOTH sides can send messages any time they want
  socket.send('Hello from the browser!');
});

// This fires EVERY TIME the server sends us something
// No polling. No repeated requests. The server pushes to us.
socket.addEventListener('message', (event) => {
  console.log('Server just pushed a message:', event.data);
});

// This fires if the connection drops unexpectedly
socket.addEventListener('close', () => {
  console.log('Connection closed.');
});

// ─────────────────────────────────────────────────
// A minimal raw WebSocket server using the 'ws' package.
// Run: npm install ws
// Then: node raw_websocket_server.js
// ─────────────────────────────────────────────────

const WebSocketServer = require('ws').Server;

// Create a WebSocket server listening on port 3000
const server = new WebSocketServer({ port: 3000 });

console.log('Raw WebSocket server running on ws://localhost:3000');

// 'connection' fires every time a new client connects
server.on('connection', (clientSocket) => {
  console.log('A new client connected!');

  // Send a welcome message back to this specific client
  // We have to manually serialise data — raw WebSockets only send strings or binary
  clientSocket.send(JSON.stringify({
    type: 'welcome',
    message: 'You are connected to the raw WebSocket server'
  }));

  // 'message' fires every time THIS client sends us something
  clientSocket.on('message', (rawData) => {
    // rawData is a Buffer — we convert it to a string first
    const parsedMessage = JSON.parse(rawData.toString());
    console.log('Received from client:', parsedMessage);

    // To broadcast to ALL connected clients, we have to loop manually.
    // Socket.io handles this automatically — this is one of its key advantages.
    server.clients.forEach((connectedClient) => {
      // WebSocketServer.OPEN means the connection is alive and ready
      if (connectedClient.readyState === WebSocketServer.OPEN) {
        connectedClient.send(JSON.stringify({
          type: 'broadcast',
          from: parsedMessage.username,
          message: parsedMessage.text
        }));
      }
    });
  });

  // 'close' fires when this particular client disconnects
  clientSocket.on('close', () => {
    console.log('A client disconnected.');
  });
});

// ─────────────────────────────────────────────────
// SOCKET.IO REAL-TIME CHAT SERVER
//
// Setup:
//   npm install express socket.io
//   node chat_server.js
//
// Then open http://localhost:3000 in TWO browser tabs
// and watch messages appear instantly in both.
// ─────────────────────────────────────────────────

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const path = require('path');

const app = express();

// Socket.io requires access to the raw HTTP server, not just Express.
// We create the HTTP server manually and pass our Express app into it.
const httpServer = http.createServer(app);

// Attach Socket.io to the HTTP server.
// The 'cors' option allows browsers on different origins to connect.
const io = new Server(httpServer, {
  cors: {
    origin: '*' // In production, lock this down to your actual domain
  }
});

// Keep track of how many users are currently connected
let connectedUserCount = 0;

// Serve the chat client HTML file when someone visits the root URL
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'chat_client.html'));
});

// ─────────────────────────────────────────────────
// SOCKET.IO EVENT HANDLING
// 'connection' fires every time a new browser connects
// ─────────────────────────────────────────────────
io.on('connection', (socket) => {
  connectedUserCount++;
  console.log(`User connected. Socket ID: ${socket.id}. Total online: ${connectedUserCount}`);

  // Notify EVERYONE (including this new user) that the count changed.
  // io.emit sends to ALL connected sockets.
  io.emit('user-count-updated', { count: connectedUserCount });

  // Listen for a custom 'user-set-name' event from THIS socket (client)
  socket.on('user-set-name', (username) => {
    // Store the username on the socket object itself for later use
    socket.data.username = username;
    console.log(`Socket ${socket.id} identified as: ${username}`);

    // socket.broadcast.emit sends to ALL sockets EXCEPT the one that emitted
    // We don't want to tell Alice that Alice joined — everyone else yes.
    socket.broadcast.emit('system-message', {
      text: `${username} joined the chat`
    });
  });

  // Listen for a 'send-message' event from this socket
  socket.on('send-message', (messageData) => {
    const senderName = socket.data.username || 'Anonymous';
    console.log(`Message from ${senderName}: ${messageData.text}`);

    // io.emit broadcasts to EVERY connected socket, including the sender
    // This confirms the message to the sender and delivers to everyone else
    io.emit('new-message', {
      from: senderName,
      text: messageData.text,
      timestamp: new Date().toLocaleTimeString() // e.g. "14:32:07"
    });
  });

  // Listen for a 'typing' event — a common real-time UX pattern
  socket.on('user-typing', () => {
    const typingUsername = socket.data.username || 'Someone';
    // Tell everyone ELSE (not the typer) that this user is typing
    socket.broadcast.emit('show-typing-indicator', { username: typingUsername });
  });

  // 'disconnect' fires automatically when the browser tab closes or connection drops
  socket.on('disconnect', (reason) => {
    connectedUserCount--;
    const leavingUser = socket.data.username || 'A user';
    console.log(`${leavingUser} disconnected. Reason: ${reason}. Total online: ${connectedUserCount}`);

    io.emit('system-message', { text: `${leavingUser} left the chat` });
    io.emit('user-count-updated', { count: connectedUserCount });
  });
});

// Start listening for connections on port 3000
httpServer.listen(3000, () => {
  console.log('Chat server is live at http://localhost:3000');
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Socket.io Chat</title>
  <style>
    body { font-family: sans-serif; max-width: 600px; margin: 40px auto; padding: 0 20px; }
    #message-list { border: 1px solid #ddd; height: 300px; overflow-y: auto; padding: 10px; margin-bottom: 10px; border-radius: 6px; }
    .system-msg { color: #888; font-style: italic; font-size: 0.85em; }
    .chat-msg { margin: 6px 0; }
    .chat-msg strong { color: #2563eb; }
    #typing-display { color: #aaa; font-size: 0.8em; min-height: 18px; }
    #controls { display: flex; gap: 8px; }
    input { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
    button { padding: 8px 16px; background: #2563eb; color: white; border: none; border-radius: 4px; cursor: pointer; }
    #user-count { margin-bottom: 10px; color: #555; font-size: 0.9em; }
  </style>
</head>
<body>
  <h2>⚡ Real-Time Chat</h2>
  <div id="user-count">Users online: 0</div>

  <div id="message-list"></div>
  <div id="typing-display"></div>

  <!-- Name entry section -->
  <div id="name-section">
    <input id="name-input" type="text" placeholder="Enter your name to join..." />
    <button onclick="joinChat()">Join Chat</button>
  </div>

  <!-- Message sending section (hidden until user joins) -->
  <div id="controls" style="display:none">
    <input id="message-input" type="text" placeholder="Type a message..." />
    <button onclick="sendMessage()">Send</button>
  </div>

  <!--
    Socket.io automatically serves this script from your Node.js server.
    You don't need to install anything separately for the browser.
    This URL only works when your server is running.
  -->
  <script src="/socket.io/socket.io.js"></script>

  <script>
    // Connect to the Socket.io server.
    // io() with no arguments connects to the same host that served this page.
    const socket = io();

    let typingTimer; // Used to debounce the typing indicator

    // ─────────────────────────────────────────────
    // LISTEN FOR EVENTS FROM THE SERVER
    // ─────────────────────────────────────────────

    // When the server tells us a new message arrived, display it
    socket.on('new-message', (messageData) => {
      addMessageToList(messageData.from, messageData.text, messageData.timestamp);
    });

    // When the server sends a system notification (join/leave alerts)
    socket.on('system-message', (data) => {
      addSystemMessage(data.text);
    });

    // Update the "X users online" display
    socket.on('user-count-updated', (data) => {
      document.getElementById('user-count').textContent = `Users online: ${data.count}`;
    });

    // Show the typing indicator when another user is typing
    socket.on('show-typing-indicator', (data) => {
      const typingDisplay = document.getElementById('typing-display');
      typingDisplay.textContent = `${data.username} is typing...`;

      // Clear the indicator after 2 seconds of no new typing events
      clearTimeout(typingTimer);
      typingTimer = setTimeout(() => {
        typingDisplay.textContent = '';
      }, 2000);
    });

    // ─────────────────────────────────────────────
    // EMIT EVENTS TO THE SERVER
    // ─────────────────────────────────────────────

    function joinChat() {
      const username = document.getElementById('name-input').value.trim();
      if (!username) return alert('Please enter a name!');

      // Tell the server who this user is by emitting a named event with data
      socket.emit('user-set-name', username);

      // Switch the UI from name entry to message entry
      document.getElementById('name-section').style.display = 'none';
      document.getElementById('controls').style.display = 'flex';
      document.getElementById('message-input').focus();
    }

    function sendMessage() {
      const messageInput = document.getElementById('message-input');
      const messageText = messageInput.value.trim();
      if (!messageText) return;

      // Emit the message to the server — server will broadcast it to everyone
      socket.emit('send-message', { text: messageText });
      messageInput.value = ''; // Clear the input field after sending
    }

    // Tell the server this user is typing whenever they press a key
    document.addEventListener('keydown', (event) => {
      const isTypingInMessageBox = document.activeElement.id === 'message-input';

      if (isTypingInMessageBox) {
        // Emit a typing event — we don't need to send what they're typing, just that they are
        socket.emit('user-typing');
      }

      // Pressing Enter sends the message (quality of life improvement)
      if (event.key === 'Enter') {
        if (document.activeElement.id === 'message-input') sendMessage();
        if (document.activeElement.id === 'name-input') joinChat();
      }
    });

    // ─────────────────────────────────────────────
    // DOM HELPER FUNCTIONS
    // ─────────────────────────────────────────────

    function addMessageToList(senderName, messageText, timestamp) {
      const messageList = document.getElementById('message-list');
      const messageElement = document.createElement('div');
      messageElement.className = 'chat-msg';
      messageElement.innerHTML = `<strong>${senderName}</strong> <span style="color:#aaa;font-size:0.8em">${timestamp}</span><br>${messageText}`;
      messageList.appendChild(messageElement);
      // Auto-scroll to the latest message
      messageList.scrollTop = messageList.scrollHeight;
    }

    function addSystemMessage(text) {
      const messageList = document.getElementById('message-list');
      const systemElement = document.createElement('div');
      systemElement.className = 'system-msg';
      systemElement.textContent = `— ${text} —`;
      messageList.appendChild(systemElement);
      messageList.scrollTop = messageList.scrollHeight;
    }
  </script>
</body>
</html>

// ─────────────────────────────────────────────────
// SOCKET.IO CHAT SERVER WITH ROOMS
// Extends the previous chat_server.js with room support.
// ─────────────────────────────────────────────────

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const path = require('path');

const app = express();
const httpServer = http.createServer(app);
const io = new Server(httpServer, { cors: { origin: '*' } });

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'chat_client_with_rooms.html'));
});

io.on('connection', (socket) => {
  console.log(`Socket ${socket.id} connected`);

  // When a user wants to join a specific room
  socket.on('join-room', (roomName) => {
    // Leave any previous room automatically (optional)
    // socket.rooms contains all rooms the socket is currently in
    socket.join(roomName);
    console.log(`${socket.id} joined room: ${roomName}`);

    // Notify others in the room
    socket.to(roomName).emit('system-message', {
      text: `${socket.data.username || 'Someone'} joined the room`
    });

    // Send a confirmation to the joining user
    socket.emit('room-joined', { room: roomName });
  });

  socket.on('send-room-message', (data) => {
    const { room, text } = data;
    const senderName = socket.data.username || 'Anonymous';
    // io.to(room).emit sends to everyone in that room, including the sender
    io.to(room).emit('new-room-message', {
      from: senderName,
      text: text,
      timestamp: new Date().toLocaleTimeString(),
      room: room
    });
  });

  // Private message event: target a specific socket ID
  socket.on('private-message', (data) => {
    const { targetSocketId, text } = data;
    const senderName = socket.data.username || 'Anonymous';
    // Send only to that specific socket
    io.to(targetSocketId).emit('private-message', {
      from: senderName,
      text: text,
      timestamp: new Date().toLocaleTimeString()
    });
    // Also echo back to sender for confirmation
    socket.emit('private-message-sent', { to: targetSocketId, text: text });
  });

  socket.on('disconnect', () => {
    console.log(`${socket.id} disconnected`);
  });
});

httpServer.listen(3000, () => {
  console.log('Room-enabled chat server at http://localhost:3000');
});

// io.thecodeforge
// Server-side room management example (Node.js with Socket.io)
const io = require('socket.io')(server, { cors: { origin: '*' } });

io.on('connection', (socket) => {
  socket.on('join-project', (projectId) => {
    // Use coarse room names: project-based grouping
    socket.join(`project:${projectId}`);
    io.to(`project:${projectId}`).emit('user-joined', socket.id);
  });

  socket.on('private-message', ({ targetId, message }) => {
    // One room per user pair: sorted IDs avoid duplication
    const room = [socket.id, targetId].sort().join(':');
    socket.join(room);
    io.to(room).emit('message', { from: socket.id, text: message });
  });

  socket.on('disconnect', () => {
    console.log(`Socket ${socket.id} disconnected`);
  });
});