An open API service indexing awesome lists of open source software.

https://github.com/dotnetdreamer/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.
https://github.com/dotnetdreamer/capacitor-signalr

android capacitor capacitor-plugin cordova ionic ionic-framework ios typescript

Last synced: 5 months ago
JSON representation

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.

Awesome Lists containing this project

README

          

# 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](https://github.com/dotnetdreamer/capacitor-signalr-demo)** 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](https://github.com/dotnetdreamer/capacitor-signalr-demo)**

---

## 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

```bash
npm install capacitor-signalr
npx cap sync
```

## Quick Start

```typescript
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)
* [`disconnect()`](#disconnect)
* [`getConnectionId()`](#getconnectionid)
* [`getConnectionState()`](#getconnectionstate)
* [`invoke(...)`](#invoke)
* [`invokeWithResult(...)`](#invokewithresult)
* [`on(...)`](#on)
* [`off(...)`](#off)
* [`addListener('onReceive', ...)`](#addlisteneronreceive-)
* [`addListener('onConnectionStateChanged', ...)`](#addlisteneronconnectionstatechanged-)
* [`addListener('onClosed', ...)`](#addlisteneronclosed-)
* [`addListener('onReconnecting', ...)`](#addlisteneronreconnecting-)
* [`addListener('onReconnected', ...)`](#addlisteneronreconnected-)
* [`removeAllListeners()`](#removealllisteners)
* [Interfaces](#interfaces)
* [Type Aliases](#type-aliases)
* [Enums](#enums)

### create(...)

```typescript
create(options: ConnectionOptions) => Promise
```

Create and start a SignalR connection

| Param | Type |
| ------------- | --------------------------------------------------------------- |
| **`options`** | ConnectionOptions |

**Returns:** Promise<ConnectionInfo>

--------------------

### disconnect()

```typescript
disconnect() => Promise
```

Disconnect from the SignalR hub

--------------------

### getConnectionId()

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

Get the current connection ID

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

--------------------

### getConnectionState()

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

Get the current connection state

**Returns:** Promise<{ state: ConnectionState; }>

--------------------

### invoke(...)

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

Send a message to the SignalR hub

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

--------------------

### invokeWithResult(...)

```typescript
invokeWithResult(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(...)

```typescript
on(options: { eventName: string; }) => Promise
```

Subscribe to a hub method

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

--------------------

### off(...)

```typescript
off(options: { eventName: string; }) => Promise
```

Unsubscribe from a hub method

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

--------------------

### addListener('onReceive', ...)

```typescript
addListener(eventName: 'onReceive', listenerFunc: (event: SignalREvent) => void) => Promise
```

Add listener for plugin events

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

**Returns:** Promise<PluginListenerHandle>

--------------------

### addListener('onConnectionStateChanged', ...)

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

Add listener for connection state changes

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

**Returns:** Promise<PluginListenerHandle>

--------------------

### addListener('onClosed', ...)

```typescript
addListener(eventName: 'onClosed', listenerFunc: (error?: { error?: string | undefined; } | undefined) => void) => Promise
```

Add listener for connection closed event

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

**Returns:** Promise<PluginListenerHandle>

--------------------

### addListener('onReconnecting', ...)

```typescript
addListener(eventName: 'onReconnecting', listenerFunc: (error?: { error?: string | undefined; } | undefined) => void) => Promise
```

Add listener for reconnecting event

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

**Returns:** Promise<PluginListenerHandle>

--------------------

### addListener('onReconnected', ...)

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

Add listener for reconnected event

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

**Returns:** Promise<PluginListenerHandle>

--------------------

### removeAllListeners()

```typescript
removeAllListeners() => Promise
```

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' |