Flutter即时通讯插件tinode_community的使用

本SDK实现了基于dart的多平台应用客户端侧协议。该协议与Tinode服务器配合使用。你可以从pub页面找到已发布的包和版本。

安装

添加依赖

对于dart应用程序，运行以下命令：

dart pub add tinode

对于flutter应用程序，运行以下命令：

flutter pub add tinode

导入库

在你的Dart代码中，可以这样导入：

import 'package:tinode/tinode.dart';

获取支持

• 阅读服务器端API文档以了解有关数据包的信息。
• 完整的文档将在不久后创建。
• 你可以在./example目录下看到一个简单的示例。
• 如有bug或功能请求，请提交问题。

平台支持

• 服务器
• 命令行脚本
• Flutter移动应用
• Flutter桌面应用

示例代码

以下是使用tinode_community插件的一个简单示例。

主页（HomePage）

import 'package:example/controllers/chat_controller.dart';
import 'package:example/controllers/contacts_controller.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'app.dart';

void main() => runApp(const App());

class HomePage extends GetView<ContactsController> {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Obx(
      () => Scaffold(
        appBar: AppBar(title: const Text('Tinode by community')),
        body: Column(
          children: [
            Expanded(child: _buildListContacts()), // 构建联系人列表
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(
                  onPressed: () => controller.login('alice', 'alice123'), // 登录为Alice
                  child: const Text('Alice'),
                ),
                ElevatedButton(
                  onPressed: () => controller.login('bob', 'bob123'), // 登录为Bob
                  child: const Text('Bob'),
                ),
                ElevatedButton(
                  onPressed: () {
                    // TODO: 实现登出功能
                  },
                  child: const Text('SignOut'),
                ),
              ],
            )
          ],
        ),
        floatingActionButton: _buildFloatingActionButton(), // 构建浮动按钮
      ),
    );
  }

  ListView _buildListContacts() {
    return ListView.builder(
      itemCount: controller.topics.length, // 联系人数量
      itemBuilder: (_, i) {
        final item = controller.topics[i]; // 当前联系人
        return ListTile(
          onTap: () => Get.toNamed('/chat', arguments: item), // 点击跳转到聊天界面
          title: Text(item.public['fn']), // 显示联系人名称
          subtitle: Text(item.topic ?? ''), // 显示主题
        );
      },
    );
  }

  Widget _buildFloatingActionButton() {
    return Container(
      margin: const EdgeInsets.only(bottom: kToolbarHeight), // 浮动按钮位置
      child: FloatingActionButton(
        onPressed: () {}, // 暂时未实现功能
        child: const Icon(CupertinoIcons.add), // 图标
      ),
    );
  }
}

聊天页面（ChatPage）

class ChatPage extends GetView<ChatController> {
  ChatPage({Key? key}) : super(key: key);
  final _txtController = TextEditingController(); // 文本控制器

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Obx(
      () => Scaffold(
        appBar: AppBar(title: Text(controller.topic.public['fn'] ?? '')), // 显示聊天对象名称
        body: Column(
          children: [
            _buildListMessage(), // 构建消息列表
            _buildInput(), // 构建输入框
          ],
        ),
      ),
    );
  }

  TextField _buildInput() {
    return TextField(
      controller: _txtController, // 绑定文本控制器
      textInputAction: TextInputAction.send, // 回车键发送
      decoration: const InputDecoration(border: OutlineInputBorder()), // 输入框样式
      autofocus: true, // 自动聚焦
      onSubmitted: (v) {
        controller.sendText(v); // 发送消息
        _txtController.clear(); // 清空输入框
      },
    );
  }

  Expanded _buildListMessage() {
    return Expanded(
      child: ListView.builder(
        itemCount: controller.messages.length, // 消息数量
        itemBuilder: (_, i) {
          final item = controller.messages[i]; // 当前消息
          Widget widget;
          if (item.content.isNotEmpty) widget = Text(item.content); // 显示消息内容
          widget = const SizedBox(); // 默认为空
          return ListTile(
            title: widget, // 显示消息内容
          );
        },
      ),
    );
  }
}