Flutter即时通讯插件flutter_openim_widget的使用

Flutter即时通讯插件flutter_openim_widget的使用

flutter_openim_widget

公共UI库与openim演示一起使用，您可以直接用于二次开发。

pub package platform license


#### 示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中集成和使用`flutter_openim_widget`插件：

1. **添加依赖**

   在你的`pubspec.yaml`文件中添加`flutter_openim_widget`依赖项：

   ```yaml
   dependencies:
     flutter:
       sdk: flutter
     flutter_openim_widget: ^1.0.0  # 请根据实际版本进行调整

  1. 初始化插件

    在你的主应用类中初始化插件。通常在main.dart文件中完成初始化工作：

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

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

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

class OpenIMHomePage extends StatefulWidget {
  @override
  _OpenIMHomePageState createState() => _OpenIMHomePageState();
}

class _OpenIMHomePageState extends State<OpenIMHomePage> {
  @override
  void initState() {
    super.initState();
    // 初始化插件
    initOpenIM();
  }

  void initOpenIM() async {
    // 这里填写你的OpenIM服务器相关信息
    String serverIP = "your_server_ip";
    int serverPort = 8080;
    String appID = "your_app_id";

    // 初始化OpenIM SDK
    await OpenIM.createClient(serverIP, serverPort, appID);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter OpenIM Demo"),
      ),
      body: Center(
        child: Text("欢迎使用Flutter OpenIM Demo"),
      ),
    );
  }
}

  2. 使用聊天界面

    在你的应用中使用ChatPage来展示聊天界面：

    class ChatPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("聊天页面"),
      ),
      body: OpenIMUIKit.chat(
        peerID: "peer_user_id",  // 对方用户ID
        peerName: "对方用户名",    // 对方用户名
        onMessageReceived: (message) {
          // 处理接收到的消息
          print("Received message: ${message.content}");
        },
      ),
    );
  }
}

  3. 运行应用

    确保你已经配置好了OpenIM服务器的相关信息，并且安装了所有必要的依赖项。然后你可以通过命令行运行你的应用：

    flutter run

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

1 回复

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


flutter_openim_widget 是一个用于 Flutter 的即时通讯插件，基于 OpenIM SDK 实现。它提供了聊天、群组、好友管理等功能，可以帮助开发者快速集成即时通讯功能到 Flutter 应用中。

安装

首先，你需要在 pubspec.yaml 文件中添加 flutter_openim_widget 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_openim_widget: ^版本号

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

基本使用

1. 初始化 SDK

在使用 flutter_openim_widget 之前，你需要初始化 SDK。通常在你的应用的 main.dart 文件中进行初始化：

import 'package:flutter_openim_widget/flutter_openim_widget.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化 OpenIM SDK
  await OpenIM.initSDK(
    platform: 'flutter',
    apiAddr: 'https://your-openim-server.com',
    wsAddr: 'wss://your-openim-server.com',
    storageDir: 'openim_storage',
  );
  
  runApp(MyApp());
}

2. 登录

在初始化 SDK 后，你需要使用用户凭证登录：

import 'package:flutter_openim_widget/flutter_openim_widget.dart';

Future<void> login() async {
  try {
    await OpenIM.login(
      userID: 'your_user_id',
      token: 'your_user_token',
    );
    print('登录成功');
  } catch (e) {
    print('登录失败: $e');
  }
}

3. 发送消息

登录成功后，你可以发送消息：

import 'package:flutter_openim_widget/flutter_openim_widget.dart';

Future<void> sendTextMessage() async {
  try {
    await OpenIM.sendTextMessage(
      receiverID: 'receiver_user_id',
      text: 'Hello, World!',
    );
    print('消息发送成功');
  } catch (e) {
    print('消息发送失败: $e');
  }
}

4. 接收消息

你可以通过监听消息事件来接收消息：

import 'package:flutter_openim_widget/flutter_openim_widget.dart';

void listenForMessages() {
  OpenIM.onMessageReceived.listen((message) {
    print('收到消息: ${message.text}');
  });
}

5. 使用聊天界面

flutter_openim_widget 提供了一个现成的聊天界面，你可以直接使用：

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

class ChatPage extends StatelessWidget {
  final String receiverID;

  ChatPage({required this.receiverID});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('聊天'),
      ),
      body: OpenIMChat(
        receiverID: receiverID,
      ),
    );
  }
}

6. 退出登录

在用户退出应用时，记得调用退出登录方法：

import 'package:flutter_openim_widget/flutter_openim_widget.dart';

Future<void> logout() async {
  try {
    await OpenIM.logout();
    print('退出登录成功');
  } catch (e) {
    print('退出登录失败: $e');
  }
}
回到顶部