Capacitor SignalR

A Capacitor plugin that provides native SignalR client functionality for iOS and Android with web fallback support.

https://github.com/user-attachments/assets/b13fde4b-b8fe-4cc9-acc6-c3f797ef0d57

📱 Demo App

Want to see the plugin in action? Check out our Demo Repository that showcases real-time chat functionality with complete setup instructions.

Demo Features

• ✅ Real-time bidirectional messaging between mobile and web clients
• ✅ Connection state monitoring
• ✅ Auto-reconnection handling
• ✅ Cross-platform compatibility testing
• ✅ Complete ASP.NET Core SignalR backend
• ✅ Ionic Angular mobile client
• ✅ Web client for testing

👉 Get the Demo App

Key Features

• 🚀 Native performance on iOS and Android
• 🔄 Real-time bidirectional communication
• 🌐 Multiple transport protocols (WebSockets, SSE, Long Polling)
• 🔐 Authentication and custom headers support
• ⚡ Auto-reconnection with configurable retry delays
• 📱 Cross-platform compatibility (iOS, Android, Web)
• 🎯 TypeScript support with full type definitions

Install

npm install capacitor-signalr
npx cap sync

Quick Start

import { CapacitorSignalR, ConnectionState, TransportType } from 'capacitor-signalr';

// Create connection
const connection = await CapacitorSignalR.create({
  url: 'https://your-signalr-hub.com/chatHub',
  enableAutoReconnect: true,
  transport: TransportType.ALL,
  logLevel: 'Information'
});

// Listen for messages
await CapacitorSignalR.addListener('onReceive', (event) => {
  if (event.eventName === 'ReceiveMessage') {
    console.log('Received:', event.data);
  }
});

// Subscribe to hub methods
await CapacitorSignalR.on({ eventName: 'ReceiveMessage' });

// Send messages
await CapacitorSignalR.invoke({
  methodName: 'SendMessage',
  args: ['username', 'Hello World!']
});

// Monitor connection state
await CapacitorSignalR.addListener('onConnectionStateChanged', (state) => {
  console.log('Connection state:', state.state);
});

API

• create(...)
• disconnect()
• getConnectionId()
• getConnectionState()
• invoke(...)
• invokeWithResult(...)
• on(...)
• off(...)
• addListener('onReceive', ...)
• addListener('onConnectionStateChanged', ...)
• addListener('onClosed', ...)
• addListener('onReconnecting', ...)
• addListener('onReconnected', ...)
• removeAllListeners()
• Interfaces
• Type Aliases
• Enums

create(...)

create(options: ConnectionOptions) => Promise<ConnectionInfo>

Create and start a SignalR connection

| Param | Type | | ------------- | --------------------------------------------------------------- | | options | ConnectionOptions |

Returns: Promise<ConnectionInfo>

disconnect()

disconnect() => Promise<void>

Disconnect from the SignalR hub

getConnectionId()

getConnectionId() => Promise<{ connectionId?: string; }>

Get the current connection ID

Returns: Promise<{ connectionId?: string; }>

getConnectionState()

getConnectionState() => Promise<{ state: ConnectionState; }>

Get the current connection state

Returns: Promise<{ state: ConnectionState; }>

invoke(...)

invoke(options: { methodName: string; args?: any[]; }) => Promise<void>

Send a message to the SignalR hub

| Param | Type | | ------------- | -------------------------------------------------- | | options | { methodName: string; args?: any[]; } |

invokeWithResult(...)

invokeWithResult<T = any>(options: { methodName: string; args?: any[]; }) => Promise<{ result: T; }>

Send a message to the SignalR hub and expect a response

| Param | Type | | ------------- | -------------------------------------------------- | | options | { methodName: string; args?: any[]; } |

Returns: Promise<{ result: T; }>

on(...)

on(options: { eventName: string; }) => Promise<void>

Subscribe to a hub method

| Param | Type | | ------------- | ----------------------------------- | | options | { eventName: string; } |

off(...)

