Flutter实时通信插件messaging_signalr的使用

介绍

messaging_signalr 包用于管理基于 SignalR 的消息应用程序所需的所有数据和功能。

使用方法

在 pubspec.yaml 文件中添加依赖：

dependencies:
  messaging_signalr: 1.0.0

导入包：

import 'package:messaging_signalr/messaging_signalr.dart';

初始化

在使用包的功能之前，必须调用 init 函数。在初始化函数中，你需要配置服务器地址，并传递从 FirebaseMessaging 接收到的 Firebase Token（详见 firebase_messaging 包）。此外，还需要传递一些回调函数，这些回调函数将在任务成功或失败时被调用。

SignalRMessaging.init(
    serverAddress: 'http://167.235.239.170:5025/Myhub', // 替换为你的 SignalR 服务器地址
    firebaseToken: ConstValues.fireBaseToken, // 替换为你的 Firebase Token
    onSendMessage: () {}, // 消息发送完成时调用
    onGetContactInfo: () {}, // 添加新联系人后，接收联系人信息完成后调用
    onGetContactInfoCanceled: (String message) { // 获取联系人信息失败时调用
      print('获取联系人信息失败: $message');
    },
    onCreateGroup: (String message) { // 创建群组成功或已存在时调用
      print('创建群组结果: $message');
    },
);

示例代码

以下是一个完整的示例，展示如何使用 messaging_signalr 显示聊天列表。

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

class ChatListPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('聊天列表'),
      ),
      body: ListView(
        children: [
          ...SignalRMessaging.chats.map((chat) {
            return Container(
              height: 65,
              decoration: const BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                    width: 1.0,
                    color: Colors.black,
                    style: BorderStyle.solid,
                  ),
                ),
              ),
              child: Row(
                children: [
                  // 用户头像
                  Container(
                    margin: const EdgeInsets.only(right: 8.0, left: 8.0, bottom: 8.0),
                    padding: const EdgeInsets.all(10),
                    height: 60,
                    width: 60,
                    decoration: BoxDecoration(
                      color: Colors.blue,
                      borderRadius: BorderRadius.circular(30),
                    ),
                    child: FittedBox(
                      fit: BoxFit.fitWidth,
                      child: Text(
                        firstTwoCharsOfName(chat.userName ?? chat.chatId), // 显示用户名的前两个字符
                        style: const TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                  // 聊天信息
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Padding(
                          padding: const EdgeInsets.only(bottom: 8.0),
                          child: Text(
                            chat.userName ?? chat.chatId, // 显示用户名或聊天ID
                            style: const TextStyle(
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                              color: Colors.black,
                            ),
                          ),
                        ),
                        Text(
                          chat.messages.isNotEmpty
                              ? "${chat.messages.last.senderUserName}: ${chat.messages.last.text}" // 最近一条消息
                              : chat.type == ChatType.contact
                                  ? "向 ${chat.userName} 打招呼！"
                                  : "向所有人打招呼！",
                          style: const TextStyle(
                            color: Colors.black,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            );
          }).toList(),
        ],
      ),
    );
  }

  String firstTwoCharsOfName(String name) {
    return name.length > 2 ? name.substring(0, 2) : name;
  }
}