Flutter即时通讯插件flutter_openim_sdk的使用
Flutter即时通讯插件flutter_openim_sdk的使用
Flutter Client SDK for OpenIM 👨💻💬
使用此SDK可以将即时通讯功能添加到您的Flutter应用中。通过连接到自托管的 OpenIM 服务器,您可以快速集成即时通讯功能,只需几行代码即可。
文档 📚
访问 https://docs.openim.io/ 获取详细文档和指南。
对于SDK参考,请参阅 https://docs.openim.io/sdks/quickstart/flutter。
安装 💻
添加依赖
在 pubspec.yaml
文件中添加以下依赖:
dependencies:
flutter_openim_sdk: latest
使用 🚀
以下示例展示了如何使用该SDK。
导入SDK
import 'package:flutter_openim_sdk/flutter_openim_sdk.dart';
初始化
final success = await OpenIM.iMManager.initSDK(
platform: 0, // 平台,参照 IMPlatform 类。
apiAddr: "", // SDK 的 API 接口地址。
wsAddr: "", // SDK 的 WebSocket 地址。
dataDir: "", // 数据存储路径。例如,可以使用 getApplicationDocumentsDirectory() 获取路径。
logLevel: 6, // 日志级别(默认值为 6)。
listener: OnConnectListener(
onConnectSuccess: () {
// 成功连接到服务器。
},
onConnecting: () {
// 正在连接到服务器,适合在UI上显示“正在连接”状态。
},
onConnectFailed: (code, errorMsg) {
// 连接服务器失败,可以通知用户当前网络连接不可用。
},
onUserSigExpired: () {
// 用户的登录令牌(UserSig)已过期,提示用户使用新令牌重新登录。
},
onKickedOffline: () {
// 当前用户已被踢下线,可以提示用户使用类似“您已在其他设备上登录。是否要重新登录?”的消息重新登录。
},
),
);
登录并监听连接状态
注意1: 您需要先部署 OpenIM 服务器,默认端口为 10001 和 10002。
注意2: 您需要先设置监听器,然后再登录。
// 设置监听器
OpenIM.iMManager
..userManager.setUserListener(OnUserListener())
// 添加消息监听器(不使用时移除)
..messageManager.setAdvancedMsgListener(OnAdvancedMsgListener())
// 设置消息发送进度监听器
..messageManager.setMsgSendProgressListener(OnMsgSendProgressListener())
..messageManager.setCustomBusinessListener()
// 设置好友关系监听器
..friendshipManager.setFriendshipListener(OnFriendshipListener())
// 设置会话监听器
..conversationManager.setConversationListener(OnConversationListener())
// 设置群组监听器
..groupManager.setGroupListener(OnGroupListener());
// 获取当前登录用户的资料
final userInfo = await OpenIM.iMManager.login(
userID: "", // userID 从您自己的业务服务器获取
token: "", // token 应由您的业务服务器通过密钥与 OpenIM 服务器交换获取
);
要登录IM服务器,您需要创建一个账户并获取用户ID和token。详情请参阅 访问令牌文档。
发送和接收消息 💬
OpenIM 使得发送和接收消息变得简单。默认情况下,发送消息不受好友关系限制(尽管您可以在服务器上配置其他策略)。如果您知道收件人的用户ID,可以方便地向他们发送消息。
// 发送消息
OpenIM.iMManager.messageManager.sendMessage(
message: await OpenIM.iMManager.messageManager.createTextMessage(
text: 'hello openim',
),
userID: userID,
).catchError((error, _) {
// 消息发送成功 ✉️
}).whenComplete(() {
// 消息发送失败 ❌
});
// 接收消息
OpenIM.iMManager.messageManager.setAdvancedMsgListener(OnAdvancedMsgListener(
onRecvNewMessage: (Message msg) {
// 收到新消息 📨
},
));
示例 🌟
您可以在 open-im-flutter-demo 仓库中找到使用该SDK的示例Flutter应用。
社区 👥
- 📚 OpenIM 社区
- 💕 OpenIM 兴趣小组
- 🚀 加入我们的 Slack 社区
- 👀 加入我们的微信群
社区会议 📆
我们希望任何人都能参与我们的社区并贡献代码,我们提供礼物和奖励,欢迎每星期四晚上加入我们。
我们的会议在 OpenIM Slack 中进行,然后您可以搜索 Open-IM-Server 频道加入。
我们在 GitHub 讨论 中记录每次 双周会议,历史会议记录和会议回放可在 Google Docs 中查看。
谁在使用 OpenIM 👀
请查看我们的 用户案例研究 页面,了解项目用户列表。不要犹豫,留下 📝评论 并分享您的使用案例。
许可证 📄
OpenIM 采用 Apache 2.0 许可证。详见 LICENSE。
示例代码
以下是一个完整的示例代码,展示了如何在Flutter应用中使用 flutter_openim_sdk
插件。
import 'package:flutter/material.dart';
import 'package:flutter_openim_sdk/flutter_openim_sdk.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
OpenIM.iMManager.initSDK(
platform: 0, // 平台,参照 IMPlatform 类。
apiAddr: "", // SDK 的 API 接口地址。
wsAddr: "", // SDK 的 WebSocket 地址。
dataDir: "", // 数据存储路径。例如,可以使用 getApplicationDocumentsDirectory() 获取路径。
logLevel: 6, // 日志级别(默认值为 6)。
listener: OnConnectListener(
onConnectSuccess: () {
// 成功连接到服务器。
},
onConnecting: () {
// 正在连接到服务器,适合在UI上显示“正在连接”状态。
},
onConnectFailed: (code, errorMsg) {
// 连接服务器失败,可以通知用户当前网络连接不可用。
},
onUserSigExpired: () {
// 用户的登录令牌(UserSig)已过期,提示用户使用新令牌重新登录。
},
onKickedOffline: () {
// 当前用户已被踢下线,可以提示用户使用类似“您已在其他设备上登录。是否要重新登录?”的消息重新登录。
},
),
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Plugin example app'),
),
body: Column(
children: [
TextButton(
onPressed: () async {
try {
final userInfo = await OpenIM.iMManager.login(
userID: "your_user_id", // 替换为您的用户ID
token: "your_token", // 替换为您的token
);
print("Login successful: $userInfo");
} catch (e) {
print("Login failed: $e");
}
},
child: Text('登录'),
),
TextButton(
onPressed: () async {
try {
await OpenIM.iMManager.messageManager.sendMessage(
message: await OpenIM.iMManager.messageManager.createTextMessage(
text: 'hello openim',
),
userID: "recipient_user_id", // 替换为收件人的用户ID
);
print("Message sent successfully");
} catch (e) {
print("Failed to send message: $e");
}
},
child: Text('发送消息'),
),
],
),
),
);
}
}
以上代码展示了如何初始化SDK、登录和发送消息。希望对您有所帮助!
更多关于Flutter即时通讯插件flutter_openim_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter即时通讯插件flutter_openim_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是一个关于如何在Flutter项目中使用flutter_openim_sdk
插件来实现即时通讯功能的代码案例。这个插件通常用于集成OpenIM SDK,以实现文本、图片、语音、视频等消息的发送和接收功能。
首先,确保你已经在pubspec.yaml
文件中添加了flutter_openim_sdk
依赖:
dependencies:
flutter:
sdk: flutter
flutter_openim_sdk: ^最新版本号 # 请替换为实际的最新版本号
然后,运行flutter pub get
来获取依赖。
接下来,你需要配置OpenIM SDK的相关信息,如服务器地址、AppID、AppSecret等。这通常在应用的初始化阶段完成。
初始化OpenIM SDK
在你的主入口文件(如main.dart
)中,进行SDK的初始化:
import 'package:flutter/material.dart';
import 'package:flutter_openim_sdk/flutter_openim_sdk.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
// 初始化OpenIM SDK
await OpenIM.initialize(
config: OpenIMConfig(
serverUrl: 'https://你的OpenIM服务器地址',
appId: '你的AppID',
appSecret: '你的AppSecret',
// 其他配置项,根据需要设置
),
onInitSuccess: () {
print('OpenIM SDK 初始化成功');
},
onInitError: (error) {
print('OpenIM SDK 初始化失败: $error');
},
);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter OpenIM Demo'),
),
body: Center(
child: Text('OpenIM SDK 已初始化'),
),
),
);
}
}
用户登录
在用户登录页面,调用登录接口:
import 'package:flutter/material.dart';
import 'package:flutter_openim_sdk/flutter_openim_sdk.dart';
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final TextEditingController _usernameController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('登录'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _usernameController,
decoration: InputDecoration(labelText: '用户名'),
),
SizedBox(height: 16),
TextField(
controller: _passwordController,
obscureText: true,
decoration: InputDecoration(labelText: '密码'),
),
SizedBox(height: 16),
ElevatedButton(
onPressed: () async {
String username = _usernameController.text;
String password = _passwordController.text;
await OpenIM.login(
userId: username,
secret: password,
onSuccess: () {
print('登录成功');
// 跳转到聊天页面
Navigator.pushReplacementNamed(context, '/chat');
},
onError: (error) {
print('登录失败: $error');
},
);
},
child: Text('登录'),
),
],
),
),
);
}
@override
void dispose() {
_usernameController.dispose();
_passwordController.dispose();
super.dispose();
}
}
发送和接收消息
在聊天页面,实现发送和接收消息的功能:
import 'package:flutter/material.dart';
import 'package:flutter_openim_sdk/flutter_openim_sdk.dart';
class ChatPage extends StatefulWidget {
@override
_ChatPageState createState() => _ChatPageState();
}
class _ChatPageState extends State<ChatPage> {
final TextEditingController _messageController = TextEditingController();
final ScrollController _scrollController = ScrollController();
List<Message> _messages = [];
@override
void initState() {
super.initState();
// 监听新消息
OpenIM.addMessageListener((message) {
setState(() {
_messages.insert(0, message); // 将新消息插入到消息列表的最前面
_scrollController.animateTo(
_scrollController.position.maxScrollExtent,
duration: const Duration(milliseconds: 300),
curve: Curves.easeOut,
);
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('聊天'),
),
body: Column(
children: [
Expanded(
child: ListView.builder(
controller: _scrollController,
itemCount: _messages.length,
itemBuilder: (context, index) {
Message message = _messages[index];
return ListTile(
title: Text(message.content),
subtitle: Text('${message.fromUserId} - ${message.timestamp}'),
);
},
),
),
Divider(),
TextField(
controller: _messageController,
decoration: InputDecoration(labelText: '输入消息'),
onSubmitted: (value) async {
String toUserId = '接收者的用户ID'; // 替换为实际的接收者用户ID
await OpenIM.sendMessage(
toUserId: toUserId,
content: value,
onSuccess: () {
print('消息发送成功');
setState(() {
_messages.insert(
0,
Message(
fromUserId: OpenIM.getSelfInfo()?.userId ?? '',
toUserId: toUserId,
content: value,
timestamp: DateTime.now().millisecondsSinceEpoch,
),
);
});
},
onError: (error) {
print('消息发送失败: $error');
},
);
_messageController.clear();
},
),
],
),
);
}
@override
void dispose() {
_messageController.dispose();
_scrollController.dispose();
super.dispose();
}
}
class Message {
String fromUserId;
String toUserId;
String content;
int timestamp;
Message({required this.fromUserId, required this.toUserId, required this.content, required this.timestamp});
}
请注意,以上代码仅为示例,实际项目中可能需要处理更多的边界情况和错误处理。此外,flutter_openim_sdk
插件的具体API可能会随着版本更新而变化,请参考最新的官方文档进行调整。