Working With WebSockets for Real-Time Features

// Basic WebSocket Connection
const socket = new WebSocket("wss://echo.websocket.org");

// Connection opened
socket.addEventListener("open", (event) => {
  console.log("✅ Connected to WebSocket server!");
  
  // Send a message
  socket.send("Hello Server!");
});

// Listen for messages
socket.addEventListener("message", (event) => {
  console.log("📨 Message from server:", event.data);
});

// Connection closed
socket.addEventListener("close", (event) => {
  console.log("❌ Disconnected from se
...

// Real-Time Messaging with JSON

// Message types for a chat app
const MessageTypes = {
  CHAT: 'chat',
  TYPING: 'typing',
  PRESENCE: 'presence',
  JOIN_ROOM: 'join_room',
  LEAVE_ROOM: 'leave_room',
  ACK: 'ack',
  ERROR: 'error'
};

// Create a structured message
function createMessage(type, payload) {
  return JSON.stringify({
    id: crypto.randomUUID(),
    type,
    payload,
    timestamp: Date.now()
  });
}

// Send chat message
const chatMessage = createMessage(MessageTypes.CHAT, {
  
...

// Robust Reconnection Logic with Exponential Backoff

class ReconnectingWebSocket {
  constructor(url, options = {}) {
    this.url = url;
    this.maxRetries = options.maxRetries || 10;
    this.baseDelay = options.baseDelay || 1000;
    this.maxDelay = options.maxDelay || 30000;
    
    this.retries = 0;
    this.socket = null;
    this.listeners = new Map();
    this.messageQueue = [];
    
    this.connect();
  }
  
  connect() {
    console.log(`Connecting to ${this.url}...`);
    
    th
...

// Heartbeat (Ping/Pong) System for Dead Connection Detection

class HeartbeatWebSocket {
  constructor(url, options = {}) {
    this.url = url;
    this.pingInterval = options.pingInterval || 30000;
    this.pongTimeout = options.pongTimeout || 5000;
    
    this.socket = null;
    this.pingTimer = null;
    this.pongTimer = null;
    this.isAlive = false;
    
    this.connect();
  }
  
  connect() {
    this.socket = new WebSocket(this.url);
    
    this.socket.onopen = () => {
      consol
...

// Presence System (Online/Offline Tracking)

class PresenceManager {
  constructor() {
    this.users = new Map();
    this.listeners = [];
  }
  
  // Track user coming online
  userJoined(userId, metadata = {}) {
    const user = {
      id: userId,
      status: "online",
      joinedAt: Date.now(),
      lastSeen: Date.now(),
      ...metadata
    };
    
    this.users.set(userId, user);
    this.notify("join", user);
    
    console.log(`✅ ${userId} joined (total: ${this.users.size})`);

...

// Room/Channel System for Targeted Messaging

class RoomManager {
  constructor() {
    this.rooms = new Map();
    this.userRooms = new Map(); // userId -> Set of roomIds
  }
  
  // Create a room
  createRoom(roomId, options = {}) {
    if (this.rooms.has(roomId)) {
      return this.rooms.get(roomId);
    }
    
    const room = {
      id: roomId,
      name: options.name || roomId,
      members: new Set(),
      createdAt: Date.now(),
      isPrivate: options.isPrivate || false,
      max
...

// Reliable Delivery with ACKs and Retries

class ReliableMessaging {
  constructor(socket) {
    this.socket = socket;
    this.pendingMessages = new Map();
    this.retryDelay = 2000;
    this.maxRetries = 3;
  }
  
  // Send with guaranteed delivery
  sendReliable(message) {
    const id = crypto.randomUUID();
    const wrappedMessage = {
      id,
      ...message,
      timestamp: Date.now()
    };
    
    // Store for retry
    this.pendingMessages.set(id, {
      message: wrappedMessage,
...

// WebSocket Security Best Practices

// 1. Validate all incoming messages
function validateMessage(data) {
  // Parse safely
  let message;
  try {
    message = JSON.parse(data);
  } catch {
    console.error("Invalid JSON");
    return null;
  }
  
  // Check required fields
  if (!message.type || typeof message.type !== "string") {
    console.error("Missing or invalid type");
    return null;
  }
  
  // Whitelist allowed message types
  const allowedTypes = ["chat", "typing", "presence", "
...

// Scaling WebSockets with Pub/Sub Pattern

// Simulated Redis-like Pub/Sub for cross-server communication
class PubSub {
  constructor() {
    this.channels = new Map();
  }
  
  subscribe(channel, callback) {
    if (!this.channels.has(channel)) {
      this.channels.set(channel, new Set());
    }
    this.channels.get(channel).add(callback);
    console.log("Subscribed to channel: " + channel);
  }
  
  unsubscribe(channel, callback) {
    this.channels.get(channel)?.delete(callback);
  }
  

...