Socket Chat Example

This example builds a chat interface using SockJS for bidirectional communication. Use this pattern for Meteor, Phoenix, or when you need custom real-time events.

What You're Building

A chat interface that:

• Uses SockJS for real-time streaming
• Manages sessions server-side (client doesn't need sessionId)
• Supports custom events alongside chat
• Works with frameworks that use WebSocket-like transports

Architecture

Key difference from HTTP: The server maintains a persistent socket connection and manages sessions internally. The client never needs to know about sessionId.

Prerequisites

• Express (or similar Node.js server)
• React frontend
• sockjs (server) and sockjs-client (client)
• Octavus account with API key

Step 1: Install Dependencies

Server:

Client:

Step 2: Configure Environment

Step 3: Create the Octavus Client (Server)

Step 4: Create the Socket Handler (Server)

This is the core of socket integration. Each connection gets its own session:

Step 5: Set Up the Express Server

Step 6: Create the Socket Hook (Client)

Step 7: Build the Chat Component

Custom Events

Socket transport supports custom events alongside Octavus events:

Protocol Integration

Messages

The socket handler receives messages and forwards them to Octavus:

Tools

Tools are defined in your agent's protocol. Server-side tools have handlers, client-side tools don't:

See Client Tools for handling tools on the frontend.

Meteor Integration Note

Meteor's bundler may have issues with ES6 imports of sockjs-client:

Next Steps

• Socket Transport — Advanced socket patterns
• Protocol Overview — Define agent behavior
• Tools — Building tool handlers