使用FastAPI和StreamableHTTP实现打字机流式对话

使用FastAPI和StreamableHTTP实现打字机流式对话

关注：朋蛋、码上小明

1 StreamableHTTP和SSE

SSE（Server-Sent Events）是一种单向、依赖长连接的传统实时推送技术，而 Streamable HTTP 是一种更现代、灵活的协议设计，它按需使用流式传输，且对无状态架构友好。

特性	SSE (EventSourceResponse)	StreamableHTTP (StreamingResponse)
核心类	fastapi.sse.EventSourceResponse	fastapi.responses.StreamingResponse
数据格式	自动格式化为 text/event-stream	完全自定义 (如 JSON Lines, 二进制流)
重连机制	浏览器自动处理	需手动实现
适用场景	简单的实时通知、状态更新	AI 流式输出、文件下载、日志流
服务器	⚠️（1）后端需要返回 StreamingResponse，并指定 media_type="text/event-stream"。 （2）数据格式必须遵循 SSE 规范，以 data: 开头，并用两个换行符（\n\n）结尾。 （3）数据格式示例：data: {"msg":"你好"} \n\n	⚠️（1）后端同样返回 StreamingResponse，但 MIME 类型更自由，例如：media_type="application/json"（推荐）、media_type="application/x-ndjson"、media_type="text/event-stream"等。 （2）数据格式可自定义，通常每块数据是一个完整的 JSON 对象，并以一个换行符 （\n） 结尾 。 （3）数据格式示例：{"msg":"你好"} \n
客户端	浏览器原生 EventSource，简单易用	需使用 fetch + reader，更灵活

⚠️注意：如果实现SSE可直接使用FastAPI中fastapi.sse的EventSourceResponse, ServerSentEvent两个模块。

2 框架设计

2.1 机构说明

SSE和StreamableHttp的实时对话存在刷新后会自动断开，无法进行直接连接，一般需要记录实时对话的信息才能重连（Websocket不存在这个问题）。解决思路是先创建实时对话的后台任务服务并记录任务编号，接着实时运行后台服务的对话并实时发送给Redis中的Stream，最后对话服务实时监听Redis服务。

其他说明：（1）为了简单，本文使用FaskAPI中的数据background作为后端任务，可根据实际情况更换为celery。（2）为了时效性，本文选择Redis中的Stream结构作为消息流，实现实时对话。（3）使用Redis的XADD发送消息和XREAD接收消息。XREAD会在异常情况下丢失数据，因为没有消息确认机制；针对消息重要的环境，可使用XREADGROUP不会丢失消息，具有消息确认机制，XREAD和XREADGROUP需求自己实时监听，都不会阻塞主进程。不要使用Redis的发布订阅（Pub/Sub），此模式发送消息不会阻塞进程，接收消息时会阻塞进程；此外此外模式即发即收不存储数据，用户在线能接收消息，不在线消息会丢失，上线也不会接收到以前的消息，适合用于广播模式。
Redis消息服务 后台任务服务 对话服务 前端 Redis消息服务 后台任务服务 对话服务 前端 1 实时对话流 2 创建后台服务 3 实时发送消息 4 获取任编号 5 获取任务消息 6 实时监听消息 7 StreamableHTTP实时流

2.2 创建Redis

Redis管理工具Redis-Insight-win-installer

# 下载地址
https://redis.io/downloads/#insight

redis.conf

# redis.conf
# 可远程连接
# bind 127.0.0.1
# 解除保护模式
protected-mode no
# 数据持久化
appendonly yes
# 设置密码
requirepass 123456

Docker创建

sudo docker run -itd \
--restart=always \
--name fl_redis \
-p 6379:6379 \
-v /home/redis/redis.conf:/etc/redis/redis.conf \
-v /home/redis/data:/data \
redis:8.6.2 redis-server /etc/redis/redis.conf

3 创建前端

3.1 创建流程

Vue3的官网

https://vuejs.org/

使用Vite创建Vue3前端项目，Vite的官网地址

https://vite.dev/

在cmd中使用命令创建项目

npm create vite@latest

# 设置项目信息
streamchat

创建的流程如下

npm create vite@latest

Need to install the following packages:
create-vite@9.0.3
Ok to proceed? (y) y


> npx
> create-vite

|
o  Project name:
|  streamchat
|
o  Select a framework:
|  Vue
|
o  Select a variant:
|  TypeScript
|
o  Install with npm and start now?
|  Yes
|
o  Scaffolding project in D:\1_projects\vscode\streamchat...
|
o  Installing dependencies with npm...

