Adding Real-Time Communication to Your Flutter App with CC SignalR

In this article, we’ll explore how to add real-time communication to your Flutter application using the CC SignalR plugin. SignalR is a popular library for enabling server-side code to send asynchronous notifications to client-side web applications. With CC SignalR, you can easily integrate this functionality into your Flutter apps.

Introduction to CC SignalR

CC SignalR is a Flutter plugin that provides seamless SignalR support, allowing you to manage SignalR connections effortlessly and communicate using an event-driven approach. This plugin makes it easy to define connection options, subscribe to modules, and create custom modules to listen for specific SignalR messages, making it a powerful tool for real-time applications.

Installation

To get started, add the CC SignalR dependency to your pubspec.yaml file:

dependencies:
  cc_signalr: ^1.0.0

Then, run the following command in your terminal to load the dependencies:

flutter pub get

Usage

1. Define Connection Options

First, import the necessary modules and use the init method to define your connection options and configurations:

import 'package:cc_signalr/cc_signalr.dart';

void main() {
  CCSignalR.init(
    connectionOptions: HttpConnectionOptions(
      skipNegotiation: true,
      transport: HttpTransportType.WebSockets,
      logMessageContent: false,
    ),
    signalROptions: CCSignalROptions(
      url: "https://example.com/signalrHub",
      autoReconnect: true,
      hubProtocol: JsonHubProtocol(),
      onConnected: (HubConnection connection) async {
        print("Connected");
      },
      onDisconnected: (value) {
        print("Disconnected");
      },
      onReconnected: (value) {
        print("Reconnected");
      },
    ),
    loggingOptions: CCSignalRLogging(
      logEnabled: true,
      logLevel: Level.INFO,
    ),
    modules: [
      Example(),
    ],
  );
}

2. Using Modules

Next, you can use your example module to receive and manage messages over SignalR:

void main() {
  // Other initialization code...

  // Start the connection
  CCSignalR.connect();

  // Subscribe to the module
  CCSignalR.getModule<Example>().subscribe();

  // Unsubscribe from the module
  CCSignalR.getModule<Example>().unsubscribe();
}

Example Code

Here’s a complete example code to get you started:

void main() {
  CCSignalR.init(
    connectionOptions: HttpConnectionOptions(
      skipNegotiation: true,
      transport: HttpTransportType.WebSockets,
      logMessageContent: false,
    ),
    signalROptions: CCSignalROptions(
      url: "https://example.com/signalrHub",
      autoReconnect: true,
      hubProtocol: JsonHubProtocol(),
      onConnected: (HubConnection connection) async {
        String connectionId = await connection.invoke("getConnectionId") as String;
        print("Connected : " + connectionId);
      },
      onDisconnected: (value) {
        print("Disconnected");
      },
      onReconnected: (value) {
        print("Reconnected");
      },
    ),
    loggingOptions: CCSignalRLogging(
      logEnabled: true,
      logLevel: Level.INFO,
    ),
    modules: [
      Example(),
    ],
  );

  CCSignalR.connect();

  CCSignalR.getModule<Example>().subscribe();
}

Creating Your Own Module

You can create your own module by defining a class that extends the HUBModule class. This allows you to listen for specific SignalR messages and handle them appropriately. Here's an example:

import 'package:cc_signalr/src/modules/hub_module.dart';

class Example extends HUBModule {
  Example() : super("receiveMainPageStream");

  @override
  void listen(List<Object?>? parameters) {
    print("Broadcast : " + parameters.toString());
  }
}

Explanation

• Inheritance: The Example class inherits from the HUBModule class. This means that the Example class inherits all the properties and methods of the HUBModule class.
• Constructor: The constructor of the Example class calls the constructor of the HUBModule class with the "receiveMainPageStream" parameter. This means that the Example class will listen to the "receiveMainPageStream" message.
• listen Method: This method listens for messages coming from SignalR. The parameters parameter contains the content of the message from SignalR, and this content is printed to the console.

Contributing

If you would like to contribute to this project, please send a pull request or open an issue on the GitHub repository.

License

This project is licensed under the MIT License. For more information, see the LICENSE file.

By following this guide, you can seamlessly integrate real-time communication into your Flutter applications using the CC SignalR plugin. Happy coding!