Flutter SignalR通信插件cc_signalr的使用

Flutter SignalR通信插件cc_signalr的使用

CC SignalR 是一个为 Flutter 应用程序提供 SignalR 支持的插件。此插件使管理 SignalR 连接变得简单，并支持事件驱动的通信。

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  cc_signalr: ^1.0.0

然后，在终端运行以下命令以加载依赖项：

flutter pub get

使用

1. 定义连接选项

使用 init 方法添加必要的模块。直接在该方法内定义连接选项和配置。

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. 使用模块

你可以使用你的示例模块来接收和管理通过 SignalR 的消息。

void main() {
  // 其他初始化代码...

  // 开始连接
  CCSignalR.connect();

  // 订阅模块
  CCSignalR.getModule<Example>().subscribe();

  // 取消订阅模块
  CCSignalR.getModule<Example>().unsubscribe();
}

3. 创建自己的模块

HUBModule 类用于监听特定的 SignalR 消息。这个类会监听来自 SignalR 的消息，并将其打印到控制台。你可以通过定义如下的类来创建自己的模块：

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());
  }
}

示例代码

以下是完整的示例代码：

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();
}

更多关于Flutter SignalR通信插件cc_signalr的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter SignalR通信插件cc_signalr的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


cc_signalr 是一个用于 Flutter 的 SignalR 客户端插件，它允许你在 Flutter 应用程序中与 SignalR 服务器进行实时通信。SignalR 是一个由微软开发的库，用于实现实时 Web 功能，通常用于聊天、通知、实时数据更新等场景。

安装 cc_signalr 插件

首先，你需要在 pubspec.yaml 文件中添加 cc_signalr 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  cc_signalr: ^0.0.5 # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

使用 cc_signalr 插件

以下是一个简单的示例，展示如何在 Flutter 中使用 cc_signalr 插件与 SignalR 服务器进行通信。

1. 导入插件

import 'package:cc_signalr/cc_signalr.dart';

2. 创建 SignalR 连接

final signalR = SignalR(
  'https://your-signalr-server-url/hub', // SignalR 服务器的 URL
  hubName: 'yourHubName', // Hub 名称
);

3. 连接到 SignalR 服务器

await signalR.connect();

4. 监听服务器消息

你可以使用 on 方法来监听服务器发送的消息：

signalR.on('ReceiveMessage', (List<dynamic> arguments) {
  print('Received message: ${arguments[0]}');
});

5. 发送消息到服务器

你可以使用 invoke 方法来向服务器发送消息：

signalR.invoke('SendMessage', args: ['Hello, SignalR!']);

6. 断开连接

当你不再需要连接时，可以断开与 SignalR 服务器的连接：

signalR.disconnect();

完整示例

以下是一个完整的示例，展示了如何在 Flutter 中使用 cc_signalr 插件：

import 'package:flutter/material.dart';
import 'package:cc_signalr/cc_signalr.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SignalRExample(),
    );
  }
}

class SignalRExample extends StatefulWidget {
  [@override](/user/override)
  _SignalRExampleState createState() => _SignalRExampleState();
}

class _SignalRExampleState extends State<SignalRExample> {
  final signalR = SignalR(
    'https://your-signalr-server-url/hub', // SignalR 服务器的 URL
    hubName: 'yourHubName', // Hub 名称
  );

  [@override](/user/override)
  void initState() {
    super.initState();
    _connectToSignalR();
  }

  Future<void> _connectToSignalR() async {
    await signalR.connect();

    signalR.on('ReceiveMessage', (List<dynamic> arguments) {
      print('Received message: ${arguments[0]}');
    });

    signalR.invoke('SendMessage', args: ['Hello, SignalR!']);
  }

  [@override](/user/override)
  void dispose() {
    signalR.disconnect();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SignalR Example'),
      ),
      body: Center(
        child: Text('Check console for SignalR messages'),
      ),
    );
  }
}
回到顶部