WebSocket Presence

{
  "type": "presence",
  "payload": {
    "user_id": "user-uuid",
    "state": "online"
  }
}

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data);
  
  if (msg.type === 'presence') {
    const { user_id, state } = msg.payload;
    
    if (state === 'online') {
      markUserOnline(user_id);
    } else {
      markUserOffline(user_id);
    }
  }
};

class PresenceTracker {
  constructor() {
    this.users = new Map(); // userId -> 'online' | 'offline'
  }
  
  handlePresence(userId, state) {
    this.users.set(userId, state);
    this.notifyListeners(userId, state);
  }
  
  isOnline(userId) {
    return this.users.get(userId) === 'online';
  }
  
  getOnlineUsers() {
    const online = [];
    for (const [userId, state] of this.users) {
      if (state === 'online') {
        online.push(userId);
      }
    }
    return online;
  }
  
  notifyListeners(userId, state) {
    // Notify UI components
    console.log(`User ${userId} is now ${state}`);
  }
}

// Usage
const presence = new PresenceTracker();

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data);
  
  if (msg.type === 'presence') {
    presence.handlePresence(msg.payload.user_id, msg.payload.state);
  }
};

class PresenceManager {
  constructor(ws, onUpdate) {
    this.ws = ws;
    this.onUpdate = onUpdate;
    this.presenceState = new Map();
    
    ws.addEventListener('message', (event) => {
      const msg = JSON.parse(event.data);
      if (msg.type === 'presence') {
        this.handlePresence(msg.payload);
      }
    });
  }
  
  handlePresence(payload) {
    const { user_id, state } = payload;
    
    // Only update if state changed
    const currentState = this.presenceState.get(user_id);
    if (currentState === state) return;
    
    this.presenceState.set(user_id, state);
    
    // Notify callback
    this.onUpdate(user_id, state);
  }
  
  isOnline(userId) {
    return this.presenceState.get(userId) === 'online';
  }
  
  getPresence(userId) {
    return this.presenceState.get(userId) || 'unknown';
  }
  
  getOnlineCount() {
    let count = 0;
    for (const state of this.presenceState.values()) {
      if (state === 'online') count++;
    }
    return count;
  }
}

// Usage
const presence = new PresenceManager(ws, (userId, state) => {
  console.log(`👤 ${userId} is ${state}`);
  updateUI(userId, state);
});

function updateUI(userId, state) {
  const userElement = document.querySelector(`[data-user="${userId}"]`);
  if (userElement) {
    userElement.classList.toggle('online', state === 'online');
    userElement.classList.toggle('offline', state === 'offline');
  }
}

<div class="user" data-user="user-123">
  <span class="status-dot"></span>
  <span class="name">John Doe</span>
</div>

<style>
  .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: gray;
  }
  
  .user.online .status-dot {
    background: #22c55e;
  }
  
  .user.offline .status-dot {
    background: gray;
  }
</style>

function renderOnlineUsers(presenceManager, allUsers) {
  const onlineList = document.getElementById('online-users');
  onlineList.innerHTML = '';
  
  for (const user of allUsers) {
    if (presenceManager.isOnline(user.id)) {
      const li = document.createElement('li');
      li.textContent = user.name;
      li.className = 'online';
      onlineList.appendChild(li);
    }
  }
}