Flutter实时通信插件signalr_dart的使用

当然，下面是一个关于如何在Flutter应用中使用signalr_dart插件来实现实时通信的代码案例。这个插件允许你与ASP.NET Core SignalR服务器进行通信。

首先，你需要在你的Flutter项目中添加signalr_dart依赖。在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  signalr_dart: ^x.y.z  # 请替换为最新版本号

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

接下来，你需要配置SignalR连接并处理消息。以下是一个完整的示例，包括连接到SignalR服务器、发送消息和处理接收到的消息。

import 'package:flutter/material.dart';
import 'package:signalr_dart/signalr.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: SignalRScreen(),
    );
  }
}

class SignalRScreen extends StatefulWidget {
  @override
  _SignalRScreenState createState() => _SignalRScreenState();
}

class _SignalRScreenState extends State<SignalRScreen> {
  late HubConnection _hubConnection;
  final TextEditingController _messageController = TextEditingController();
  final List<String> _messages = [];

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

  void initSignalR() async {
    // 替换为你的SignalR服务器URL
    String serverUrl = 'https://your-signalr-server-url';
    _hubConnection = HubConnectionBuilder()
        .withUrl(serverUrl)
        .withAutomaticReconnect()
        .build();

    _hubConnection.onclose((error) {
      print('Connection closed with error: ${error?.message}');
      initSignalR(); // 尝试重新连接
    });

    _hubConnection.on('ReceiveMessage', (arguments) {
      final message = arguments[0] as String;
      setState(() {
        _messages.add(message);
      });
    });

    await _hubConnection.start();
    print('Connected to SignalR server');
  }

  void sendMessage() async {
    if (_messageController.text.isNotEmpty) {
      await _hubConnection.invoke('SendMessage', _messageController.text);
      _messageController.clear();
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SignalR Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child: ListView.builder(
                itemCount: _messages.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(_messages[index]),
                  );
                },
              ),
            ),
            TextField(
              controller: _messageController,
              decoration: InputDecoration(
                labelText: 'Send a message',
                border: OutlineInputBorder(),
              ),
              onEditingComplete: sendMessage,
            ),
            ElevatedButton(
              onPressed: sendMessage,
              child: Text('Send'),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明：

1. 依赖安装：在pubspec.yaml中添加signalr_dart依赖。
2. SignalR连接初始化：在initSignalR方法中初始化HubConnection，并设置自动重连。
3. 处理接收到的消息：通过_hubConnection.on方法监听ReceiveMessage事件，并将接收到的消息添加到UI中。
4. 发送消息：通过_hubConnection.invoke方法调用SendMessage方法发送消息。
5. UI构建：使用ListView显示接收到的消息，并提供一个TextField和ElevatedButton用于发送消息。

请确保你的SignalR服务器已经正确配置，并且有一个名为ReceiveMessage的事件和一个名为SendMessage的方法。这样，你就可以在Flutter应用中实现实时通信了。