Flutter实时通信插件signalr_netcore的使用

介绍

signalr_netcore 是一个为 ASP.NET Core SignalR 设计的Flutter客户端库。它简化了在应用程序中添加实时Web功能的过程，允许服务器端代码即时向客户端推送内容。此客户端支持自动重连、调用服务端Hub函数（包括流式函数）以及接收来自服务端的方法调用。

支持的传输协议

• WebSocket
• Server Side Events
• Long Polling

支持的Hub协议

• JSON
• MessagePack

快速开始

要开始使用 signalr_netcore 插件，请先将其添加到您的 pubspec.yaml 文件中：

dependencies:
  flutter:
    sdk: flutter

  signalr_netcore: ^latest_version # 使用最新版本

注意：如果您遇到问题（例如无法接收到消息回调），可以尝试使用旧版本如 0.1.7+2-nullsafety.3，但请注意该版本不支持自动重连功能。

示例代码

下面是一个完整的示例程序，演示如何创建与SignalR服务器的连接，并实现基本的交互操作。

main.dart

import 'package:flutter/material.dart';
import 'package:signalr_netcore/signalr_client.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SignalR Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChatScreen(),
    );
  }
}

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final TextEditingController _controller = TextEditingController();
  final List<String> _messages = [];
  HubConnection? _hubConnection;

  @override
  void initState() {
    super.initState();
    _initHubConnection();
  }

  void _initHubConnection() async {
    final serverUrl = "http://localhost:5000/chatHub"; // 替换为您的服务器地址
    _hubConnection = HubConnectionBuilder()
        .withUrl(serverUrl)
        .build();

    // 监听来自服务器的消息
    _hubConnection!.on("ReceiveMessage", (List<Object?>? args) {
      if (args != null && args.isNotEmpty) {
        setState(() {
          _messages.add(args[0].toString());
        });
      }
    });

    try {
      await _hubConnection!.start();
      print("Connected to the hub.");
    } catch (e) {
      print("Error connecting to the hub: $e");
    }
  }

  void _sendMessage(String message) async {
    try {
      await _hubConnection!.invoke("SendMessage", args: <Object>[message]);
      _controller.clear();
    } catch (e) {
      print("Failed to send message: $e");
    }
  }

  @override
  void dispose() {
    _hubConnection?.stop();
    _hubConnection?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('SignalR Chat')),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _messages.length,
              itemBuilder: (context, index) {
                return ListTile(title: Text(_messages[index]));
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(hintText: 'Type a message...'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () => _sendMessage(_controller.text),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

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

确保您的ASP.NET Core应用程序已正确配置SignalR，并且启用了所需的协议（JSON或MessagePack）。这里以简单的聊天Hub为例：

Startup.cs

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddSignalR(); // 如果使用MessagePack协议，则添加.AddMessagePackProtocol()
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseRouting();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapHub<ChatHub>("/chatHub");
        });
    }
}

ChatHub.cs

public class ChatHub : Hub
{
    public async Task SendMessage(string user, string message)
    {
        await Clients.All.SendAsync("ReceiveMessage", $"{user}: {message}");
    }
}

通过以上步骤，您应该能够成功地在Flutter应用中集成SignalR并实现基本的实时通信功能。根据实际需求，您可以进一步扩展和优化这些代码片段。