Flutter聊天服务器插件serverpod_chat_server的使用

Flutter聊天服务器插件serverpod_chat_server的使用

什么是Serverpod？

Serverpod 是一个开源的、可扩展的应用服务器，专为Flutter社区编写，使用Dart语言开发。它可以帮助开发者快速搭建后端服务，并与Flutter前端无缝集成。

serverpod_chat_server 插件介绍

serverpod_chat_server 是Serverpod的一个核心插件，用于实现聊天功能的服务器端逻辑。通过这个插件，你可以轻松地构建实时聊天应用，支持消息发送、接收、历史消息查询等功能。

完整示例Demo

下面是一个完整的示例，展示如何使用 serverpod_chat_server 插件来创建一个简单的聊天服务器。

1. 创建Serverpod项目

首先，确保你已经安装了Serverpod CLI工具。如果没有安装，可以通过以下命令安装：

dart pub global activate serverpod_cli

接下来，创建一个新的Serverpod项目：

serverpod create chat_example
cd chat_example

2. 添加 serverpod_chat_server 依赖

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

dependencies:
  serverpod: ^x.x.x  # 请根据最新版本替换x.x.x
  serverpod_chat_server: ^x.x.x  # 请根据最新版本替换x.x.x

然后运行以下命令来安装依赖：

dart pub get

3. 配置聊天模块

在 lib/src/generated 目录下，创建一个新的文件 chat_service.dart，并添加以下代码：

import 'package:serverpod/serverpod.dart';
import 'package:serverpod_chat_server/serverpod_chat_server.dart';

class ChatService extends GeneratedChatService {
  [@override](/user/override)
  Future<List<ChatMessage>> getMessages(int channelId, int lastMessageId) async {
    // 获取指定频道的消息
    return await db.find<ChatMessage>()
      ..filter.channelId.equals(channelId)
      ..filter.id.greaterThan(lastMessageId);
  }

  [@override](/user/override)
  Future<void> sendMessage(ChatMessage message) async {
    // 保存消息到数据库
    await message.save(db);
  }
}

4. 初始化聊天模块

在 lib/src/init.dart 文件中，初始化 ChatService：

import 'package:serverpod/serverpod.dart';
import 'package:serverpod_chat_server/serverpod_chat_server.dart';
import 'chat_service.dart';

void configureServer(Serverpod server) {
  // 注册聊天服务
  server.registerModule(ChatModule(chatService: ChatService()));
}

5. 创建聊天频道和用户

为了测试聊天功能，我们可以在 lib/src/endpoints 目录下创建一个新的文件 chat_endpoints.dart，并添加以下代码：

import 'package:serverpod/serverpod.dart';
import 'package:serverpod_chat_server/serverpod_chat_server.dart';

class ChatEndpoints extends Endpoints {
  Future<int> createChannel(String name) async {
    // 创建新的聊天频道
    var channel = ChatChannel(name: name);
    await channel.save(db);
    return channel.id;
  }

  Future<int> createUser(String username) async {
    // 创建新用户
    var user = User(username: username);
    await user.save(db);
    return user.id;
  }
}

6. 启动服务器

完成以上配置后，启动Serverpod服务器：

serverpod run

7. 前端集成

在Flutter客户端中，你可以使用 serverpod_client 和 serverpod_chat_client 插件来与服务器进行交互。以下是客户端代码示例：

import 'package:flutter/material.dart';
import 'package:serverpod_client/serverpod_client.dart';
import 'package:serverpod_chat_client/serverpod_chat_client.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化客户端连接
  final client = Client('http://localhost:8080')
    ..connectivityMonitor = NoConnectivityMonitor();

  final chatClient = ChatClient(client);

  runApp(MyApp(chatClient: chatClient));
}

class MyApp extends StatelessWidget {
  final ChatClient chatClient;

  MyApp({required this.chatClient});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChatScreen(chatClient: chatClient),
    );
  }
}

class ChatScreen extends StatefulWidget {
  final ChatClient chatClient;

  ChatScreen({required this.chatClient});

  [@override](/user/override)
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final TextEditingController _controller = TextEditingController();
  List<ChatMessage> _messages = [];

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

  Future<void> _loadMessages() async {
    // 加载消息
    final messages = await widget.chatClient.getMessages(1, 0);
    setState(() {
      _messages = messages;
    });
  }

  Future<void> _sendMessage(String text) async {
    if (text.isNotEmpty) {
      // 发送消息
      final message = ChatMessage(
        channelId: 1,
        senderId: 1,
        content: text,
        timestamp: DateTime.now().millisecondsSinceEpoch,
      );

      await widget.chatClient.sendMessage(message);
      _controller.clear();
      _loadMessages();
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Chat')),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _messages.length,
              itemBuilder: (context, index) {
                final message = _messages[index];
                return ListTile(
                  title: Text(message.content),
                  subtitle: Text(DateTime.fromMillisecondsSinceEpoch(message.timestamp).toString()),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(hintText: 'Type a message'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () => _sendMessage(_controller.text),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}