Flutter实时聊天插件live_chat_plus的使用

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

Flutter实时聊天插件live_chat_plus的使用

简介

Pub

live_chat_plus 是一个为Flutter Mobile和Web带来LiveChat功能的插件。通过这个插件，你可以轻松地将实时聊天功能集成到你的Flutter应用程序中。

安装

添加依赖

首先，在你的pubspec.yaml文件中添加live_chat_plus作为依赖项：

dependencies:
  live_chat_plus: ^latest_version

Android配置

  1. 确保你已经在AndroidManifest.xml文件中添加了互联网权限：

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

  2. 为了避免Proguard启用时出现问题，在proguard.pro文件中包含以下内容：

    -keep class com.livechatinc.inappchat.** { *; }

Web配置

在index.html文件的<head>标签内添加以下行：

<script src="./assets/packages/live_chat_plus/assets/live_chat.js" defer></script>

使用方法

导入包

要开始使用，请导入以下内容：

import 'package:live_chat_plus/live_chat_plus.dart';

打开聊天窗口

调用openChatWindow以打开聊天窗口：

await LiveChat().openChatWindow(
  licenseId: '<LICENSE ID>',
  username: '<USERNAME>',
  email: '<EMAIL>',
  groupId: '<GROUP ID>',
  customParameters: {'CUSTOM KEY': 'CUSTOM VALUE'},
);

订阅事件流

你可以订阅一个事件流来监听来自LiveChat的事件：

LiveChat().onLiveChatEventReceived?.listen((event) {
  switch (event) {
    case 'chatOpen':
      // 处理聊天窗口打开事件
      break;
    case 'chatClose':
      // 处理聊天窗口关闭事件
      break;

    default:
      // 处理其他事件，例如消息通知
  }
});

关闭聊天窗口

通过调用以下代码关闭聊天窗口：

LiveChat().closeChatWindow();

清除聊天会话

为了清除移动设备上的聊天会话（例如，在用户登出后），你可以调用：

LiveChat().clearChatSession();

这将在Web上调用destroy。

示例应用

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

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:live_chat_plus/live_chat_plus.dart';

void main() => runApp(const App());

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  late final StreamSubscription? subscription;

  bool _canGoBack = true;
  int _unreadNotificationCounter = 1;

  @override
  void initState() {
    super.initState();

    subscription = LiveChat().onLiveChatEventReceived?.listen((event) {
      switch (event) {
        case 'chatOpen':
          break;
        case 'chatClose':
          _canGoBack = true;
          break;

        default:
          _setCounter(++_unreadNotificationCounter);
      }
    });
  }

  Future<void> _onWillPop(bool didPop) async {
    if (didPop) {
      return;
    }
    if (!_canGoBack) {
      _canGoBack = true;

      LiveChat().closeChatWindow();
    }
  }

  void _setCounter(int counter) =>
      setState(() => _unreadNotificationCounter = counter);

  Future<void> openChatView() async {
    await LiveChat().openChatWindow(
      licenseId: '<LICENSE ID>',
      username: '<USERNAME>',
      email: '<EMAIL>',
      groupId: '<GROUP ID>',
      customParameters: {'CUSTOM KEY': 'CUSTOM VALUE'},
    );

    _canGoBack = false;
  }

  Future<void> closeChatView() async {
    await LiveChat().closeChatWindow();
  }

  Future<void> clearChatView() async {
    await LiveChat().clearChatSession();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: PopScope(
        canPop: false,
        onPopInvoked: _onWillPop,
        child: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            backgroundColor: Colors.blue,
            title: const Text('Live Chat Demo'),
            actions: <Widget>[
              Stack(children: [
                IconButton(
                  icon: const Icon(Icons.notifications, color: Colors.white),
                  onPressed: () {
                    _setCounter(1);

                    openChatView();
                  },
                ),
                _unreadNotificationCounter > 1
                    ? const Positioned(
                        top: 10,
                        right: 14,
                        child: Icon(
                          Icons.brightness_1,
                          size: 8,
                          color: Colors.redAccent,
                        ),
                      )
                    : const SizedBox.shrink()
              ]),
            ],
          ),
          body: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(top: 36),
                child: Center(
                  child: ElevatedButton(
                    onPressed: openChatView,
                    child: const Text('Start Live Chat'),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 16),
                child: Center(
                  child: ElevatedButton(
                    onPressed: closeChatView,
                    child: const Text('Close Live Chat'),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 16),
                child: Center(
                  child: ElevatedButton(
                    onPressed: clearChatView,
                    child: const Text('Clear Chat Session'),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    subscription?.cancel();

    super.dispose();
  }
}

请注意，你需要替换示例代码中的占位符（如<LICENSE ID>、<USERNAME>等）为实际值。此外，建议参考官方GitHub仓库中的example文件夹获取更多详细信息和最新更新。


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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter项目中使用live_chat_plus插件来实现实时聊天功能的代码示例。这个插件通常用于集成第三方实时聊天服务，比如Firebase、Twilio Chat等，但具体实现可能依赖于你所使用的后端服务。

首先，确保你已经在pubspec.yaml文件中添加了live_chat_plus依赖：

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

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

接下来，是一个基本的实现步骤，包括初始化插件、配置聊天界面和发送/接收消息。

1. 初始化插件

在你的主应用文件（通常是main.dart）中，初始化live_chat_plus插件。

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

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

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

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  @override
  void initState() {
    super.initState();
    // 初始化LiveChatPlus
    LiveChatPlus.instance.init(
      apiKey: '你的API_KEY',  // 替换为你的API密钥
      userId: '当前用户ID',  // 替换为当前用户的唯一标识符
      // 其他配置参数，如服务器URL等，根据插件文档配置
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('实时聊天'),
      ),
      body: ChatWidget(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 打开消息输入框或发送消息的逻辑
        },
        tooltip: '发送消息',
        child: Icon(Icons.send),
      ),
    );
  }
}

class ChatWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 这里应该包含实际的聊天UI实现
    // 例如，消息列表、输入框等
    // 由于live_chat_plus插件的具体实现细节可能不同，
    // 请参考插件的官方文档来配置这些UI组件。
    return Container(
      child: Text('这里应该是聊天界面'),
    );
  }
}

2. 配置聊天界面

ChatWidget应该包含实际的聊天UI组件，如消息列表和输入框。由于live_chat_plus的具体实现细节可能不同，这里只提供一个基本框架。你需要根据插件的官方文档来配置这些组件。

class ChatWidget extends StatefulWidget {
  @override
  _ChatWidgetState createState() => _ChatWidgetState();
}

class _ChatWidgetState extends State<ChatWidget> {
  final TextEditingController _messageController = TextEditingController();

  void _sendMessage() {
    // 发送消息的逻辑
    // 例如：LiveChatPlus.instance.sendMessage(_messageController.text);
    // 请注意，这里的sendMessage方法可能需要根据插件的实际API进行调整
    _messageController.clear();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: ListView.builder(
            // 构建消息列表
            itemCount: // 消息数量,
            itemBuilder: (context, index) {
              // 构建每个消息项
              // 例如：return MessageItem(message: messages[index]);
              return Container(); // 占位符
            },
          ),
        ),
        Divider(),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8.0),
          child: Row(
            children: <Widget>[
              Expanded(
                child: TextField(
                  controller: _messageController,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: '输入消息...',
                  ),
                ),
              ),
              Button(
                child: Text('发送'),
                onPressed: _sendMessage,
              ),
            ],
          ),
        ),
      ],
    );
  }
}

3. 接收消息

为了接收实时消息，你可能需要设置一个监听器或使用插件提供的其他机制。这通常涉及到WebSocket连接或类似的技术。具体实现取决于后端服务的API和live_chat_plus插件的功能。

// 示例：设置消息监听器（假设插件提供了这样的API）
LiveChatPlus.instance.onMessageReceived.listen((message) {
  // 更新UI以显示新消息
  // 例如：setState(() { messages.add(message); });
});

请注意，上面的代码是一个基本的框架，并且live_chat_plus插件的具体API可能会有所不同。因此，强烈建议你查阅插件的官方文档和示例代码，以获取准确的实现细节和API用法。

此外，由于实时聊天功能通常涉及到用户身份验证、消息存储和实时通信等复杂功能，因此在实际项目中，你可能需要配置额外的后端服务和数据库来支持这些功能。

回到顶部