Flutter即时通讯插件flutter_openim_sdk的使用

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

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 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

1 回复

更多关于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可能会随着版本更新而变化,请参考最新的官方文档进行调整。

回到顶部