Flutter与ASP.NET Core 3信号R通信插件signalr_netcore3的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter与ASP.NET Core 3信号R通信插件signalr_netcore3的使用

简介

signalr_netcore 是一个用于 ASP.NET Core 的 Flutter SignalR 客户端。它简化了在应用程序中添加实时Web功能的过程,使服务器端代码能够即时推送内容到客户端。

主要特性

  • 支持 WebSocket、Server Side Events 和 Long Polling 传输协议。
  • 支持 Json 和 MessagePack 协议。
  • 支持自动重连功能。

开始使用

首先,在 pubspec.yaml 文件中添加 signalr_netcore 依赖:

dependencies:
  flutter:
    sdk: flutter

  signalr_netcore: ^0.1.7+2-nullsafety.3

示例 Demo

以下是一个简单的示例,展示如何使用 signalr_netcore 进行基本的连接和通信。

创建 Hub 连接

import 'package:signalr_netcore3/signalr_client.dart';

// SignalR Server 地址
final serverUrl = "http://192.168.0.4:5000/chatHub";

// 创建连接
final hubConnection = HubConnectionBuilder()
    .withUrl(serverUrl)
    .build();

// 监听连接关闭事件
hubConnection.onclose((error) => print("Connection Closed"));

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

调用 Hub 方法

假设服务器端有一个方法 MethodOneSimpleParameterSimpleReturnValue

public string MethodOneSimpleParameterSimpleReturnValue(string p1)
{
    Console.WriteLine($"'MethodOneSimpleParameterSimpleReturnValue' invoked. Parameter value: '{p1}'");
    return p1;
}

在客户端可以这样调用该方法:

final result = await hubConnection.invoke(
    "MethodOneSimpleParameterSimpleReturnValue",
    args: <Object>["ParameterValue"]
);

print("Result: $result");

注册客户端方法

假设服务器端调用客户端的方法 aClientProvidedFunction

await Clients.Caller.SendAsync("aClientProvidedFunction", null);

在客户端注册该方法:

void _handleAClientProvidedFunction(List<Object> parameters) {
    print("Server invoked the method");
}

hubConnection.on("aClientProvidedFunction", _handleAClientProvidedFunction);

使用 MsgPack 进行序列化

如果需要使用 MsgPack 进行序列化,需在客户端和服务器端都进行配置。

客户端配置

import 'package:signalr_netcore3/msgpack_hub_protocol.dart';

final hubConnection = HubConnectionBuilder()
    .withUrl(serverUrl)
    .withHubProtocol(MessagePackHubProtocol())
    .withAutomaticReconnect()
    .configureLogging(logger)
    .build();

服务器端配置

ASP.NET Core 项目中添加 Microsoft.AspNetCore.SignalR.Protocols.MessagePack 包,并在 ConfigureServices 中进行配置:

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

完整示例

以下是一个完整的 Flutter 应用示例,展示了如何实现一个简单的聊天应用。

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

const kChatServerUrl = "http://192.168.0.4:5000/chatHub";

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  final TextEditingController _controller = TextEditingController();
  final List<String> _messages = [];
  late HubConnection _hubConnection;

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

  void _initializeSignalR() {
    _hubConnection = HubConnectionBuilder()
        .withUrl(kChatServerUrl)
        .build();

    _hubConnection.on("ReceiveMessage", (message) {
      setState(() {
        _messages.add(message[0]);
      });
    });

    _hubConnection.start();
  }

  void _sendMessage(String message) async {
    await _hubConnection.invoke("SendMessage", args: <Object>[message]);
    _controller.clear();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('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: 'Enter a message'),
                    ),
                  ),
                  IconButton(
                    icon: Icon(Icons.send),
                    onPressed: () {
                      _sendMessage(_controller.text);
                    },
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

以上是 FlutterASP.NET Core 3 信号R通信插件 signalr_netcore3 的使用介绍及完整示例。通过这个示例,您可以快速搭建一个基于 SignalR 的实时通信应用。


更多关于Flutter与ASP.NET Core 3信号R通信插件signalr_netcore3的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter与ASP.NET Core 3信号R通信插件signalr_netcore3的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用signalr_netcore3插件与ASP.NET Core 3 SignalR进行通信,可以通过以下步骤实现。以下是一个简单的代码示例,展示如何在Flutter客户端和ASP.NET Core 3服务器端建立SignalR连接并进行消息通信。

ASP.NET Core 3 SignalR 服务器端

首先,确保你的ASP.NET Core 3项目已经安装了SignalR相关的NuGet包:

dotnet add package Microsoft.AspNetCore.SignalR

然后,配置SignalR服务:

// Startup.cs
public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddSignalR();
        // 其他服务配置...
    }

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

        app.UseRouting();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapHub<ChatHub>("/chat");
            // 其他端点配置...
        });
    }
}

创建一个Hub类来处理客户端连接和消息:

// ChatHub.cs
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

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

Flutter 客户端

在Flutter项目中,添加signalr_netcore3依赖:

# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  signalr_netcore3: ^x.y.z  # 替换为最新版本号

然后,运行flutter pub get来获取依赖。

接下来,在Flutter应用中初始化SignalR连接并进行通信:

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

  void initSignalR() async {
    _hubConnection = await HubConnectionBuilder()
        .withUrl('http://your-server-address:your-port/chat')  // 替换为你的服务器地址和端口
        .build();

    _hubConnection!.on('ReceiveMessage', (user, message) {
      setState(() {
        _messages.add('$user: $message');
      });
    });

    await _hubConnection!.start();
  }

  void sendMessage() async {
    String user = 'User1';  // 可以根据实际需求获取用户名
    String message = _messageController.text;
    await _hubConnection!.invoke('SendMessage', user, message);
    _messageController.clear();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter SignalR Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: <Widget>[
              Expanded(
                child: ListView.builder(
                  itemCount: _messages.length,
                  itemBuilder: (context, index) {
                    return Text(_messages[index]);
                  },
                ),
              ),
              TextField(
                controller: _messageController,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Message',
                ),
                onSubmitted: (value) {
                  sendMessage();
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

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

注意事项

  1. 服务器地址:确保withUrl方法中的URL正确指向你的ASP.NET Core SignalR服务器。
  2. CORS如果你的Flutter应用与ASP.NET Core服务器不在同一个域上,你需要在服务器上配置CORS。
  3. 错误处理:在生产环境中,添加适当的错误处理机制来处理连接失败、消息发送失败等情况。

以上代码展示了如何在Flutter客户端和ASP.NET Core 3服务器端使用signalr_netcore3插件进行SignalR通信。根据实际需求,你可能需要进一步定制和扩展这个示例。

回到顶部