Flutter SignalR通信插件signalr_core_new的使用

当然，以下是一个关于如何在Flutter项目中使用signalr_core_new插件来实现SignalR通信的示例代码。这个示例将展示如何连接到SignalR服务器、发送和接收消息。

首先，确保你已经在pubspec.yaml文件中添加了signalr_core_new依赖：

dependencies:
  flutter:
    sdk: flutter
  signalr_core_new: ^最新版本号  # 请替换为实际的最新版本号

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

接下来，创建一个Flutter项目并编写以下代码：

main.dart

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  HubConnection? _hubConnection;
  TextEditingController _messageController = TextEditingController();
  List<String> _messages = [];

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

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

  Future<void> initSignalR() async {
    _hubConnection = HubConnectionBuilder()
        .withUrl('https://你的signalr服务器地址/yourHubEndpoint')  // 替换为你的SignalR服务器地址和Hub端点
        .build();

    _hubConnection!.onclose((error) {
      print('Connection closed with error: ${error.reason}');
      setState(() {});
    });

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

    await _hubConnection!.start();
    if (_hubConnection!.state == HubConnectionState.connected) {
      print('Connected to SignalR server');
    }
  }

  Future<void> sendMessage() async {
    if (_hubConnection!.state == HubConnectionState.connected) {
      await _hubConnection!.invoke('SendMessage', [_messageController.text]);
      _messageController.clear();
      setState(() {});
    } else {
      print('Not connected to SignalR server');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter SignalR Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.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: 'Message',
                  border: OutlineInputBorder(),
                ),
              ),
              ElevatedButton(
                onPressed: sendMessage,
                child: Text('Send'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

说明

1. 依赖安装：确保在pubspec.yaml中添加了signalr_core_new依赖，并运行flutter pub get。
2. 初始化SignalR连接：在initState方法中初始化HubConnection，并设置连接URL。你需要替换'https://你的signalr服务器地址/yourHubEndpoint'为你的实际SignalR服务器地址和Hub端点。
3. 处理连接关闭事件：通过_hubConnection!.onclose方法处理连接关闭事件。
4. 接收消息：通过_hubConnection!.on方法监听来自服务器的消息，并在UI中显示。
5. 发送消息：通过_hubConnection!.invoke方法发送消息到服务器。
6. UI布局：使用ListView显示接收到的消息，使用TextField和ElevatedButton组件构建发送消息的界面。

这个示例展示了如何在Flutter应用中使用signalr_core_new插件实现基本的SignalR通信功能。根据你的具体需求，你可能需要调整代码以处理更多的SignalR事件和方法。