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

Typing Indicator

SubscribeRequestHard
Try Interactive Demo

Description

Implement real-time "user is typing" indicator with debouncing.

Test Scenario

// Test: Typing indicator flow
// 1. User starts typing -> send 'typing: true'
// 2. Debounce multiple keystrokes
// 3. User stops typing -> send 'typing: false' after 1s idle
// 4. Verify other users receive typing status

let isTyping = false;
let typingTimeout: NodeJS.Timeout;

function onKeyPress() {
  if (!isTyping) {
    ws.send(JSON.stringify({ type: 'typing', status: true }));
    isTyping = true;
  }

  clearTimeout(typingTimeout);
  typingTimeout = setTimeout(() => {
    ws.send(JSON.stringify({ type: 'typing', status: false }));
    isTyping = false;
  }, 1000);
}

Testing Tips

  • •Send typing start/stop events
  • •Debounce typing events (300ms)
  • •Clear indicator after 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-typing-indicator

2 frameworks available