added 49 packages, and audited 50 packages in 20s

9 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
|
o  Starting dev server...

> streamchat@0.0.0 dev
> vite


  VITE v8.0.3  ready in 408 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

需要的依赖包

VueUse是一个专为 Vue 3 开发者打造的、功能强大的工具函数库。

# VueUse包
https://github.com/vueuse/vueuse

@types/node的作用，可在 VS Code 等编辑器中智能提示与自动补全。

安装组件

npm install --save-dev @types/node
npm install 

3.2 项目配置

配置绝对目录"@"。

（1）Vite 配置 (vite.config.ts)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],

  // 配置服务
  server: {
    // 设置端口号
    port: 5173,

    // 注意：下面的代理配置在项目打包上线后会失效

    // 配置代理
    proxy: {
      // 代理 /api 请求
      '/api': {
        target: 'http://localhost:3000', // 后端服务器地址
        changeOrigin: true
      },
      
    }
  },

  // 新加内容
  resolve: {
    alias: {
      // 核心配置：@ 指向 src 目录
      '@': path.resolve(__dirname, './src')
    }
  }
})

（2）TypeScript 配置 (tsconfig.json或者tsconfig.app.json)

如果tsconfig.json已经映射了tsconfig.app.json，直接配置tsconfig.app.json即可。

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "types": ["vite/client"],

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,

    // 新加内容
    // 设置绝对路径
    "paths": {
      "@/*": ["./src/*"],
    }
    
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

3.3 项目编辑

项目的常用命令

# 启动服务
npm run dev

项目结构

apis/chats/index.ts

export class Message {
    chat_id: string = ""
    last_event_id: number = 0
    question: string = ""
}

// export const streamChat = async(msg: Message): Promise<Response> => {
export const streamChat = async(msg: Message) => {
    return await fetch(
        "/api/chat",
        {
            method: "POST",
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({"chat": msg})
        }
    );
}

router/index.ts

import { createRouter, createWebHashHistory } from 'vue-router'


import HomeView from "@/views/index.vue"

import Chat from '@/views/chat/index.vue';
import About from '@/views/about/index.vue';
import Summary from '@/views/Summary.vue';


const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    // 一级路由
    {
      path: '/',
      component: HomeView,
      // 二级路由
      children: [
        {
          // 重定向到chat
          path: '/',
          redirect: '/chat'
        },
        {
          path: '/chat',
          name: 'Chat',
          component: Chat,
          meta: {
            title: "对话"
          }
        },
        {
          path: '/summary',
          name: 'Summary',
          component: Summary,
          meta: {
            title: "说明"
          }
        }
      ]
    },

    // 一级路由
    {
      path: '/about',
      name: 'About',
      component: About,
      meta: {
        title: "关于"
      }
    },
  ],
})

export default router;

views/about/index.vue

<script setup lang="ts">

</script>

<template>
  <div>
    公众号:朋蛋、码上小明， 版本：1.0
  </div>
</template>

views/chat/index.vue

<script setup lang="ts">

/*
SSE可使用EventSource对象实现数据的接收和发送
*/

// 下面的方法可实现StreamHttp
import { ref, onMounted } from 'vue'
import { Message } from '@/apis/chats';
import { m } from 'vue-router/dist/router-CWoNjPRp.mjs';

// import { streamChat } from '@/apis/chats';

// 初始化值
let textInput = ref("消息")
// 返回值
let textOutput = ref("")
// 用户编号
let chatId = ref("")

// 设置SessionID
const sessionId = 'session-123';

// 中断请求
let controller: AbortController | null = null


// 发送消息
async function sendMessage(){
    console.log("hello")

    // 如果已有连接，先断开（防止重复）
    if (controller != null) {
        controller.abort();
    }

    controller = new AbortController();

    // 设置消息
    let msg = new Message();
    msg.question = textInput.value;
    msg.chat_id = chatId.value;

    console.log(msg)
    console.log(JSON.stringify({"chat1": msg}))

    // 可以将接口封装起来，统一调用
    // const res = await streamChat(msg)

    const headers = {
        'Content-Type': 'application/json',
        'Mcp-Session-Id': sessionId
    };

    try {
      const res = await fetch(
          "/api/chat",
          {
              method: "POST",
              headers: headers,
              body: JSON.stringify(msg),
              signal: controller.signal // 绑定中断信号
          }
      );

      if (!res.ok){
        throw new Error('网络响应错误');
      }   

      if(res.body == null){
        console.log("数据为空")
        return 
      }

      const reader = res.body.getReader();
      const decoder = new TextDecoder("utf-8");

      while (true) {
          const { done, value } = await reader.read();
          if (done) break;

          // 解码
          const chunk = decoder.decode(value);
          console.log("收到数据:", chunk);
          const data = JSON.parse(chunk);
          
          // 更新数据
          textOutput.value = textOutput.value + data.msg

      }
    } catch (error) {
      // 中断请求
      if (error instanceof Error && error.name === 'AbortError') {
          console.log('用户主动中断了请求');
      } else {
          console.error('请求出错:', error);
      }
    } finally {
        controller = null;
    }
}

