Octavus Docs

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

Rendering diagram...

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:

bash

Client:

bash

Step 2: Configure Environment

bash

Step 3: Create the Octavus Client (Server)

typescript

Step 4: Create the Socket Handler (Server)

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

typescript

Step 5: Set Up the Express Server

typescript

Step 6: Create the Socket Hook (Client)

typescript

Step 7: Build the Chat Component

tsx

Custom Events

Socket transport supports custom events alongside Octavus events:

typescript
typescript

Protocol Integration

Triggers

The socket handler receives trigger messages and forwards them to Octavus:

typescript

Tools

Tools are defined in your agent's protocol and handled server-side:

yaml
typescript

Meteor Integration Note

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

typescript

Next Steps