Flutter即时通讯插件crisp_sdk的使用

Flutter即时通讯插件crisp_sdk的使用

Crisp SDK Dart Package

Crisp SDK Dart Package 提供了一个用于Crisp聊天SDK的Dart接口。以下是该插件的主要功能和使用方法。

功能

• 设置用户详细信息，如电子邮件、昵称、头像和电话号码。
• 注册新用户以开始聊天。
• 设置消息文本。
• 设置用户分段。
• 设置会话数据。
• 获取会话ID。
• 登出。

使用方法

1. 导入包

首先，导入 crisp_sdk 包：

import 'package:crisp_sdk/crisp_sdk.dart';

2. 创建CrispController

然后，创建一个 CrispController 实例，并传入你的网站ID和语言设置（可选）：

CrispController controller = CrispController(
  websiteId: 'your_website_id', // 替换为你的网站ID
  locale: 'zh', // 语言设置，可选，默认为'en'
);

3. 在Flutter应用中使用CrispView

在Flutter应用中使用 CrispView 小部件来显示聊天界面，并监听会话ID的接收：

[@override](/user/override)
Widget build(BuildContext context) {
  return CrispView(
    crispController: controller,
    clearCache: true, // 是否清除缓存，可选，默认为false
    onSessionIdReceived: (sessionId) {
      print('------------- sessionIdCrisp  --------------');
      print(sessionId); // 打印接收到的会话ID
    },
  );
}

4. 设置用户详细信息

使用 register 方法设置用户详细信息：

controller.register(
  user: CrispUser(
    email: 'user_email', // 用户电子邮件
    nickname: 'user_nickname', // 用户昵称
    avatar: 'user_avatar_url', // 用户头像URL
    phone: 'user_phone_number', // 用户电话号码
  ),
);

5. 设置消息文本

使用 setMessage 方法设置消息文本：

controller.setMessage('Hello, world!'); // 设置消息文本

6. 设置用户分段

使用 setSegments 方法设置用户分段：

controller.setSegments(['segment1', 'segment2']); // 设置用户分段

7. 设置会话数据

使用 setData 方法设置会话数据：

controller.setData({'key1': 'value1', 'key2': 'value2'}); // 设置会话数据

8. 获取会话ID

使用 getSessionId 方法获取会话ID：

controller.getSessionId(); // 获取会话ID

9. 登出

使用 logout 方法登出当前用户：

controller.logout(); // 登出

完整示例Demo

以下是一个完整的Flutter应用示例，展示了如何使用 crisp_sdk 插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Crisp',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Crisp Chat Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late CrispController crispController;

  [@override](/user/override)
  void initState() {
    super.initState();

    // 初始化CrispController并设置网站ID
    crispController = CrispController(
      websiteId: 'your-website-id', // 替换为你的网站ID
    );

    // 注册用户
    crispController.register(
      user: CrispUser(
        email: "Amir@provider.com", // 用户电子邮件
        nickname: "Amir Jabbari", // 用户昵称
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.logout),
        onPressed: () async {
          // 登出
          crispController.logout();
        },
      ),
      body: Center(
        child: CrispView(
          crispController: crispController,
          clearCache: false, // 是否清除缓存，可选，默认为false
          onSessionIdReceived: (sessionId) {
            print('------------- sessionIdCrisp  --------------');
            print(sessionId); // 打印接收到的会话ID
          },
        ),
      ),
    );
  }
}