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()); }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战