// 终止消息
function stopMessage(){
    console.log("stop")

    // 拿着编号调用自定义的接口即可中断
    if (controller) {
      controller.abort()
    }
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${textInput.value}.`)
  // sendMessage()
})

</script>


<template>
  <div class="editor">
    <textarea class="input" v-model="textInput"></textarea>
    <br>
    <input placeholder="用户编号" v-model="chatId" />
    <div class="buttonmsg">
        <button @click="sendMessage">发送</button>
        <button @click="stopMessage">中断</button>
    </div>

    <div style="padding-top: 20px;">接收的消息</div>
    <div class="output">{{ textOutput }}</div>
  </div>
</template>

<style scoped>
.input{
  width: 400px;
  height: 20px;
}

.buttonmsg > button{
  margin-left: 50px;
}

</style>

views/index.vue

<template>
  <div class="views">
    <div class="nav">
      <a href="/chart">对话</a>
      <a href="/summary">说明</a>
      <a href="/about">关于</a>
    </div>
    <router-view></router-view>
  </div>
</template>

<style scoped>
.nav> a{
  padding-left: 50px;
}
</style>

views/Summary.vue

<script setup lang="ts">

</script>

<template>
  <div>
    基于Stream Http协议实现实时对话
  </div>
</template>

App.vue

<script setup lang="ts">
</script>

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</style>

4 FastAPI后端

4.1 main.py

import asyncio
import json
from contextlib import asynccontextmanager
from typing import Dict

import uvicorn
from fastapi import FastAPI, APIRouter
from fastapi.responses import StreamingResponse
from fastapi.middleware.cors import CORSMiddleware

from pydantic import BaseModel

from redis_async_conf import init_asyredis, close_asyredis, asyredisdb


# 异步上下文管理器，加入到FastAPI中
@asynccontextmanager
async def lifspan(app: FastAPI):
    # 一、 启动服务
    # 1 初始化Redis
    await init_asyredis()

    # 等待结束后，自动关闭资源
    yield

    # 二、关闭资源
    # 1 关闭连接池和资源，会自动关闭连接池等
    await close_asyredis()

# 构建应用
app = FastAPI()

# CORS配置
app.add_middleware(
    CORSMiddleware,
    # 生产环境可指定具体域名
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


class ChatRequest(BaseModel):
    chat_id: str = ""
    last_event_id: int = 0
    question: str = ""


class ChatResponse(BaseModel):
    chat_id: str = ""
    last_event_id: int = 0
    code: int = 0
    msg: str = ""


# 定义全局变量
TEXT_MSG = """
河南大学创立于1912年，始名河南留学欧美预备学校。后历经中州大学、国立开封中山大学、省立河南大学等阶段，1942年升格为国立河南大学。1952年院系调整 ，校本部更名为河南师范学院。后经开封师范学院、河南师范大学等阶段，1984年恢复河南大学校名。2000年6月，原河南大学、开封医学高等专科学校、开封师范高等专科学校合并组建新的河南大学。2017年9月，学校入选首批国家"双一流"建设高校。
"""

# 保存缓存内容
chat_history_cache: Dict[str, str] = dict()

# 保存任务信息
background_tasks: Dict[str, asyncio.Task] = dict()

# 设置路由
router = APIRouter(prefix="/api", tags=["api"])


# 1. 定义一个异步生成器，模拟"打字"过程，发送到Redis中
async def background_worker(chat: ChatRequest):

    for i in range(len(TEXT_MSG)):
        # 设置数据
        msg_item = TEXT_MSG[i]

        await asyncio.sleep(0.1)  # 模拟耗时操作
        chat_res = ChatResponse()
        chat_res.msg = msg_item

        # 获取编号
        chat_res.chat_id = chat.chat_id
        chat_res.last_event_id = chat.last_event_id

        # 转化为字典
        chat_res = chat_res.model_dump()
        print(chat_res)

        await asyredisdb.xadd(name=chat.chat_id, fields=chat_res)

    # 消息结束
    chat_res = ChatResponse()
    chat_res.code = 2
    chat_res.msg=""
    chat_res = chat_res.model_dump()

    await asyredisdb.xadd(name=chat.chat_id, fields=chat_res)


async def create_consumer_group(stream_name: str="chatstream", group_name: str="chatgroup"):
    try:
        await asyredisdb.xgroup_create(
            # 流的名称
            name=stream_name,
            # 组名
            groupname=group_name,
            # 设置消费策略
            # id="$"表示只消费新来的消息
            # id="0"表示消费全部的消息，即从头开始消费
            id="$",
            # 如果流不存在自动创建
            mkstream=True
        )
    except Exception as e:
        if "BUSYGROUP" in str(e):
            print("分组已存在！")
        else:
            print(e)


async def generate_stream(chat: ChatRequest):
    print(chat)
    # 判断是否已存在，如果第一次，那就创建任务
    # 后期可根据自己需求判断任务是否在数据库中存在
    if chat.chat_id == "1":
        # chat_id创建任务，并设置任务编号为"2"为接收数据
        chat.chat_id = "2"

        # 后期可根据任务编号进行中断等
        task = asyncio.create_task(background_worker(chat))
        print("====", task)

    # 监听Redis服务
    try:
        # 设置任务是否结束
        is_end: bool = False

        # 设置消费者名称
        stream_name: str = chat.chat_id
        group_name: str = "chatgroup"
        consumer_name: str = "worker"

        # 构建Redis中的分组
        await create_consumer_group(stream_name, group_name)

        # 接收消息
        while True:
            try:
                # 设置一对一编号
                messages = await asyredisdb.xreadgroup(
                    # 对话的GroupName
                    groupname=group_name,
                    # 消费者名称
                    consumername=consumer_name,

                    # 数据流
                    streams={
                        # 表示只读取尚未被其他消费者读取的数据
                        stream_name: ">"
                    },
                    # 获取10个块
                    count=1,
                    # 超时等待5秒
                    block=5000,
                )

                if messages:
                    print(messages)
                    for stream, msgs in messages:
                        for msg_id, data in msgs:
                            data_dict = data

                            yield json.dumps(data_dict)

                            # 确认消息接收
                            await asyredisdb.xack(
                                consumer_name,
                                group_name,
                                chat.chat_id
                            )

                            if data_dict.get("code") == "2":
                                is_end = True
                                break
                        # 终止循环
                        if is_end:
                            break
                else:
                    print("超时")
                    print(messages)
                    break

                # 终止循环
                if is_end:
                    break

            except Exception as e:
                print("数据出错！", e)

                # 中断循环
                break

        print("*****结束****")

        # 删除Redis中Stream释放空间
        # await asyredisdb.delete(chat.chat_id)

    except asyncio.CancelledError:
        print("====任务被取消====")



@router.post("/chat")
async def chatting(chat: ChatRequest):
    print("=====")
    print(chat)
    print("=====")

    return StreamingResponse(
        generate_stream(chat),
        # "application/x-ndjson"返回值是矩阵，不方便调试和查看。
        # media_type="application/x-ndjson",
        media_type="application/json"
    )

# 添加到路由
app.include_router(router)

if __name__ == '__main__':
    uvicorn.run(app, host="0.0.0.0", port=3000)

4.2 redis_async_conf.py

import logging

# 适用于异步编程
from redis.asyncio import Redis, ConnectionPool


def _init_redis_client() -> Redis:
    # 创建爱你连接池
    pool = ConnectionPool().from_url(
        # url="redis://default:password@ip:port",
        url="redis://default:123456@192.168.108.147:6379",
        max_connections=100,
        decode_responses=True
    )

    return Redis(connection_pool=pool)


async def init_asyredis():
    try:
        await asyredisdb.ping()
        print("启动连接池成功")
        logging.warning("启动连接池成功！")
    except Exception as e:
        print("启动连接池失败")
        logging.error("启动连接池失败！")


async def close_asyredis():
    await asyredisdb.aclose()


asyredisdb = _init_redis_client()

5 截图

使用方法，先在用户编号中输入1触发条件，然后输入2，点击中断，再点击发送可以继续接收剩下的数据。

1 开始创建后端任务

点击中断后，后台还在持续运行，不影响数据。

后端

2 断开后继续接收

后端