/capacitor-signalr

A native SignalR plugin for Ionic Capacitor that enables real-time communication between your mobile app and SignalR hubs. This plugin provides a seamless bridge between Capacitor apps and Microsoft SignalR, supporting WebSockets, Server-Sent Events, and Long Polling transports across iOS, Android, and web platforms.

Primary LanguageJava

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(...)

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'