一小时跑通 Flutter 流式对话 - 一个独立开发者省下两周对接时间的复盘

为什么效率视角值得认真看

独立开发者最贵的资产是时间。过去接入一个大模型 API，你要做的事包括：注册各家平台、阅读各家差异微妙的 SDK 文档、写一套流式解析、再为换模型预留抽象层。经验上，第一次跑通往往要一到两天，如果中途换供应商或加一家做对比，又是一次半天起步的返工。

而通过统一网关接入，这个流程可以被压缩到一小时以内。我自己的实测对比是：

• 对接前：选型调研半天，注册、阅读文档、写解析约一天，首次流式输出跑通再算上调试，累计约 12–16 小时。
• 对接后：注册账号、拿 API Key、复制示例代码，到看见第一个字蹦出来，约 40 分钟，其中大部分时间在等 IDE 编译。

这不是夸张的营销数字，只是把「重复对接 N 家」变成「对接一次、之后换模型只改一个字符串」之后，自然产生的节省。长期看，每新增一个模型做 A/B 测试，成本从「半天」降到「改一行模型名」。

本文记录这套流程：注册 ThisToken.AI、获取 Key、用一段可复制的代码先在本地验证网关连通，再在 Flutter 里实现真正的打字机效果。

第一步：注册并拿到 API Key

1. 打开 ThisToken.AI 官网，进入注册页完成账号创建。
2. 登录后进入控制台的 API Keys 页面，点击「创建 Key」。
3. 复制生成的 Key 妥善保存——它只在创建时完整展示一次。

费用方面，不同模型计费方式不同，以官网价格页为准，本文不引用具体数字。

第二步：先用 JavaScript 验证连通性

不要一上来就在 Flutter 里调。先用一段 Node.js 脚本确认 Key 和网关都正常，把问题域缩小到「只排查 Flutter 端」。

// test-gateway.js
// 运行方式：node test-gateway.js
const API_KEY = process.env.THISTOKEN_API_KEY; // 建议从环境变量读取

async function main() {
  const res = await fetch("https://api.thistoken.ai/v1/chat/completions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${API_KEY}`,
    },
    body: JSON.stringify({
      model: "gpt-4o-mini", // 换模型只改这一行
      stream: true,
      messages: [{ role: "user", content: "用一句话介绍流式输出" }],
    }),
  });

  const reader = res.body.getReader();
  const decoder = new TextDecoder();
  let buffer = "";

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    buffer += decoder.decode(value, { stream: true });
    const lines = buffer.split("\n");
    buffer = lines.pop();
    for (const line of lines) {
      if (line.startsWith("data: ") && line !== "data: [DONE]") {
        const chunk = JSON.parse(line.slice(6));
        const delta = chunk.choices[0]?.delta?.content;
        if (delta) process.stdout.write(delta);
      }
    }
  }
}

main().catch(console.error);

运行 THISTOKEN_API_KEY=你的key node test-gateway.js，终端逐字输出即代表链路全通。这段代码的价值不只是验证——SSE 的解析逻辑和 Flutter 端完全同构，理解了它，Flutter 侧的代码就是「换个语言重写一遍」。

第三步：在 Flutter 里实现流式对话

Flutter 侧核心是两件事：用 http 包发起流式请求并读取字节流，以及用 StreamBuilder 或 setState 把增量内容刷到界面上。

// chat_stream.dart
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class ChatStreamPage extends StatefulWidget {
  const ChatStreamPage({super.key});
  @override
  State<ChatStreamPage> createState() => _ChatStreamPageState();
}

class _ChatStreamPageState extends State<ChatStreamPage> {
  final _controller = TextEditingController();
  String _reply = '';
  bool _loading = false;

  Future<void> _send() async {
    final question = _controller.text.trim();
    if (question.isEmpty) return;
    setState(() { _reply = ''; _loading = true; });

    final request = http.Request(
      'POST',
      Uri.parse('https://api.thistoken.ai/v1/chat/completions'),
    );
    request.headers['Content-Type'] = 'application/json';
    request.headers['Authorization'] = 'Bearer ${const String.fromEnvironment('THISTOKEN_API_KEY')}';
    request.body = jsonEncode({
      'model': 'gpt-4o-mini',
      'stream': true,
      'messages': [{'role': 'user', 'content': question}],
    });

    final response = await http.Client().send(request);
    final buffer = StringBuffer();

    await for (final line in response.stream
        .transform(utf8.decoder)
        .transform(const LineSplitter())) {
      if (line.startsWith('data: ') && line != 'data: [DONE]') {
        final chunk = jsonDecode(line.substring(6));
        final delta = chunk['choices'][0]?['delta']?['content'];
        if (delta != null) {
          buffer.write(delta);
          setState(() => _reply = buffer.toString());
        }
      }
    }
    setState(() => _loading = false);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('流式对话')),
      body: Column(children: [
        Expanded(child: ListView(
          padding: const EdgeInsets.all(16),
          children: [Text(_reply.isEmpty && _loading ? '思考中…' : _reply)],
        )),
        Padding(
          padding: const EdgeInsets.all(8),
          child: Row(children: [
            Expanded(child: TextField(controller: _controller)),
            IconButton(
              onPressed: _loading ? null : _send,
              icon: const Icon(Icons.send),
            ),
          ]),
        ),
      ]),
    );
  }
}

编译运行时传入 Key（flutter run --dart-define=THISTOKEN_API_KEY=你的key），输入问题后即可看到打字机效果。

三个省过返工时间的提示

1. 别把 Key 写进代码仓库。示例里用 --dart-define 传入，正式项目建议接入后端代理或使用环境配置。
2. 解析 SSE 时保留 buffer。HTTP 分包不保证按行切分，直接按行解析偶发丢字。上面的 LineSplitter 方案配合逐行消费，可以避开这个坑。
3. 换模型先跑第二步的脚本。网关是 OpenAI 兼容格式，换模型理论上只改 model 字段，但先用 30 秒的脚本验证一次，比在模拟器里排查快得多。

算一笔总账

这套流程跑通后，你的项目获得的是：一个可用的流式对话界面、一份可复用的网关连通性测试脚本，以及「换模型只改一个字符串」的灵活性。对独立开发者来说，把对接成本从「按天计」压到「按小时计」，意味着同样的周末可以多做一次原型验证、多试一个产品方向。

现在就可以开始：到 https://api.thistoken.ai/register 注册账号，拿到 Key，把上面那段脚本跑起来——第一个流式输出，比你想象的近得多。

---

想直接跑通示例？访问 https://api.thistoken.ai/register 注册 ThisToken.AI，获取 API Key 后即可开始。