Flutter实时通信插件signalr_core的使用

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

Flutter实时通信插件signalr_core的使用

Introduction

ASP.NET Core SignalR 是一个开源库,它简化了向应用程序添加实时Web功能的过程。实时Web功能使得服务器端代码可以即时推送内容到客户端。它是平台无关的,可以在命令行和浏览器中使用。

signalr_core 是一个用于Flutter项目的Dart包,允许开发者通过SignalR协议与ASP.NET Core SignalR服务进行交互,实现客户端和服务端之间的实时通信。

安装

在您的pubspec.yaml文件中添加依赖:

dependencies:
  signalr_core: ^0.3.0 # 请根据最新版本号调整

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

示例Demo

下面是一个完整的示例demo,演示如何使用signalr_core创建一个简单的聊天应用,该应用连接到本地运行的ASP.NET Core SignalR Hub,并发送和接收消息。

main.dart

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:http/io_client.dart';
import 'package:signalr_core/signalr_core.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 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 = [];
  late HubConnection _connection;

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

  Future<void> _initializeConnection() async {
    _connection = HubConnectionBuilder()
        .withUrl(
          'http://localhost:5115/chatHub',
          HttpConnectionOptions(
            client: IOClient(
                HttpClient()..badCertificateCallback = (x, y, z) => true),
            logging: (level, message) => print(message),
          ),
        )
        .build();

    await _connection.start();

    _connection.on('ReceiveMessage', (message) {
      setState(() {
        _messages.add(message.toString());
      });
    });

    _connection.onclose(() {
      print('Connection closed');
    });
  }

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter SignalR Chat'),
      ),
      body: Column(
        children: <Widget>[
          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: <Widget>[
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(hintText: 'Enter message...'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () {
                    if (_controller.text.isNotEmpty) {
                      _sendMessage('User', _controller.text);
                      _controller.clear();
                    }
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

说明

  1. 初始化连接:在_initializeConnection方法中,我们创建了一个HubConnection实例,并设置了URL、HTTP连接选项(包括日志记录)。
  2. 监听消息:通过_connection.on('ReceiveMessage', ...)监听来自服务器的消息,并将其添加到消息列表中。
  3. 发送消息:用户输入消息后点击发送按钮,调用_sendMessage方法将消息发送给服务器。
  4. UI展示:使用Flutter的ListView组件展示聊天记录,TextFieldIconButton组合成输入框和发送按钮。

此示例展示了如何在Flutter应用中集成signalr_core以实现基本的实时聊天功能。实际项目中可能需要根据具体需求调整配置和逻辑。


更多关于Flutter实时通信插件signalr_core的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter实时通信插件signalr_core的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter项目中使用signalr_core插件来实现实时通信的示例代码。这个示例假定你已经有一个运行中的SignalR服务器,并且你希望从Flutter客户端连接到该服务器并接收实时消息。

首先,确保你已经在pubspec.yaml文件中添加了signalr_core依赖:

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

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

接下来,在你的Flutter项目中创建一个新的Dart文件(例如signalr_service.dart),用于管理SignalR连接和消息处理。

// signalr_service.dart

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

class SignalRService {
  late HubConnection _connection;
  final String serverUrl = "https://your-signalr-server-url";  // 替换为你的SignalR服务器URL

  SignalRService() {
    initializeConnection();
  }

  Future<void> initializeConnection() async {
    _connection = HubConnectionBuilder()
        .withUrl(serverUrl, HttpTransportType.WebSockets)
        .withAutomaticReconnect()
        .build();

    _connection.onclose((error) {
      print("Connection closed due to error. Trying to reconnect...");
      startConnection();
    });

    await startConnection();
  }

  Future<void> startConnection() async {
    try {
      await _connection.start();
      print("Connected to SignalR server");

      // 订阅服务器上的某个方法,比如 "ReceiveMessage"
      _connection.on("ReceiveMessage", (arguments) {
        // 假设服务器发送的是一个包含 "user" 和 "message" 的对象
        Map<String, dynamic> message = Map.from(arguments);
        String user = message["user"] as String;
        String content = message["message"] as String;

        // 在UI中显示消息,这里通过GlobalKey和State来更新UI
        // 假设你有一个GlobalKey<NavigatorState> navigatorKey在你的MaterialApp中
        // 并且你有一个全局的或者可以通过某种方式访问的State对象
        // 例如:MyAppState.of(context).updateMessage(user, content);
      });
    } catch (e) {
      print("Error while starting connection: $e");
    }
  }

  Future<void> sendMessage(String user, String message) async {
    try {
      await _connection.invoke("SendMessage", user, message);
    } catch (e) {
      print("Error while sending message: $e");
    }
  }

  void stopConnection() async {
    await _connection.stop();
    print("Disconnected from SignalR server");
  }
}

然后,在你的主应用文件(例如main.dart)中,使用这个SignalRService来处理实时通信。

// main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChatScreen(),
    );
  }
}

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            Expanded(
              child: ListView.builder(
                itemCount: _messages.length,
                itemBuilder: (context, index) {
                  return Text(_messages[index]);
                },
              ),
            ),
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Message',
                suffixIcon: IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () {
                    String message = _controller.text;
                    if (message.isNotEmpty) {
                      _signalRService.sendMessage("YourUserName", message);
                      _messages.add("You: $message");
                      setState(() {});
                      _controller.clear();
                    }
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    _signalRService.stopConnection();
    super.dispose();
  }
}

在这个示例中,SignalRService类负责初始化和管理SignalR连接,并处理接收到的消息。ChatScreen是一个简单的聊天界面,用户可以在其中发送消息,并通过SignalR服务器接收消息。

请注意,这个示例假设你的SignalR服务器已经配置好,并且有一个名为SendMessage的方法用于接收客户端发送的消息,以及一个名为ReceiveMessage的方法用于向客户端发送消息。你可能需要根据你的服务器实现来调整这个示例。

回到顶部