flask sse代码示例_sseclient flask-优快云博客

本文链接：https://blog.youkuaiyun.com/catontower/article/details/146041574

服务端代码：

from flask import Flask, Response, stream_with_context ,render_template
from flask import request
import time 
import json
 
app = Flask(__name__)
 
def generate_events(ary):
    while True:
        # 自定义事件1：系统状态 
        yield "event: system_status\n"
        d = {}
        for a in ary:
            d[a]=55
        yield 'data: {}\n\n'.format(json.dumps(d))

    
    # 自定义事件2：用户消息 
        for i in range(3):
            yield "event: user_message\n"
            d = {}
            d['text'] = f'消息 {i}'
            d['time']=time.time()
            yield 'data: {}\n\n'.format(json.dumps(d))
            time.sleep(1) 
    
        d = {}
        d['text'] = f'1111消息 {i}'
        d['time']=time.time()
        yield 'data: {}\n\n'.format(json.dumps(d))
 
@app.route('/stream') 
def stream():
    p = request.args.get("point")
    ary = p.split(",")
    return Response(
        stream_with_context(generate_events(ary)),
        mimetype='text/event-stream',
        headers={'Cache-Control': 'no-cache', 'X-Accel-Buffering': 'no'}
    )

@app.route('/') 
def index():
    return render_template('sse_client3.html') 
 
if __name__ == '__main__':
    app.run(threaded=True)

客户端代码：templates/sse_client3.html

<!DOCTYPE html>
<html>
<body>
    <script>
const eventSource = new EventSource('/stream?point=V600.1,VD500,VW400');
 
// 监听系统状态事件 
eventSource.addEventListener('system_status',  e => {
 console.log(' system_status:', e.data); 
    const data = JSON.parse(e.data); 
    console.log('CPU:',  data.cpu,  '内存:', data.memory); 
});
 
// 监听用户消息事件 
eventSource.addEventListener('user_message',  e => {
 	console.log(' user_message:', e.data); 
    console.log(' 收到消息:', JSON.parse(e.data)); 
});
 
// 默认事件（未指定event字段时触发）
eventSource.onmessage  = e => {
    console.log(' 未分类数据:', e.data); 
};
    </script>
</body>
</html>