用http方式实现websocket，如chatGPT时时打字效果，原生方式：fetch+sse+post

小珑gg22mm

已于 2024-08-27 21:58:48 修改

阅读量344

点赞数 2

文章标签： python 开发语言 javascript

于 2024-08-03 22:13:55 首次发布

本文链接：https://blog.csdn.net/wll52/article/details/140897938

版权

用http方式实现websocket，如chatGPT时时打字效果，原生方式：fetch+sse+post

fetch实现stream、原生fetch+sse+post

fetch 本身不直接支持流式输出，但你可以使用 ReadableStream 和 TextDecoder 等 Web Streams API 来实现类似的效果。

后端：比如python, php, java 等等都行... 核心是前端，在下面会有完整展示

from fastapi import FastAPI, Response
from fastapi.responses import StreamingResponse
import json
import time
from fastapi.middleware.cors import CORSMiddleware #解决跨域
from fastapi import FastAPI, File, UploadFile,Form,Request
# from sse_starlette.sse import EventSourceResponse
 
app = FastAPI()
 
# 假设这是你想按事件流形式发送的JSON数据
data = {
    "messages": [
        {"text": "Hello, 1!", "timestamp": "2021-01-01T12:00:00"},
        {"text": "Hello, 2!", "timestamp": "2021-01-02T12:00:01"},
        {"text": "Hello, 3!", "timestamp": "2021-01-02T12:00:02"},
    ]
}

def generate_json_stream(data):
    # 分割JSON数据，并逐个发送
    for message in data["messages"]:
        json_str = json.dumps(message)
        yield json_str.encode("utf-8") #发送当前值给前端
        time.sleep(1)  # 模拟延时


# 配置 CORSMiddleware 跨域
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],        # 允许访问的源
    allow_credentials=True,     # 支持 cookie
    allow_methods=["*"],        # 允许使用的请求方法
    allow_headers=["*"]         # 允许携带的 Headers
)

@app.post("/stream-json")
async def stream_json( request: Request,foo: str = Form(default='') ):  
    
    # 获取json    
    json_data = await request.json()
    getHeader = request.headers
    print('----1-----',json_data,getHeader)

    # return EventSourceResponse(generate_json_stream(data), media_type="text/event-stream")
    return StreamingResponse(generate_json_stream(data), media_type="text/event-stream")

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

核心是前端：

<!DOCTYPE html>
<html>
<head>
  <title>原生fetch+sse+post</title>
</head>
<body>  
  <div id="messages"></div>
  <button id="sendDataButton" onClick="send()">发送</button>

	<script>
	
	function send() {
	  
		  msg='123465';
			
		  // 发送 POST 请求
		  fetch('http://127.0.0.1:16887/stream-json', {//1、post提交
			
			method:"POST",
			body:JSON.stringify({ "content": msg}),
			timeout: 0,
			dataType:"text/event-stream",
			headers:{
			  "Content-Type":"application/json"
			},
			
		  }).then(response => {//2、post提交后返回的流
			
				// 检查响应是否成功
				if (!response.ok) {
				  throw new Error('网络响应异常');
				}
				// 返回一个可读流
				return response.body;
			
		  }).then(body => {//3、对流进行时时打印
			
				//disableLoading();//开始打印数据 ......
				
				//获取时时数据
				const reader = body.getReader();
				
				// 时时打印 - 读取数据流
				function read() {
				  
				  return reader.read().then(({ done, value }) => {
					// 检查是否读取完毕
					if (done) {
					  console.log('已传输完毕');
					  return;
					}
					// 处理每个数据块
					console.log('收到的数据:', value);
					
					//把流处理成文本
					value_to_txt = new TextDecoder().decode(value)
					
					//json字符串 转 对象obj
					var resultObj = JSON.parse(value_to_txt);				
					console.log(resultObj);
						
					console.log('收到的数据 变成文本 :',  value_to_txt );
					
					// 递归调用自身 - 继续读取下一个数据块
					read();
					
				  });
				}
				
				// 激活时时打印 - 开始读取数据流
				read();
			
		  }).catch(error => {//捕捉异常
		  		console.error('Fetch 异常:', error);
		  });
	}
	
	</script>
</body>
</html>