off(options: { eventName: string; }) => Promise<void>

Unsubscribe from a hub method

| Param | Type | | ------------- | ----------------------------------- | | options | { eventName: string; } |

addListener('onReceive', ...)

addListener(eventName: 'onReceive', listenerFunc: (event: SignalREvent) => void) => Promise<PluginListenerHandle>

Add listener for plugin events

| Param | Type | | ------------------ | ------------------------------------------------------------------------- | | eventName | 'onReceive' | | listenerFunc | (event: SignalREvent) => void |

Returns: Promise<PluginListenerHandle>

addListener('onConnectionStateChanged', ...)

addListener(eventName: 'onConnectionStateChanged', listenerFunc: (state: { state: ConnectionState; }) => void) => Promise<PluginListenerHandle>

Add listener for connection state changes

| Param | Type | | ------------------ | ------------------------------------------------------------------------------------------- | | eventName | 'onConnectionStateChanged' | | listenerFunc | (state: { state: ConnectionState; }) => void |

Returns: Promise<PluginListenerHandle>

addListener('onClosed', ...)

addListener(eventName: 'onClosed', listenerFunc: (error?: { error?: string; }) => void) => Promise<PluginListenerHandle>

Add listener for connection closed event

| Param | Type | | ------------------ | ----------------------------------------------------- | | eventName | 'onClosed' | | listenerFunc | (error?: { error?: string; }) => void |

Returns: Promise<PluginListenerHandle>

addListener('onReconnecting', ...)

addListener(eventName: 'onReconnecting', listenerFunc: (error?: { error?: string; }) => void) => Promise<PluginListenerHandle>

Add listener for reconnecting event

| Param | Type | | ------------------ | ----------------------------------------------------- | | eventName | 'onReconnecting' | | listenerFunc | (error?: { error?: string; }) => void |

Returns: Promise<PluginListenerHandle>

addListener('onReconnected', ...)

addListener(eventName: 'onReconnected', listenerFunc: (info: { connectionId?: string; }) => void) => Promise<PluginListenerHandle>

Add listener for reconnected event

| Param | Type | | ------------------ | ---------------------------------------------------------- | | eventName | 'onReconnected' | | listenerFunc | (info: { connectionId?: string; }) => void |

Returns: Promise<PluginListenerHandle>

removeAllListeners()

removeAllListeners() => Promise<void>

Remove all listeners for this plugin

Interfaces

ConnectionInfo

| Prop | Type | | ------------------ | ----------------------------------------------------------- | | connectionId | string | | state | ConnectionState |

ConnectionOptions

| Prop | Type | | ------------------------------ | ----------------------------------------------------------------------------------------------------- | | url | string | | accessToken | string | | shouldSkipNegotiate | boolean | | skipNegotiation | boolean | | headers | { name: string; value: string; }[] | Record<string, string> | | handshakeResponseTimeout | number | | keepAliveInterval | number | | serverTimeout | number | | transport | TransportType | | reconnect | boolean | | logLevel | string | | enableAutoReconnect | boolean | | autoReconnectRetryDelays | number[] |

PluginListenerHandle

| Prop | Type | | ------------ | ----------------------------------------- | | remove | () => Promise<void> |

SignalREvent

| Prop | Type | | --------------- | ------------------- | | eventName | string | | data | any |

Type Aliases

Record

Construct a type with a set of properties K of type T

{ [P in K]: T; }

Enums

ConnectionState

| Members | Value | | ------------------- | ---------------------------- | | CONNECTED | 'connected' | | CONNECTING | 'connecting' | | DISCONNECTED | 'disconnected' | | DISCONNECTING | 'disconnecting' | | RECONNECTING | 'reconnecting' |

TransportType

| Members | Value | | ------------------------ | --------------------------------- | | WEBSOCKETS | 'WEBSOCKETS' | | LONG_POLLING | 'LONG_POLLING' | | SERVER_SENT_EVENTS | 'SERVER_SENT_EVENTS' | | ALL | 'ALL' |