使用Dart Frog构建WebSocket实时计数器教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00729/article/details/148917225

使用Dart Frog构建WebSocket实时计数器教程

dart_frog A fast, minimalistic backend framework for Dart 🎯 项目地址: https://gitcode.com/gh_mirrors/da/dart_frog

前言

在现代Web应用中，实时通信功能变得越来越重要。本教程将介绍如何使用Dart Frog框架构建一个基于WebSocket的实时计数器应用。我们将创建一个服务端应用，允许多个客户端通过WebSocket连接实时查看和修改共享的计数器状态。

环境准备

在开始之前，请确保你的开发环境满足以下要求：

已安装Dart SDK（建议使用最新稳定版）
熟悉基本的Dart语法
了解WebSocket的基本概念

项目初始化

首先，我们需要创建一个新的Dart Frog项目。打开终端并执行以下命令：

dart_frog create web_socket_counter

这个命令会创建一个名为web_socket_counter的新项目，包含Dart Frog的基本项目结构。

项目结构解析

创建完成后，项目目录结构如下：

web_socket_counter/
├── lib/
├── routes/
├── test/
└── pubspec.yaml

lib/：存放项目的主要逻辑代码
routes/：定义API端点
test/：存放测试代码

开发服务器启动

进入项目目录并启动开发服务器：

cd web_socket_counter
dart_frog dev

服务器默认会在8080端口启动。你可以通过浏览器或curl命令验证服务器是否正常运行：

curl http://localhost:8080

WebSocket路由创建

我们需要创建一个处理WebSocket连接的端点。在routes目录下创建ws.dart文件：

import 'package:dart_frog/dart_frog.dart';

Response onRequest(RequestContext context) {
  return Response(body: 'WebSocket endpoint');
}

这个基础实现只是返回一个简单的文本响应，我们接下来会扩展它。

添加WebSocket支持

为了处理WebSocket连接，我们需要添加dart_frog_web_socket依赖：

dart pub add dart_frog_web_socket

然后更新ws.dart文件：

import 'package:dart_frog/dart_frog.dart';
import 'package:dart_frog_web_socket/dart_frog_web_socket.dart';

Future<Response> onRequest(RequestContext context) async {
  final handler = webSocketHandler(
    (channel, protocol) {
      print('客户端已连接');
      channel.sink.add('服务器问候');
      
      channel.stream.listen(
        print,
        onDone: () => print('客户端断开连接'),
      );
    },
  );
  return handler(context);
}

这个实现现在可以：

接受WebSocket连接
向客户端发送问候消息
打印客户端发送的消息
在客户端断开时打印日志

状态管理设计

为了实现计数器功能，我们需要一个状态管理方案。这里我们选择使用BroadcastCubit，它能够：

维护计数器状态
广播状态变化给所有连接的客户端
提供增/减计数器的方法

首先添加依赖：

dart pub add broadcast_bloc

创建计数器Cubit（lib/counter/cubit/counter_cubit.dart）：

import 'package:broadcast_bloc/broadcast_bloc.dart';

class CounterCubit extends BroadcastCubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
  void decrement() => emit(state - 1);
}

依赖注入配置

为了使Cubit在整个应用中可用，我们创建一个provider（lib/counter/middleware/counter_provider.dart）：

import 'package:dart_frog/dart_frog.dart';
import 'package:web_socket_counter/counter/counter.dart';

final _counter = CounterCubit();
final counterProvider = provider<CounterCubit>((_) => _counter);

然后创建全局中间件（routes/_middleware.dart）：

import 'package:dart_frog/dart_frog.dart';
import 'package:web_socket_counter/counter/counter.dart';

Handler middleware(Handler handler) => handler.use(counterProvider);

完整WebSocket实现

现在我们可以将计数器功能集成到WebSocket处理中：

import 'package:dart_frog/dart_frog.dart';
import 'package:dart_frog_web_socket/dart_frog_web_socket.dart';
import 'package:web_socket_counter/counter/counter.dart';

Future<Response> onRequest(RequestContext context) async {
  final handler = webSocketHandler(
    (channel, protocol) {
      final cubit = context.read<CounterCubit>()..subscribe(channel);
      channel.sink.add('${cubit.state}');
      
      channel.stream.listen(
        (event) {
          switch (event) {
            case '__increment__':
              cubit.increment();
              break;
            case '__decrement__':
              cubit.decrement();
              break;
            default:
              break;
          }
        },
        onDone: () => cubit.unsubscribe(channel),
      );
    },
  );
  return handler(context);
}

这个实现：

当客户端连接时，将其订阅到计数器状态更新
发送当前计数器值给新客户端
根据客户端消息增加或减少计数器
客户端断开时取消订阅

客户端测试

创建一个简单的客户端测试脚本：

import 'package:web_socket_channel/web_socket_channel.dart';

void main() async {
  final channel = WebSocketChannel.connect(
    Uri.parse('ws://localhost:8080/ws')
  );
  
  channel.stream.listen(print);
  
  channel.sink.add('__increment__');
  channel.sink.add('__decrement__');
  
  await Future.delayed(Duration(seconds: 1));
  channel.sink.close();
}

运行这个脚本，你应该能看到计数器值的变化输出：