Flutter如何使用SignalR_NetCore进行通信

在Flutter项目中需要与ASP.NET Core后端使用SignalR进行实时通信，但不太清楚具体实现步骤。请问如何在Flutter端集成SignalR客户端？是否需要额外插件？能否提供一个完整的示例代码，包括连接建立、消息发送和接收的流程？另外，在跨平台兼容性和断线重连方面有哪些需要注意的地方？

2 回复

在Flutter中使用SignalR_NetCore，需引入signalr_netcore包。创建HubConnection，配置服务器URL，监听事件并调用方法。示例代码：

final connection = HubConnectionBuilder()
    .withUrl('http://your-server/hub')
    .build();
await connection.start();
connection.on('ReceiveMessage', (message) {
  print(message);
});
await connection.invoke('SendMessage', args: ['Hello']);

更多关于Flutter如何使用SignalR_NetCore进行通信的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用SignalR进行通信，可以通过signalr_core包实现与ASP.NET Core SignalR服务的连接。以下是基本步骤：

1. 添加依赖

在pubspec.yaml中添加：

dependencies:
  signalr_core: ^1.1.0

2. 建立连接

import 'package:signalr_core/signalr_core.dart';

final connection = HubConnectionBuilder()
    .withUrl('https://your-server.com/chatHub')
    .build();

// 启动连接
await connection.start();

3. 处理消息

接收消息：

connection.on('ReceiveMessage', (List<dynamic> arguments) {
  print('收到消息: ${arguments[0]}');
});

发送消息：

await connection.invoke('SendMessage', args: ['Hello from Flutter!']);

4. 断开连接

await connection.stop();

5. 完整示例

class SignalRService {
  late HubConnection _connection;

  Future<void> init() async {
    _connection = HubConnectionBuilder()
        .withUrl('https://localhost:5001/chatHub')
        .build();

    _connection.on('ReceiveMessage', _handleMessage);
    
    await _connection.start();
  }

  void _handleMessage(List<dynamic> message) {
    print('收到: ${message[0]}');
  }

  Future<void> sendMessage(String text) async {
    await _connection.invoke('SendMessage', args: [text]);
  }

  void dispose() {
    _connection.stop();
  }
}

注意事项：

  1. 确保SignalR服务端已正确配置CORS
  2. 使用try/catch处理连接异常
  3. 在dispose中释放连接资源
  4. 支持自动重连：.withAutomaticReconnect()

服务端配置（ASP.NET Core）：

public void ConfigureServices(IServiceCollection services) {
    services.AddCors();
    services.AddSignalR();
}

public void Configure(IApplicationBuilder app) {
    app.UseCors(builder => builder
        .AllowAnyHeader()
        .AllowAnyMethod()
        .SetIsOriginAllowed((host) => true)
        .AllowCredentials());
    
    app.UseEndpoints(endpoints => {
        endpoints.MapHub<ChatHub>("/chatHub");
    });
}

这样即可实现Flutter与ASP.NET Core SignalR的双向实时通信。

回到顶部