Capacitor SignalR Demo

A complete real-time chat application demonstrating the Capacitor SignalR Plugin in action.

recording.mp4

🌟 What's Included

• ASP.NET Core SignalR Backend - Real-time hub implementation
• Ionic Angular Mobile App - Cross-platform mobile client
• Web Test Client - Browser-based testing interface

🚀 Quick Start

Prerequisites

• .NET 9.0 SDK
• Node.js 18+
• Ionic CLI
• Android Studio (for Android) or Xcode (for iOS)

1. Clone the Repository

git clone https://github.com/dotnetdreamer/capacitor-signalr-demo.git
cd capacitor-signalr-demo

2. Set up the SignalR Backend

Option 1: Using .NET CLI (Recommended)

cd web
dotnet run

Option 2: Using Visual Studio

1. Open web/web.sln in Visual Studio
2. Set the web project as the startup project (right-click → "Set as Startup Project")
3. Press F5 or click the "Start" button to run the project
4. Visual Studio will automatically open a browser - you can close it as we'll use the mobile app

The backend will start on http://localhost:5236 with a SignalR hub at /chatHub.

Keep this running - the backend needs to be active for the demo to work.

3. Set up the Mobile App

Open a new terminal and run:

cd mobile
npm install
npm run build or ionic capacitor run android --livereload --external --host=0.0.0.0
npx cap sync

Now go to home.page.ts and change the url to your ip address i.e inside setupSignalRConnection() e.g http://0.0.0.0:5236/chatHub to http://192.168.1.130:5236/chatHub

4. Configure the Connection URL

⚠️ Important: Update the SignalR hub URL with your computer's IP address.

1. Find your computer's IP address:

   # Windows
   ipconfig
   
   # macOS/Linux
   ifconfig

2. Edit mobile/src/app/home/home.page.ts and update the URL:

   const connectionInfo = await CapacitorSignalR.create({
     url: 'http://YOUR_IP_ADDRESS:5236/chatHub', // Replace with your IP
     // ... other options
   });

   Example:

   url: 'http://192.168.1.100:5236/chatHub',

5. Run the Mobile App

For Android:

ionic capacitor run android --livereload --external --host=0.0.0.0

For iOS:

ionic capacitor run ios --livereload --external --host=0.0.0.0

6. Test the Web Client (Optional)

Open the web-test.html file in your browser and:

1. Update the hub URL to match your IP address
2. Click "Connect"
3. Subscribe to "ReceiveMessage" event
4. Send messages to test cross-platform communication

📱 Demo Features

Real-time Chat

• ✅ Send and receive messages instantly
• ✅ Cross-platform messaging (mobile ↔ web)
• ✅ Message persistence during session
• ✅ User identification

Connection Management

• ✅ Connection state monitoring
• ✅ Auto-reconnection with configurable delays
• ✅ Connection error handling
• ✅ Visual connection status indicators

Transport Protocols

• ✅ WebSockets (preferred)
• ✅ Server-Sent Events (fallback)
• ✅ Long Polling (fallback)

Cross-platform Support

• ✅ Android native implementation
• ✅ iOS native implementation
• ✅ Web fallback using Microsoft SignalR JS client

🏗️ Project Structure

capacitor-signalr-demo/
├── web/                          # ASP.NET Core SignalR Backend
│   ├── Hubs/ChatHub.cs          # SignalR Hub implementation
│   ├── Program.cs               # Server configuration
│   └── Controllers/             # Web controllers
│
├── mobile/                       # Ionic Angular Mobile App
│   ├── src/app/home/            # Main chat interface
│   ├── capacitor.config.ts      # Capacitor configuration
│   └── package.json             # Dependencies
│
└── web-test.html                # Standalone web test client

🔧 Troubleshooting

Connection Issues

Problem: "Connection refused" or "Failed to connect"

• ✅ Ensure the backend is running (dotnet run in the web folder)
• ✅ Check the IP address in your mobile app configuration
• ✅ Ensure your device and computer are on the same network
• ✅ Check firewall settings (allow port 5236)

Mobile App Issues

Problem: App doesn't connect on device

• ✅ Use your computer's IP address, not localhost
• ✅ Ensure livereload is running with --external --host=0.0.0.0
• ✅ Check that the device is on the same WiFi network

Problem: Messages appear twice

• ✅ This has been fixed in the latest version
• ✅ Ensure you're using the latest plugin version

Backend Issues

Problem: CORS errors

• ✅ The backend is configured to allow all origins for demo purposes
• ✅ Check Program.cs for CORS configuration

📚 How It Works

SignalR Hub (Backend)

The ChatHub.cs implements the SignalR hub with methods:

• SendMessage(user, message) - Broadcasts messages to all connected clients
• OnConnectedAsync() - Handles new connections
• OnDisconnectedAsync() - Handles disconnections

Mobile Client

The Ionic app uses the Capacitor SignalR plugin to:

• Create and manage SignalR connections
• Send messages through hub methods
• Listen for real-time events
• Handle connection state changes

Web Client

The web-test.html demonstrates direct usage of the Microsoft SignalR JavaScript client for comparison and testing.

🌐 Related Links

• Capacitor SignalR Plugin - The main plugin repository
• Microsoft SignalR Documentation - Official SignalR docs
• Ionic Framework - Mobile app framework
• Capacitor - Native bridge framework

🐛 Issues & Feedback

Found a bug or have a suggestion? Please open an issue on the main plugin repository: Report Issues

📄 License

This demo application is provided as-is for demonstration purposes. See the main plugin repository for licensing information.

---

Made with ❤️ for the Capacitor community