Capacitor SignalR

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

recording.mp4

📱 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 | undefined; } | undefined) => 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 | undefined; } | undefined) => 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'