Playground API
Dual-Protocol RealtimeSupport Bot Simulator

Real-Time WebSockets, Socket.io & Live Chat

Build and test real-time frontend applications without configuring external socket servers. Playground API provides unified cross-protocol message routing across RFC 6455 Native WebSockets (/ws), Socket.io 4.x (/socket.io), and Server-Sent Events (/stream/notifications), complete with room channels, typing indicators, and an automated Support Bot.

Interactive Chat Studio

Switch protocols, toggle rooms, simulate typing indicators, and message the AI Support Bot live inside your browser.

Real-Time Live Chat StudioConnecting...

Cross-protocol message bus (RFC 6455 Native WS, Socket.io, & SSE)

No messages yet in #support. Say hello or trigger Support Bot!

Supported Realtime Protocols

Native WebSocket (/ws)

Standard RFC 6455 WebSocket endpoint. Works natively with browser new WebSocket(), Node.js ws, Python websockets, and Go.

ws://.../ws?room=general
Socket.io (/socket.io)

Full Socket.io 4.x transport support with event multiplexing (socket.emit('message')), automatic reconnection, and cross-protocol room broadcasts.

http://.../socket.io
SSE Stream (/stream)

Unidirectional HTTP text/event-stream push channel for system notifications, database change broadcasts, and background activity pulses.

GET /api/v1/stream/notifications

Integration Code Examples

1. React Custom Hook (`useChatRoom`)

hooks/useChatRoom.ts
1
import { useEffect, useState, useRef } from 'react';
2
3
export function useChatRoom(room = 'general', username = 'Developer') {
4
const [messages, setMessages] = useState([]);
5
const [isTyping, setIsTyping] = useState(false);
6
const [typingUser, setTypingUser] = useState(null);
7
const wsRef = useRef(null);
8
9
useEffect(() => {
10
const ws = new WebSocket(wss://playground.nileslabs.com/ws?room=${room}&username=${encodeURIComponent(username)}`);
11
wsRef.current = ws;
12
13
ws.onmessage = (event) => {
14
const data = JSON.parse(event.data);
15
if (data.type === 'message') {
16
setMessages((prev) => [...prev, data]);
17
} else if (data.type === 'typing') {
18
setTypingUser(data.isTyping ? data.user : null);
19
}
20
};
21
22
return () => ws.close();
23
}, [room, username]);
24
25
const sendMessage = (text) => {
26
if (wsRef.current?.readyState === WebSocket.OPEN) {
27
wsRef.current.send(JSON.stringify({ type: 'message', room, text }));
28
}
29
};
30
31
const sendTyping = (status) => {
32
setIsTyping(status);
33
if (wsRef.current?.readyState === WebSocket.OPEN) {
34
wsRef.current.send(JSON.stringify({ type: 'typing', room, isTyping: status }));
35
}
36
};
37
38
return { messages, sendMessage, sendTyping, typingUser, isTyping };
39
}

2. Native Browser WebSocket Connection

Native RFC 6455 WebSocket
1
// 1. Connect to Native WebSocket endpoint (/ws)
2
const ws = new WebSocket('wss://playground.nileslabs.com/ws?room=support&username=Alice');
3
4
ws.onopen = () => {
5
console.log('Connected to Playground API WebSocket!');
6
7
// Send a chat message
8
ws.send(JSON.stringify({
9
type: 'message',
10
room: 'support',
11
text: 'Hello! How do I test rate limits?'
12
}));
13
};
14
15
ws.onmessage = (event) => {
16
const data = JSON.parse(event.data);
17
18
if (data.type === 'typing') {
19
console.log(${data.user} is ${data.isTyping ? 'typing...' : 'idle'});
20
} else if (data.type === 'message') {
21
console.log([${data.room}] ${data.sender_name}: ${data.text});
22
}
23
};

3. Socket.io Client Client Setup

Socket.io 4.x Client
1
import { io } from 'socket.io-client';
2
3
// 2. Connect to Socket.io Gateway (/socket.io)
4
const socket = io('https://playground.nileslabs.com', {
5
path: '/socket.io',
6
query: {
7
room: 'general',
8
username: 'Bob'
9
}
10
});
11
12
socket.on('connect', () => {
13
console.log('Socket.io connected with id:', socket.id);
14
});
15
16
// Listen for broadcasted chat messages
17
socket.on('message', (msg) => {
18
console.log([${msg.room}] ${msg.sender_name}: ${msg.text});
19
});
20
21
// Listen for typing events
22
socket.on('typing', ({ user, isTyping, room }) => {
23
console.log(${user} ${isTyping ? 'is typing...' : 'stopped typing'} in #${room}`);
24
});
25
26
// Send a message
27
socket.emit('message', {
28
room: 'general',
29
text: 'Hello from Socket.io client!'
30
});

4. Server-Sent Events (SSE) Subscriber

Server-Sent Events Subscriber
1
// 3. Server-Sent Events (SSE) Notification Stream
2
const eventSource = new EventSource('https://playground.nileslabs.com/api/v1/stream/notifications');
3
4
eventSource.onopen = () => {
5
console.log('SSE notification stream opened.');
6
};
7
8
// Listen for system notifications
9
eventSource.addEventListener('notification', (event) => {
10
const notification = JSON.parse(event.data);
11
console.log('New Notification:', notification.title, notification.message);
12
});
13
14
eventSource.onerror = (err) => {
15
console.error('SSE Error:', err);
16
};

Automated Support Bot Simulation Engine

The Playground API server includes an integrated AI Support Bot simulator that listens on the #support channel or any message mentioning @bot or starting with /bot. When triggered, it:

  • Broadcasts a { type: 'typing', user: 'Support Bot', isTyping: true } event across all peers in the room.
  • Simulates natural typing latency (~200ms).
  • Broadcasts the bot reply message and turns off the typing indicator.
PreviousFile Uploads & Cloud CDN
NextOutgoing Webhooks Dispatcher