Python实现半双工的实时通信SSE(Server-Sent Events)
1 简介
实现实时通信一般有WebSocket、Socket.IO和SSE(Server-Sent Events)三种方法。WebSocket和Socket.IO是全双工的实时双向通信技术,适合用于聊天和会话等,但相对于SSE比较笨重,SSE适合用于服务器主动向客户端实时推送数据,例如:用于大模型实时对话。
WebSocket是一种HTML5提供的全双工通信协议,它基于TCP在客户端和服务器之间建立持久性的连接,实现两者之间实时双向数据通信。
Socket.IO是一个封装了 Websocket 的实时双向数据通信库,它封装了自动重连、自动检测网络状况和自动跨浏览器兼容性等。
SSE(Server-Sent Events)是一种利用 HTTP 协议长连接特性,在服务器与客户端之间建立持久化连接,实现服务器主动向客户端推送数据的半双工实时数据通信技术,也被称为“事件流”(Event Stream)。
本文使用Python和Vue3实现SSE的实时通信,现在浏览器支持EventSource,不需要额外安装依赖包。
2 前端Vue3代码
<script setup lang="ts">
import { onBeforeUnmount} from 'vue'defineProps<{ msg: string }>()// 定义EventSource
let eventSource: any = null// 建立连接
function createSseConnect(dataId: string) {if (window.EventSource) {// 创建连接eventSource = new EventSource('http://127.0.0.1:5000/sse?data_id=' + dataId);// 接收消息eventSource.onmessage = (event: MessageEvent) => {console.log("onmessage:" + dataId + ": " + event.data)};// // 也可以使用addEventListener实现自定义事件和默认message事件// eventSource.addEventListener('message', (event: MessageEvent)=> {// console.log("message" + dataId + ": " + event.data);// }, false);// 打开连接eventSource.onopen = (event: Event) => {console.log("onopen:" + dataId + ": " + event)};// 连接出错时eventSource.onerror = (event: Event) => {console.log("onerror :" + dataId + ": " + event)};} else {console.log("浏览器不支持SSE")}
}// 组件销毁
onBeforeUnmount(() => {// 关闭EventSourceif(eventSource != null){eventSource.close()}
})</script><template><h1>{{ msg }}</h1><input type="button" value="发送消息" v-on:click="createSseConnect('1234')" /></template><style scoped>
.read-the-docs {color: #888;
}
</style>
3 后端Python代码
# 导入所需的模块
import json
import time
import datetime
from flask_cors import CORS
from flask import Flask, request, Responseapp = Flask(__name__)
# 解决跨域问题
CORS(app, supports_credentials=True)def get_data():# 获取当前时间,并转换为 JSON 格式dt_ms = datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S.%f')return json.dumps({'time': dt_ms}, ensure_ascii=False)@app.route('/sse')
def stream():data_id = request.args.get('data_id')print(data_id)return Response(eventStream(), mimetype="text/event-stream")def build_message(message: str, event="message"):"""构建消息:param message: 数据消息:param event: 事件,默认事件是“message”,可以根据自己的需求定制事件,对应前端的eventSource.addEventListener('message',()=>{}, false)中的message。:return:"""head = "event:" + event + "\n" + "data:"tail = "\n\n"return head + message + taildef eventStream():id = 0while True:id += 1# 睡眠time.sleep(1)str_out = build_message(get_data())print(str_out)# 构建迭代器yield str_outif __name__ == '__main__':app.run(host='0.0.0.0', port=5000, debug=True)