💬 Chat Room Demo

Practice testing real-time chat features: joining rooms, sending messages, typing indicators, and user presence.

Connect to Chat Server

This demo uses the WebSocket echo server to simulate chat functionality.

💻 Testing Code

Playwright

test('chat room messaging', async ({ page }) => {
  await page.goto('/websocket/chat');

  // Connect and join
  await page.click('button:has-text("Connect")');
  await page.fill('input[placeholder*="name"]', 'Tester');
  await page.click('button:has-text("Join")');

  // Send message
  await page.fill('input[placeholder*="message"]', 'Hello!');
  await page.click('button:has-text("Send")');

  // Verify message appears
  await expect(page.locator('.bg-blue-600'))
    .toContainText('Hello!');
});

WebSocket Events

// Listen for WebSocket frames
page.on('websocket', ws => {
  ws.on('framesent', frame => {
    const data = JSON.parse(frame.payload);
    if (data.type === 'message') {
      console.log('Sent:', data.text);
    }
  });

  ws.on('framereceived', frame => {
    const data = JSON.parse(frame.payload);
    if (data.type === 'message') {
      console.log('Received:', data.text);
    }
  });
});