随着 Web 技术的发展，越来越多的应用需要实时更新数据，以提供更好的用户体验。传统的方式是通过轮询来实现，但这种方式会占用大量的带宽和服务器资源，同时也会使得应用的响应速度变慢。为了解决这个问题，HTML5 引入了 Server-Sent Events（SSE）。
什么是 Server-Sent Events？
Server-Sent Events 是一种基于 HTTP 的实时通信技术，它允许服务器向客户端推送数据，而不需要客户端发起请求。与 WebSocket 不同，SSE 使用的是标准的 HTTP 协议，因此可以在任何支持 HTTP 的浏览器中使用。另外，SSE 也支持自定义事件和数据格式，使得开发者可以更加灵活地使用它。
如何使用 Server-Sent Events？
使用 SSE 的步骤如下：
在服务器端，需要使用特定的 MIME 类型
text/event-stream来表示 SSE 数据流。另外，还需要设置Cache-Control头为no-cache，以确保每次请求都会从服务器获取最新的数据。// www.javascriptcn.com code example from flask import Flask, Response app = Flask(__name__) @app.route('/stream') def stream(): def event_stream(): while True: yield 'event: ping\n' yield 'data: {}\n\n'.format('pong') time.sleep(1) return Response(event_stream(), mimetype='text/event-stream', headers={'Cache-Control': 'no-cache'})在客户端，需要创建一个
EventSource对象，并指定 SSE 数据流的 URL。当服务器向客户端推送数据时，EventSource对象会自动触发message事件，开发者可以在事件处理函数中获取推送的数据。const source = new EventSource('/stream'); source.addEventListener('message', function(e) { console.log(e.data); // 'pong' });
Server-Sent Events 的优点
相比于传统的轮询方式，使用 SSE 有以下优点：
- 减少带宽和服务器资源的占用，因为 SSE 只在有数据更新时才会向客户端推送数据。
- 提高应用的响应速度，因为 SSE 可以实现实时更新数据，而不需要等待下一次轮询。
- 更加灵活，因为开发者可以自定义事件和数据格式，以适应不同的应用场景。
示例代码
以下是一个使用 Flask 实现 SSE 的简单示例：
// www.javascriptcn.com code example
from flask import Flask, Response
import time
app = Flask(__name__)
@app.route('/stream')
def stream():
def event_stream():
while True:
yield 'event: ping\n'
yield 'data: {}\n\n'.format('pong')
time.sleep(1)
return Response(event_stream(), mimetype='text/event-stream', headers={'Cache-Control': 'no-cache'})
@app.route('/')
def index():
return '''
<html>
<head>
<title>SSE Demo</title>
</head>
<body>
<script>
const source = new EventSource('/stream');
source.addEventListener('message', function(e) {
console.log(e.data); // 'pong'
});
</script>
</body>
</html>
'''
if __name__ == '__main__':
app.run(debug=True)在浏览器中打开 http://localhost:5000/，可以看到控制台输出了 pong。同时，在服务器端也可以看到每秒钟会向客户端推送一次数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d4d16aa941bf7134901ec3