Realtime & WebSockets

Socket.io Gateway & Event Bus

Integrate with the built-in Socket.io server mounted at /socket.io. Features automatic fallback to HTTP long-polling, room multiplexing, automated heartbeat reconnection, and peer-to-peer event broadcast channels.

Channel Configuration & Event Workbench

Select an active channel preset to view connection parameters and sample payload dispatch envelopes:

Socket Gateway Connection Specs

Gateway URL:http://localhost:3001

Path:/socket.io

Transports:websocket, polling

Selected Channel:#general

Playground API Socket.io server automatically synchronizes broadcasts with Native WebSocket clients across shared channels.

Sample Emit Payload (chat)

{

"room": "general",

"text": "Hello Socket.io team!"

}

Standard Event Names & Signatures

The Socket.io server listens for and emits typed events over active client connections:

Event Name	Direction	Payload Keys	Description
join	Client → Server	{ room }	Associates the socket connection with a target room channel.
chat	Client → Server	{ room, text, recipient_id }	Dispatches a chat payload to all peers subscribed to the room.
typing	Bidirectional	{ room, isTyping }	Broadcasts ephemeral keystroke indicators to peer clients.
message	Server → Client	{ id, room, sender_id, text, created_at }	Incoming broadcast message event delivered to the client.

Client Integration Code

Copy-paste production hooks for React 19 / Next.js and Node.js:

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

import { io, Socket } from 'socket.io-client';

export function useSocketIo(serverUrl = 'http://localhost:3001', room = 'general') {

const [messages, setMessages] = useState<any[]>([]);

const [isConnected, setIsConnected] = useState(false);

const socketRef = useRef<Socket | null>(null);

useEffect(() => {

// Initialize Socket.io client with dual transports

const socket = io(serverUrl, {

path: '/socket.io',

transports: ['websocket', 'polling'],

withCredentials: true,

reconnectionAttempts: 5,

reconnectionDelay: 1000,

});

socketRef.current = socket;

socket.on('connect', () => {

setIsConnected(true);

socket.emit('join', { room });

});

socket.on('message', (data) => {

setMessages((prev) => [...prev, data]);

});

socket.on('disconnect', () => {

setIsConnected(false);

});

return () => {

socket.disconnect();

};

}, [serverUrl, room]);

const sendMessage = useCallback((text: string) => {

socketRef.current?.emit('chat', { room, text });

}, [room]);

return { messages, isConnected, sendMessage };

}

Socket.io vs Native WebSockets

Key trade-offs between Socket.io and native browser WebSocket streams:

Feature	Socket.io Gateway	Native WebSocket (/ws)
Client Dependency	socket.io-client required	Zero dependencies (built-in API)
Fallback Transports	Automatic fallback to HTTP Polling	Direct TCP WebSocket upgrade only
Auto Reconnection	Built-in exponential backoff	Manual onclose retry loop needed
Framing Overhead	Engine.IO packet headers	Minimal 2-10 byte WebSocket frame

PreviousNative WebSocket (/ws)

NextPresence & Echo Bot

Socket.io Gateway & Event Bus

Channel Configuration & Event Workbench

Public Broadcast

AI Echo Bot

Direct Message

Socket Gateway Connection Specs

Standard Event Names & Signatures

Client Integration Code

Socket.io vs Native WebSockets

Socket.io Gateway & Event Bus

Channel Configuration & Event Workbench

Public Broadcast

AI Echo Bot

Direct Message

Socket Gateway Connection Specs

Standard Event Names & Signatures

Client Integration Code

Socket.io vs Native WebSockets