Skip to main content
2026-07-29 16:01
WebSocket

User Presence System

SubscribeValidateHard
Try Interactive Demo

What you will learn

  • Presence requires heartbeat — test that a client going away silently (power loss) is marked offline within N seconds
  • Join / leave events must reflect accurately — test with simultaneous joins, a single client doesn't appear twice
  • Test reconnection: a presence channel must restore accurate online-list on network flap, not show stale state

Description

Track online/offline status of users in real-time.

Test Scenario

// Test: Presence tracking
// 1. User connects -> status: 'online'
// 2. User idle 5 min -> status: 'away'
// 3. Tab hidden -> status: 'away'
// 4. User disconnects -> status: 'offline'

ws.send(JSON.stringify({ type: 'presence', status: 'online' }));

document.addEventListener('visibilitychange', () => {
  const status = document.hidden ? 'away' : 'online';
  ws.send(JSON.stringify({ type: 'presence', status }));
});

Testing Tips

  • •Track user connections and disconnections
  • •Handle browser tab visibility changes
  • •Implement "away" status after idle timeout
// Playwright API Testing - WebSocket
import { test, expect } from '@playwright/test';


test('WebSocket connection', async ({ page }) => {
  // Listen for WebSocket connections
  const wsPromise = page.waitForEvent('websocket');


  await page.goto('/websocket-demo');


  const ws = await wsPromise;
  expect(ws.url()).toContain('ws://');


  // Wait for message
  const framePromise = ws.waitForEvent('framereceived');
  const frame = await framePromise;
  expect(frame.payload).toBeDefined();
});

Challenge ID: ws-presence

2 frameworks available