event source backend

# -*- coding: utf-8 -*-
# 这段代码是使用FastAPI框架创建一个简单的服务器端事件（Server-Sent Events，SSE）的示例。以下是对代码的详细解析：
# 1. `import json, random, ...`：这行代码导入了需要的Python模块。
# 2. `event_router = APIRouter()`：这行代码创建了一个新的APIRouter对象，用于定义路由。
# 3. `async def gen(): `：这行代码定义了一个异步生成器函数`gen`。这个函数每次被调用时，都会生成一个新的服务器端事件，事件的数据是一个包含随机整数的JSON对象。
# 4. `yield "event: update\ndata: " + json.dumps({'counter': random.randint(0, 100)}) + "\n\n"`：这行代码生成了一个新的服务器端事件。事件的类型是`update`，数据是一个包含随机整数的JSON对象。
# 5. `@ event_router.get('/event', summary='视频流',  description='视频流')`：这行代码定义了一个新的GET路由`/ event`。这个路由的摘要和描述都是`视频流`。
# 6. `async def get_event(): `：这行代码定义了一个新的异步处理函数`get_event`。这个函数被调用时，会返回一个新的StreamingResponse对象。
# 7. `return StreamingResponse(gen(), media_type='text/event-stream')`：这行代码创建了一个新的StreamingResponse对象。这个对象的内容是`gen`函数生成的服务器端事件，媒体类型是`text/event-stream`。
# 总的来说，这段代码创建了一个简单的服务器端事件（SSE）服务器。当客户端发送GET请求到`/ event`路由时，服务器会返回一个流，这个流的内容是由`gen`函数生成的服务器端事件。每个事件的数据是一个包含随机整数的JSON对象。这是一种常见的使用FastAPI和服务器端事件（SSE）实现实时通信的方法。

import json
import random
from fastapi import APIRouter, Depends, Request, Response, UploadFile
from fastapi.responses import StreamingResponse


event_router = APIRouter()


async def gen():

    # 4. `yield "event: update\ndata: " + json.dumps({'counter': random.randint(0, 100)}) + "\n\n"`：这行代码生成了一个新的服务器端事件。
    # 事件的类型是`update`，数据是一个包含随机整数的JSON对象。
    yield "event: update\ndata: " + json.dumps({'counter': random.randint(0, 100)}) + "\n\n"


@event_router.get('/', summary='event',  description='event')
async def get_event():
    return StreamingResponse(gen(), media_type='text/event-stream')

frontend

export function setupCounter(element: HTMLButtonElement) {
  let counter = 0;
  const setCounter = (count: number) => {
    counter = count;
    element.innerHTML = `count is ${counter}`;
  };
  setCounter(0);

  const eventSource = new EventSource("http://127.0.0.1:8000/v1/event/");
  eventSource.addEventListener("update", (event) => {
    // console.log(event.data);
    const data = JSON.parse(event.data);
    //  do something with data
    setCounter(data.counter);
  });
  // close event source
  element.addEventListener("click", () => eventSource.close());
}