Client Configuration

Socketo implements the Pusher Protocol v7 over WebSockets. Any client library compatible with the Pusher protocol can connect to Socketo without modification.

JavaScript / TypeScript (`pusher-js`)

Install the client package:

bash

npm install pusher-js

Cloud Configuration

import Pusher from 'pusher-js'

const pusher = new Pusher('YOUR_APP_KEY', {
  wsHost: 'wss.socketo.dev',
  wssPort: 443,
  forceTLS: true,
  cluster: 'socketo',
  enabledTransports: ['ws'],
  // Required for private and presence channels:
  channelAuthorization: {
    endpoint: '/api/pusher/auth',
    transport: 'ajax',
    headers: {
      Authorization: `Bearer ${getAuthToken()}`,
    },
  },
  // Optional: User sign-in authentication
  userAuthentication: {
    endpoint: '/api/pusher/user-auth',
  },
})

Local CLI Configuration

When developing locally with @socketo/cli:

const pusher = new Pusher('local', {
  wsHost: 'localhost',
  wsPort: 8787,
  forceTLS: false,
  cluster: 'local',
  enabledTransports: ['ws'],
})

Laravel Echo

Laravel Echo integrates directly with Socketo using the pusher-js client library.

bash

npm install --save-dev laravel-echo pusher-js

Echo Initialization (`resources/js/bootstrap.js`)

import Echo from 'laravel-echo'
import Pusher from 'pusher-js'

window.Pusher = Pusher

window.Echo = new Echo({
  broadcaster: 'pusher',
  key: import.meta.env.VITE_SOCKETO_APP_KEY,
  wsHost: import.meta.env.VITE_SOCKETO_HOST ?? 'wss.socketo.dev',
  wsPort: import.meta.env.VITE_SOCKETO_PORT ?? 443,
  wssPort: import.meta.env.VITE_SOCKETO_PORT ?? 443,
  forceTLS: (import.meta.env.VITE_SOCKETO_SCHEME ?? 'https') === 'https',
  cluster: 'socketo',
  enabledTransports: ['ws'],
  authEndpoint: '/broadcasting/auth',
})

Laravel Environment Variables (`.env`)

env

VITE_SOCKETO_APP_KEY="your-app-key"
VITE_SOCKETO_HOST="wss.socketo.dev"
VITE_SOCKETO_PORT=443
VITE_SOCKETO_SCHEME="https"

Configuration Options

Option	Type	Default	Description
`wsHost`	`string`	—	WebSocket host domain (e.g. `wss.socketo.dev` or `localhost`).
`wssPort`	`number`	`443`	Port for secure TLS connections.
`wsPort`	`number`	`80`	Port for unencrypted development connections (`@socketo/cli`: `8787`).
`forceTLS`	`boolean`	`true`	Enforce SSL/TLS encryption. Set to `false` for local dev.
`cluster`	`string`	`'socketo'`	Routing cluster identifier.
`enabledTransports`	`string[]`	`['ws']`	Set to `['ws']` for direct WebSocket transport without fallback polling.
`channelAuthorization`	`object`	—	Auth endpoint and headers for private and presence channels.
`userAuthentication`	`object`	—	Auth endpoint for user signin (`pusher.signin()`).

Connection Lifecycle

Monitor connection status changes:

pusher.connection.bind('state_change', (states: { previous: string; current: string }) => {
  console.log(`Connection state changed from ${states.previous} to ${states.current}`)
})

pusher.connection.bind('connected', () => {
  console.log('Connected! Socket ID:', pusher.connection.socket_id)
})

pusher.connection.bind('disconnected', () => {
  console.log('Disconnected. Automatic reconnecting in progress...')
})

pusher.connection.bind('error', (err: any) => {
  console.error('Connection error:', err)
})

Client Configuration#

JavaScript / TypeScript (pusher-js)#

Cloud Configuration#

Local CLI Configuration#

Laravel Echo#

Echo Initialization (resources/js/bootstrap.js)#

Laravel Environment Variables (.env)#

Configuration Options#

Connection Lifecycle#