Flutter即时通讯插件tencent_im_plugin的使用
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 完美的音量控制器插件 | |
Flutter | FlutterTencentImPlugin | 腾讯云IM插件 | |
Flutter | FlutterTencentRtcPlugin | 腾讯云Rtc插件 | |
Flutter | FlutterXiaoMiPushPlugin | 小米推送SDK插件 | |
Flutter | FlutterHuaWeiPushPlugin | 华为推送(HMS Push)插件 | |
Flutter | FlutterTextSpanField | 自定义文本样式输入框 | |
Flutter | FlutterClipboardListener | 粘贴板监听器 | |
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
更多关于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('发送'),
),
],
);
},
);
}
}
注意事项
- SDKAppId、UserId和UserSig:你需要从腾讯云IM控制台获取这些参数,并替换示例代码中的占位符。
- 错误处理:示例代码中没有包含详细的错误处理逻辑,实际项目中应添加适当的错误处理。
- UI更新:示例代码中的UI更新部分较为简单,实际项目中可能需要更复杂的UI来展示聊天记录。
- 权限:确保你的Android和iOS项目已经配置了必要的权限,以便能够正常使用Tencent IM插件。
这个示例代码展示了如何在Flutter中使用tencent_im_plugin
进行基本的即时通讯操作。根据实际需求,你可能需要进一步完善和扩展这个示例。