Flutter即时通讯插件kommunicate_flutter的使用

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

Flutter即时通讯插件kommunicate_flutter的使用

Kommunicate Flutter plugin 是一个封装了 Kommunicate Android 和 iOS SDK 的 Flutter 插件。它可以帮助开发者快速集成即时通讯功能到 Flutter 应用中。

安装步骤

1. 添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  kommunicate_flutter: ^1.9.9

2. 安装包

运行以下命令安装依赖：

flutter pub get

3. 导入库

在 .dart 文件中导入 kommunicate_flutter：

import 'package:kommunicate_flutter/kommunicate_flutter.dart';

4. iOS 配置

对于 iOS 平台，导航到项目的 ios 目录并运行以下命令：

pod install

确保在 ios/Podfile 文件顶部有以下设置：

platform :ios, '13.0'
use_frameworks!

获取应用ID

登录 Kommunicate 获取你的 APP_ID。这个 APP_ID 将用于创建和启动对话。

启动聊天

访客直接聊天

如果希望访客直接进入聊天而不需要填写任何信息，可以使用以下方法：

try {
  dynamic conversationObject = {
    'appId': '<APP_ID>', // 替换为从 Kommunicate 控制台获取的 APP_ID
  };
  dynamic result = await KommunicateFlutterPlugin.buildConversation(conversationObject);
  print("Conversation builder success : " + result.toString());
} on Exception catch (e) {
  print("Conversation builder error occurred : " + e.toString());
}

带前置表单的访客聊天

如果需要用户在开始支持聊天之前填写详细信息（如电话号码、电子邮件等），可以将 withPreChat 标志设置为 true：

try {
  dynamic conversationObject = {
    'appId': '<APP_ID>', // 替换为从 Kommunicate 控制台获取的 APP_ID
    'withPreChat': true,
  };
  dynamic result = await KommunicateFlutterPlugin.buildConversation(conversationObject);
  print("Conversation builder success : " + result.toString());
} on Exception catch (e) {
  print("Conversation builder error occurred : " + e.toString());
}

使用已有用户的聊天

如果有用户的详细信息，则可以创建一个 KMUser 对象并启动聊天：

import 'dart:convert';

try {
  dynamic user = {
    'userId': '<USER_ID>', // 替换为已登录用户的 userId
    'password': '<PASSWORD>' // 如果用户有密码则填入，否则忽略
  };
  dynamic conversationObject = {
    'appId': '<APP_ID>', // 替换为从 Kommunicate 控制台获取的 APP_ID
    'kmUser': jsonEncode(user)
  };
  dynamic result = await KommunicateFlutterPlugin.buildConversation(conversationObject);
  print("Conversation builder success : " + result.toString());
} on Exception catch (e) {
  print("Conversation builder error occurred : " + e.toString());
}

示例代码

以下是完整的示例代码，展示如何在 Flutter 应用中集成 Kommunicate：

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:kommunicate_flutter/kommunicate_flutter.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  TextEditingController userId = TextEditingController();
  TextEditingController password = TextEditingController();

  void loginUser(context) {
    dynamic user = {
      'userId': userId.text,
      'password': password.text,
      'appId': '<YOUR_APP_ID>',
      'authenticationTypeId': 1
    };

    KommunicateFlutterPlugin.login(user).then((result) {
      Navigator.pop(context);
      Navigator.push(
          context, MaterialPageRoute(builder: (context) => HomePage()));
      print("Login successful : " + result.toString());
    }).catchError((error) {
      print("Login failed : " + error.toString());
    });
  }

  void loginAsVisitor(context) {
    KommunicateFlutterPlugin.loginAsVisitor('<YOUR_APP_ID>').then((result) {
      Navigator.pop(context);
      Navigator.push(
          context, MaterialPageRoute(builder: (context) => HomePage()));
      print("Login as visitor successful : " + result.toString());
    }).catchError((error) {
      print("Login as visitor failed : " + error.toString());
    });
  }

  void buildConversation() {
    dynamic conversationObject = {'appId': '<YOUR_APP_ID>'};

    KommunicateFlutterPlugin.buildConversation(conversationObject)
        .then((result) {
      print("Conversation builder success : " + result.toString());
    }).catchError((error) {
      print("Conversation builder error occurred : " + error.toString());
    });
  }

  void buildConversationWithPreChat(context) {
    try {
      KommunicateFlutterPlugin.isLoggedIn().then((value) {
        print("Logged in : " + value.toString());
        if (value) {
          KommunicateFlutterPlugin.buildConversation(
                  {'isSingleConversation': true, 'appId': '<YOUR_APP_ID>'})
              .then((result) {
            print("Conversation builder success : " + result.toString());
          }).catchError((error) {
            print("Conversation builder error occurred : " + error.toString());
          });
        } else {
          Navigator.push(
              context, MaterialPageRoute(builder: (context) => PreChatPage()));
        }
      });
    } on Exception catch (e) {
      print("isLogged in error : " + e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Kommunicate Sample App'),
        ),
        body: SingleChildScrollView(
          child: Container(
            padding: const EdgeInsets.all(36.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SizedBox(
                  height: 155.0,
                  child: Image.asset(
                    "assets/ic_launcher_without_shape.png",
                    fit: BoxFit.contain,
                  ),
                ),
                TextField(
                  controller: userId,
                  decoration: InputDecoration(
                      contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                      hintText: "UserId *",
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(32.0))),
                ),
                SizedBox(height: 10),
                TextField(
                  controller: password,
                  obscureText: true,
                  decoration: InputDecoration(
                      contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                      hintText: "Password *",
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(32.0))),
                ),
                SizedBox(height: 10),
                Material(
                    elevation: 5.0,
                    borderRadius: BorderRadius.circular(30.0),
                    color: Color(0xff5c5aa7),
                    child: MaterialButton(
                      onPressed: () {
                        loginUser(context);
                      },
                      minWidth: 400,
                      padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                      child: Text("Login",
                          textAlign: TextAlign.center,
                          style: TextStyle(fontFamily: 'Montserrat', fontSize: 20.0)
                              .copyWith(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold)),
                    )),
                SizedBox(height: 10),
                Material(
                    elevation: 5.0,
                    borderRadius: BorderRadius.circular(30.0),
                    color: Color(0xff5c5aa7),
                    child: MaterialButton(
                      onPressed: () {
                        loginAsVisitor(context);
                      },
                      minWidth: 400,
                      padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                      child: Text("Login as Visitor",
                          textAlign: TextAlign.center,
                          style: TextStyle(fontFamily: 'Montserrat', fontSize: 20.0)
                              .copyWith(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold)),
                    )),
                SizedBox(height: 10),
                Material(
                    elevation: 5.0,
                    borderRadius: BorderRadius.circular(30.0),
                    color: Color(0xff5c5aa7),
                    child: MaterialButton(
                      onPressed: () {
                        buildConversation();
                      },
                      minWidth: 400,
                      padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                      child: Text("Use conversation builder",
                          textAlign: TextAlign.center,
                          style: TextStyle(fontFamily: 'Montserrat', fontSize: 20.0)
                              .copyWith(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold)),
                    )),
                SizedBox(height: 10),
                Material(
                    elevation: 5.0,
                    borderRadius: BorderRadius.circular(30.0),
                    color: Color(0xff5c5aa7),
                    child: MaterialButton(
                        onPressed: () async {
                          buildConversationWithPreChat(context);
                        },
                        minWidth: 400,
                        padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                        child: Text("Builder with Pre chat form",
                            textAlign: TextAlign.center,
                            style:
                                TextStyle(fontFamily: 'Montserrat', fontSize: 20.0)
                                    .copyWith(
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold))))
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Text('Welcome to the Home Page!'),
      ),
    );
  }
}

class PreChatPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pre Chat Form'),
      ),
      body: Center(
        child: Text('Please fill out the pre-chat form.'),
      ),
    );
  }
}

通过以上步骤和示例代码，你可以在 Flutter 应用中轻松集成 Kommunicate 实现即时通讯功能。更多高级配置和参数可以参考 官方文档。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用kommunicate_flutter插件来实现即时通讯功能的代码示例。这个插件允许你集成Kommunicate的聊天SDK，为你的应用提供实时聊天功能。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加kommunicate_flutter依赖：

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

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

2. 配置Android和iOS

Android

在android/app/src/main/AndroidManifest.xml中添加必要的权限和配置：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <!-- 其他配置 -->

    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

    <application
        <!-- 其他配置 -->

        <!-- Kommunicate 配置 -->
        <meta-data
            android:name="com.app.id"
            android:value="你的Kommunicate应用ID"/>
        <meta-data
            android:name="com.kommunicate.CHANNEL_URI"
            android:value="https://你的Kommunicate服务器地址/chat-widget"/>
    </application>
</manifest>

iOS

在ios/Runner/Info.plist中添加必要的配置（如果需要的话，具体配置请参考Kommunicate官方文档）。

3. 初始化Kommunicate

在你的main.dart文件中初始化Kommunicate：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 初始化 Kommunicate
    KommunicateFlutter.initialize(
      appId: "你的Kommunicate应用ID",
      serverUrl: "https://你的Kommunicate服务器地址",
      autoLaunchOnAppOpen: true, // 可选，是否在应用打开时自动启动聊天窗口
    );

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Kommunicate Flutter Demo'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示聊天窗口
              KommunicateFlutter.showChatWidget();
            },
            child: Text('打开聊天'),
          ),
        ),
      ),
    );
  }
}

4. 处理用户认证（可选）

如果你的应用需要用户认证，你可以在用户登录后更新Kommunicate的用户信息：

void updateKommunicateUser(String userId, String userName, String userEmail) {
  KommunicateFlutter.updateUser(
    userId: userId,
    name: userName,
    email: userEmail,
  );
}

在用户注销时，你可以清除Kommunicate的用户信息：

void logoutFromKommunicate() {
  KommunicateFlutter.logoutUser();
}

5. 处理聊天事件（可选）

你可以监听聊天事件，如新消息到达、用户状态变化等：

KommunicateFlutter.addListener((event) {
  if (event is KommunicateNewMessageEvent) {
    // 处理新消息事件
    print("新消息: ${event.message}");
  } else if (event is KommunicateUserStatusEvent) {
    // 处理用户状态变化事件
    print("用户状态变化: ${event.status}");
  }
  // 其他事件处理
});

总结

以上是一个简单的Flutter项目中使用kommunicate_flutter插件实现即时通讯功能的代码示例。实际应用中，你可能需要根据具体需求进行更多的配置和功能扩展。请参考Kommunicate的官方文档获取更多详细信息和高级用法。

回到顶部