Flutter实时聊天插件stream_chat的使用

概述

stream_chat 是由 Stream 提供的官方 Dart 客户端，用于构建聊天应用程序。这个库可以在任何 Dart 项目中使用，并且适用于Flutter移动和Web应用。

• 注册：获取API密钥
• 教程：Flutter Chat 教程
• UI Kit：Chat UI Kit
• 文档：Chat Client 文档

快速开始

添加依赖

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

dependencies:
  stream_chat: ^latest-version

然后运行 flutter packages get。

示例项目

在 example 文件夹中有一个详细的 Flutter 示例项目，可以直接运行并尝试。

设置API客户端

首先需要实例化一个聊天客户端。聊天客户端将管理 API 调用、事件处理并管理与 Stream Chat 服务器的 WebSocket 连接。你应该只创建一次客户端并在整个应用程序中重用它。

final client = StreamChatClient("stream-chat-api-key");

日志记录

默认情况下，聊天客户端会将所有级别为 Warn 或 Error 的消息写入 stdout。

更改日志级别

在开发过程中，你可能希望启用更多的日志信息：

final client = StreamChatClient("stream-chat-api-key", logLevel: Level.INFO);

自定义日志记录器

你可以直接处理日志消息而不是将其写入 stdout：

myLogHandlerFunction = (LogRecord record) {
  // do something with the record (ie. send it to Sentry or Fabric)
}

final client = StreamChatClient("stream-chat-api-key", logHandlerFunction: myLogHandlerFunction);

离线存储

为了添加数据持久性，可以扩展 ChatPersistenceClient 类并传递实例给 StreamChatClient。我们提供了一个官方的持久化客户端在 stream_chat_persistence 包中。

import 'package:stream_chat_persistence/stream_chat_persistence.dart';

final chatPersistentClient = StreamChatPersistenceClient(
  logLevel: Level.INFO,
  connectionMode: ConnectionMode.background,
);

final client = StreamChatClient(
  apiKey ?? kDefaultStreamApiKey,
  logLevel: Level.INFO,
)..chatPersistenceClient = chatPersistentClient;

示例代码

以下是一个完整的示例，展示了如何使用 stream_chat 创建一个简单的聊天界面。

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

Future<void> main() async {
  final client = StreamChatClient(
    'b67pax5b2wdq',
    logLevel: Level.INFO,
  );

  await client.connectUser(
    User(
      id: 'cool-shadow-7',
      name: 'Cool Shadow',
      image: 'https://getstream.io/random_png/?id=cool-shadow-7&name=Cool+shadow',
    ),
    '''eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiY29vbC1zaGFkb3ctNyJ9.gkOlCRb1qgy4joHPaxFwPOdXcGvSPvp6QY0S4mpRkVo''',
  );

  final channel = client.channel('messaging', id: 'godevs');
  await channel.watch();

  runApp(
    StreamExample(
      client: client,
      channel: channel,
    ),
  );
}

class StreamExample extends StatelessWidget {
  const StreamExample({
    super.key,
    required this.client,
    required this.channel,
  });

  final StreamChatClient client;
  final Channel channel;

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Stream Chat Dart Example',
        home: HomeScreen(channel: channel),
      );
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({
    super.key,
    required this.channel,
  });

  final Channel channel;

  @override
  Widget build(BuildContext context) {
    final messages = channel.state!.messagesStream;
    return Scaffold(
      appBar: AppBar(
        title: Text('Channel: ${channel.id}'),
      ),
      body: SafeArea(
        child: StreamBuilder<List<Message>?>(
          stream: messages,
          builder: (
            BuildContext context,
            AsyncSnapshot<List<Message>?> snapshot,
          ) {
            if (snapshot.hasData && snapshot.data != null) {
              return MessageView(
                messages: snapshot.data!.reversed.toList(),
                channel: channel,
              );
            } else if (snapshot.hasError) {
              return const Center(
                child: Text(
                  'There was an error loading messages. Please see logs.',
                ),
              );
            }
            return const Center(
              child: SizedBox(
                width: 100,
                height: 100,
                child: CircularProgressIndicator(),
              ),
            );
          },
        ),
      ),
    );
  }
}

class MessageView extends StatefulWidget {
  const MessageView({
    super.key,
    required this.messages,
    required this.channel,
  });

  final List<Message> messages;
  final Channel channel;

  @override
  _MessageViewState createState() => _MessageViewState();
}

class _MessageViewState extends State<MessageView> {
  late final TextEditingController _controller;
  late final ScrollController _scrollController;

  List<Message> get _messages => widget.messages;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
    _scrollController = ScrollController();
  }

  @override
  void dispose() {
    _controller.dispose();
    _scrollController.dispose();
    super.dispose();
  }

  void _updateList() {
    _scrollController.animateTo(
      0,
      duration: const Duration(milliseconds: 200),
      curve: Curves.easeOut,
    );
  }

  @override
  Widget build(BuildContext context) => Column(
        children: [
          Expanded(
            child: ListView.builder(
              controller: _scrollController,
              itemCount: _messages.length,
              reverse: true,
              itemBuilder: (BuildContext context, int index) {
                final item = _messages[index];
                if (item.user?.id == widget.channel.client.uid) {
                  return Align(
                    alignment: Alignment.centerRight,
                    child: Padding(
                      padding: const EdgeInsets.all(8),
                      child: Text(item.text ?? ''),
                    ),
                  );
                } else {
                  return Align(
                    alignment: Alignment.centerLeft,
                    child: Padding(
                      padding: const EdgeInsets.all(8),
                      child: Text(item.text ?? ''),
                    ),
                  );
                }
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: const InputDecoration(
                      hintText: 'Enter your message',
                    ),
                  ),
                ),
                Material(
                  type: MaterialType.circle,
                  color: Colors.blue,
                  clipBehavior: Clip.hardEdge,
                  child: InkWell(
                    onTap: () async {
                      if (_controller.value.text.isNotEmpty) {
                        await widget.channel.sendMessage(
                          Message(text: _controller.value.text),
                        );
                        _controller.clear();
                        _updateList();
                      }
                    },
                    child: const Padding(
                      padding: EdgeInsets.all(8),
                      child: Center(
                        child: Icon(
                          Icons.send,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      );
}

extension on StreamChatClient {
  String get uid => state.currentUser!.id;
}

通过上述代码，您可以快速搭建一个基于 Stream Chat 的实时聊天应用。更多高级功能和自定义选项请参考官方文档。