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
data: " + json.dumps({'counter': random.randint(0, 100)}) + "

"`：这行代码生成了一个新的服务器端事件。事件的类型是`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
data: " + json.dumps({'counter': random.randint(0, 100)}) + "

"`：这行代码生成了一个新的服务器端事件。

    # 事件的类型是`update`，数据是一个包含随机整数的JSON对象。

    yield "event: update
data: " + json.dumps({'counter': random.randint(0, 100)}) + "

"

 

 

@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());

}