如何在Flutter中实现SignalR .NET Core连接并使用相关类？

1. 确认依赖配置 #

先确保pubspec.yaml中已添加signalr_netcore依赖：

dependencies:
  flutter:
    sdk: flutter
  signalr_netcore: ^2.0.0 # 可根据最新版本调整

执行flutter pub get完成依赖安装。

2. 完善连接基础配置 #

你的初始代码缺少协议前缀（如http:///https://），且未指定Hub路径，这会导致连接失败，先修正配置：

import 'package:signalr_netcore/signalr_client.dart';

// 补全协议前缀，Hub路径需与后端配置一致（示例后端配置为MapHub<ChatHub>("/hub")）
final serverUrl = "http://192.168.10.50:51001/hub";

// 初始化Hub连接，可添加传输方式、认证头、自动重连等配置
final hubConnection = HubConnectionBuilder()
    .withUrl(
      serverUrl,
      HttpConnectionOptions(
        // 指定传输方式，优先用WebSocket
        transport: HttpTransportType.webSockets,
        // 可选：添加身份验证头（若后端需要）
        headers: {
          'Authorization': 'Bearer your_auth_token',
        },
      ),
    )
    .withAutomaticReconnect() // 启用自动重连机制
    .build();

3. 管理连接生命周期 #

封装连接、断开方法，建议在StatefulWidget的生命周期中调用，确保资源合理释放：

// 初始化连接并注册各类回调
Future<void> initSignalRConnection() async {
  // 监听连接成功事件
  hubConnection.on('Connected', (arguments) {
    print("SignalR 连接成功");
  });

  // 监听服务器推送的自定义事件（示例：服务器发送"ReceiveMessage"事件）
  hubConnection.on('ReceiveMessage', (arguments) {
    if (arguments?.isNotEmpty == true) {
      final message = arguments![0] as String;
      print("收到服务器消息：$message");
      // 此处可更新UI，比如将消息插入列表展示
    }
  });

  // 监听连接关闭
  hubConnection.onclose((error) {
    print("连接关闭，错误信息：${error?.message ?? '无'}");
  });

  // 监听重连过程
  hubConnection.onreconnecting((error) {
    print("正在重连...");
  });

  hubConnection.onreconnected((connectionId) {
    print("重连成功，新连接ID：$connectionId");
  });

  try {
    await hubConnection.start();
    print("SignalR 启动成功");
  } catch (e) {
    print("连接失败：$e");
    // 可添加重试逻辑，比如延迟3秒后重试
  }
}

// 主动断开连接
Future<void> disconnectSignalR() async {
  if (hubConnection.state == HubConnectionState.connected) {
    await hubConnection.stop();
    print("已断开SignalR连接");
  }
}

在Widget中集成上述方法：

class SignalRTestPage extends StatefulWidget {
  const SignalRTestPage({super.key});

  @override
  State<SignalRTestPage> createState() => _SignalRTestPageState();
}

class _SignalRTestPageState extends State<SignalRTestPage> {
  @override
  void initState() {
    super.initState();
    // 页面初始化时启动SignalR连接
    initSignalRConnection();
  }

  @override
  void dispose() {
    // 页面销毁时断开连接，释放资源
    disconnectSignalR();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("SignalR 测试")),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 调用服务器Hub方法（示例：调用"SendMessage"方法）
            try {
              await hubConnection.invoke("SendMessage", args: ["Flutter客户端", "Hello SignalR!"]);
              print("消息已发送至服务器");
            } catch (e) {
              print("调用服务器方法失败：$e");
            }
          },
          child: const Text("发送消息到服务器"),
        ),
      ),
    );
  }
}

4. 关键注意事项 #

• 地址准确性：必须包含协议前缀，且Hub路径要与后端配置完全匹配。
• 身份验证：若后端启用认证，需在请求头中携带合法的认证凭证（如JWT Token）。
• 异常处理：连接、调用方法时必须捕获异常，避免应用崩溃。
• 自动重连：启用withAutomaticReconnect()后，客户端会在连接断开时自动尝试重连，无需手动编写重连逻辑。

内容的提问来源于stack exchange，提问作者hsen atrash