Flutter即时通讯插件tencent_im_plugin的使用

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

Flutter即时通讯插件tencent_im_plugin的使用

什么是FlutterTencentIm?

FlutterTencentIM是基于腾讯云即时通讯服务进行的Flutter封装,为Flutter提供即时通讯服务。

3.X 版本更新内容

最新计划为3.x,大致更改内容如下:

功能列表 进度
保持基础接口不变
SDK从原有标准版升级为增强版 ☑️
增加增强版所有功能 ☑️

注意事项

新版插件支持空安全(null-safety)。如需查看非空安全版本,请切换分支到:sdk-5.1.x-non-null-safety
如果您对FlutterTencentIm开放Pull Request,merge成功后会在README.md上留下您的大名并超链到您的Github主页!

官方版和社区版的区别

  • 两者区别:本质上官方版和社区版都是基于IM的SDK进行封装,官方版的更偏向三端写法(Android、iOS、Flutter),社区版则提供更便捷的使用方式(1分钟上手即用)(例如: FlutterImPlugin.login)。
  • 如何选择:根据个人编码习惯选择即可。
  • 维护周期:社区版和官方版均在持续迭代,发现异常将会在第一时间进行修复。

SDK版本

平台 SDK版本
Android 5.1.62
iOS 5.1.60

相关链接

定制化需求

如果您的项目有定制化需求,可通过QQ(690717394) 或 邮箱(690717394@qq.com) 联系我,该项服务为有偿服务,具体价格根据需求量进行决定。

其他插件

我同时维护的还有以下插件,如果您感兴趣与我一起进行维护,请通过Github联系我,欢迎 issues 和 PR。

平台 插件 描述 版本
Flutter FlutterVideoPlayerLibrary-Desc Flutter 最好用的播放器(UI库) -
Flutter FlutterPerfectVolumeControl Flutter 完美的音量控制器插件 pub package
Flutter FlutterTencentImPlugin 腾讯云IM插件 pub package
Flutter FlutterTencentRtcPlugin 腾讯云Rtc插件 pub package
Flutter FlutterXiaoMiPushPlugin 小米推送SDK插件 pub package
Flutter FlutterHuaWeiPushPlugin 华为推送(HMS Push)插件 pub package
Flutter FlutterTextSpanField 自定义文本样式输入框 pub package
Flutter FlutterClipboardListener 粘贴板监听器 pub package
Flutter FlutterQiniucloudLivePlugin Flutter 七牛云直播云插件 暂未发布,通过 git 集成

贡献者 ✨

感谢这些优秀的贡献者:

贡献者 贡献类型
cyrus Bug 报告
宋佳宾 代码
ligui-iOS 代码
LAIIIHZ 代码

该项目遵循 all-contributors 规范。任何类型的贡献都欢迎!

示例代码

示例代码文件路径

example/lib/main.dart

示例代码内容

import 'package:flutter/material.dart';
import 'package:tencent_im_plugin_example/page/chat.dart';
import 'package:tencent_im_plugin_example/page/home.dart';
import 'package:tencent_im_plugin_example/page/interfaces_test.dart';
import 'package:tencent_im_plugin_example/page/login.dart';
import 'package:tencent_im_plugin_example/page/main/main.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      routes: {
        "/": (context) => HomePage(),
        "/interfaces_test": (context) => InterfacesTest(),
        "/login": (context) => Login(),
        "/main": (context) => Main(),
        "/chat": (context) => Chat(),
      },
    );
  }
}

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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用tencent_im_plugin插件进行即时通讯的示例代码。这个示例将展示如何初始化插件、登录、发送和接收消息的基本流程。请注意,这只是一个基础示例,实际项目中可能需要更多的错误处理和功能扩展。

首先,确保你的Flutter项目中已经添加了tencent_im_plugin依赖。在pubspec.yaml文件中添加以下依赖:

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

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

接下来是示例代码:

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tencent IM Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: IMHomePage(),
    );
  }
}

class IMHomePage extends StatefulWidget {
  @override
  _IMHomePageState createState() => _IMHomePageState();
}

class _IMHomePageState extends State<IMHomePage> {
  late TencentIMClient _client;
  String? _userId;
  String? _userSig;
  String? _sdkAppId;

  @override
  void initState() {
    super.initState();
    // 初始化SDK参数
    _sdkAppId = "你的SDKAppId";
    _userId = "用户ID";  // 替换为你的用户ID
    _userSig = "用户Sig";  // 替换为你的用户Sig,通常是从服务器获取的

    // 初始化Tencent IM客户端
    _client = TencentIMClient(
      sdkAppId: _sdkAppId!,
      userId: _userId!,
      userSig: _userSig!,
    );

    // 登录
    _login();
  }

  Future<void> _login() async {
    try {
      await _client.login();
      print("登录成功");
      // 登录成功后,可以开始接收消息
      _startReceiveMessages();
    } catch (e) {
      print("登录失败: $e");
    }
  }

  void _startReceiveMessages() {
    _client.addMessageListener((message) {
      // 处理接收到的消息
      print("收到消息: $message");
      // 更新UI,显示消息等
      setState(() {});
    });
  }

  Future<void> _sendMessage(String toUserId, String content) async {
    try {
      await _client.sendMessage(
        toUserId: toUserId,
        messageBody: TIMMessageBody.text(content),
      );
      print("消息发送成功");
    } catch (e) {
      print("消息发送失败: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Tencent IM Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              decoration: InputDecoration(labelText: 'To User ID'),
              onSubmitted: (toUserId) {
                TextField(
                  decoration: InputDecoration(labelText: 'Message'),
                  onSubmitted: (content) {
                    _sendMessage(toUserId, content);
                  },
                ).showDialog(context: context);
              },
            ),
            SizedBox(height: 16),
            // 这里可以添加显示聊天记录的UI
            Text('聊天记录将显示在这里...'),
          ],
        ),
      ),
    );
  }
}

// 扩展TextField,使其具有显示对话框的功能
extension TextFieldExtensions on TextField {
  Future<void> showDialog({required BuildContext context}) async {
    return showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('发送消息'),
          content: this,
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text('取消'),
            ),
            TextButton(
              onPressed: () {
                controller?.text?.let((content) {
                  // 在这里调用发送消息的逻辑
                  // 注意:这里的调用逻辑需要根据实际情况调整
                  // 例如,你可能需要传递toUserId和content到某个函数中
                  Navigator.pop(context);
                });
              },
              child: Text('发送'),
            ),
          ],
        );
      },
    );
  }
}

注意事项

  1. SDKAppId、UserId和UserSig:你需要从腾讯云IM控制台获取这些参数,并替换示例代码中的占位符。
  2. 错误处理:示例代码中没有包含详细的错误处理逻辑,实际项目中应添加适当的错误处理。
  3. UI更新:示例代码中的UI更新部分较为简单,实际项目中可能需要更复杂的UI来展示聊天记录。
  4. 权限:确保你的Android和iOS项目已经配置了必要的权限,以便能够正常使用Tencent IM插件。

这个示例代码展示了如何在Flutter中使用tencent_im_plugin进行基本的即时通讯操作。根据实际需求,你可能需要进一步完善和扩展这个示例。

回到顶部