Realtime Monitor

The Realtime Monitor lets you connect to WebSocket endpoints and listen to Server-Sent Events (SSE) streams directly from the Studio dashboard without any external tools.

Opening the Monitor#

Click Realtime in the sidebar navigation.

The panel has two sections:

• WebSocket Endpoints — Detected WebSocket servers
• Server-Sent Events — Detected SSE streams

How Endpoints Are Detected#

Studio scans your src/ directory for patterns:

WebSocket detection:

new WSServer(httpServer, { path: '/ws' })

SSE detection:

// Any of these patterns
res.sse()
text/event-stream
SSEStream

WebSocket Monitor#

Each detected WebSocket endpoint shows:

• Connection URL — ws://localhost:3000/ws
• Declared Events — Event names found in source
• Status indicator — Idle / Connected / Error / Disconnected
• Live Message Log — Real-time IN / OUT / SYS messages

Connecting#

Click Connect to open a WebSocket connection from the browser to your app.

12:34:56  SYS  Connected to ws://localhost:3000/ws
12:34:56  IN   {"type":"welcome","id":"abc123"}

Sending Messages#

Type a JSON message in the input field and click Send:

{"type":"ping"}

The message appears in the log as an OUT entry and your server's response appears as IN.

Message Log Format#

The log keeps the last 100 messages. Older messages are automatically removed.

Disconnecting#

Click Disconnect to close the WebSocket connection gracefully.

SSE Monitor#

Each detected SSE endpoint shows:

• Event types — Declared event names from source
• Endpoint URL — http://localhost:3000/events
• Status indicator — Idle / Listening / Error
• Stream log — Received events with timestamps

Listening#

Click Listen to open an EventSource connection to the SSE endpoint.

Events appear in the stream log as they arrive:

12:34:56  message  {"status":"processing","job":"send-email"}
12:34:58  message  {"status":"complete","job":"send-email"}

Stopping#

Click Stop to close the SSE connection.

Clearing the Log#

Click Clear to empty the stream log without disconnecting.

Multiple Connections#

You can have multiple WebSocket connections and SSE listeners open at the same time — one per endpoint. Studio tracks each connection independently by its path.