Realtime & WebSockets

Presence Tracking & Echo Bots

Simulate real-time user presence (online/away/offline), keystroke typing indicators, and automated response echo bots in collaborative multi-user apps. Both the Native WebSocket and Socket.io gateways synchronize presence events across shared rooms.

Interactive Presence & Echo Bot Visualizer

Select a simulated participant, toggle presence state or keystroke activity, and inspect the resulting JSON frames:

Alice

Room #general•online

Alice is typing...

Dispatched Typing / Presence Frame

{

"type": "typing",

"room": "general",

"user": "Alice",

"isTyping": true,

"status": "online"

}

Automated Echo Bot Reply Frame (@bot)

{

"type": "message",

"id": "msg-bot-8e99a1-cb42",

"room": "support",

"sender_id": "bot_assistant",

"sender_name": "Support Bot",

"text": "Received your query: \"@bot what is the current server time?\". All systems operational.",

"created_at": "2026-09-29T12:00:00.000Z"

}

Presence State Machine Specification

Standard presence lifecycle transitions supported across room subscribers:

State	Trigger Condition	Description
online	Socket connection active	Client is connected and actively interacting with the workspace.
idle	300s keystroke inactivity	Connection remains alive but no typing or click activity detected.
away	Explicit status update	User manually toggled status or switched browser tab visibility.
offline	Socket disconnect / timeout	TCP connection closed or heartbeat missed. Client removed from room set.

Client Debounced Typing Hook

Prevent network flooding by debouncing typing indicators with a 1500ms timeout window:

useTypingIndicator.ts

// React 19 Custom Typing Indicator Debouncer Hook

import { useState, useRef, useCallback, useEffect } from 'react';

export function useTypingIndicator(socket: any, room = 'general', debounceMs = 1500) {

const [isTyping, setIsTyping] = useState(false);

const timeoutRef = useRef<NodeJS.Timeout | null>(null);

const notifyTyping = useCallback(() => {

if (!isTyping) {

setIsTyping(true);

socket?.emit('typing', { room, isTyping: true });

}

if (timeoutRef.current) clearTimeout(timeoutRef.current);

timeoutRef.current = setTimeout(() => {

setIsTyping(false);

socket?.emit('typing', { room, isTyping: false });

}, debounceMs);

}, [socket, room, isTyping, debounceMs]);

useEffect(() => {

return () => {

if (timeoutRef.current) clearTimeout(timeoutRef.current);

};

}, []);

return { notifyTyping, isTyping };

}

PreviousSocket.io Gateway

NextServer-Sent Events (SSE)