在前端开发中，实时更新数据和图表是很常见的需求。传统的方式是使用 AJAX、WebSocket 等技术。但是，这些技术都需要自己编写很多的代码来实现通信和数据更新。从而增加了开发复杂度和工作量。而使用 Server-sent Events(SSE) 技术，则可以很方便地实现数据更新和图表实时刷新效果。本文将详细介绍 SSE 技术的使用方法，并带有示例代码贴近实际应用场景。
SSE 技术是什么？
Server-sent Events(SSE) 技术是 HTML5 中的一项规范，它允许一个网页自动获得来自服务器的更新。SSE 的特点是利用了浏览器中的 EventSource API，通过一条长期的 HTTP 连接，实现了服务器到客户端的单向通信。客户端只需要向服务器发起一次请求，然后就可以持续地接收服务器端的推送数据。SSE 的优点是代码简单易于维护，传输的数据长度可以达到数十 KB 量级，还支持跨域传输，不需要同源限制。
SSE 实现原理
SSE 协议使用 HTTP/1.1 协议的 GET 请求，服务器将响应头设置为“Content-Type:text/event-stream”，告诉浏览器这是一条 SSE 连接。在请求头中也可以添加 Last-Event-ID 字段，表示从某一事件 ID 开始接收数据，服务器接受到该请求后使用长连接（keepalive）的方式发送数据到客户端，一旦有新数据到来，服务器会生成一条事件消息，并携带上事件的 ID 和数据，客户端接收到消息后，通过解析消息体可以得到事件 ID 和数据，从而更新到页面中。
如何使用 SSE 实现图表实时刷新？
下面以 ECharts 组件为例，介绍如何使用 SSE 实现图表实时刷新的效果。ECharts（缩写为：Enterprise Charts）是百度前端开源的一个基于 HTML5 Canvas 的交互式可视化图表库。它非常的实用且风格优美。
服务端代码部分
// javascriptcn.com 代码示例
from flask import Flask, Response
import random, time
app = Flask(__name__)
def event_stream():
while True:
yield "event: chart_update\ndata: {}\n\n".format(random.randint(1, 100))
time.sleep(1)
@app.route('/')
def index():
return """
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SSE Chart Demo</title>
<script src="https://cdn.staticfile.org/echarts/4.9.0/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px;height:400px;"></div>
<script>
var chart = echarts.init(document.getElementById('chart'));
chart.setOption({
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [{
data: [],
type: 'line'
}]
});
var src = new EventSource('/stream');
src.addEventListener('chart_update', function(e) {
var data = JSON.parse(e.data);
chart.setOption({
xAxis: {
data: ['P' + data[0].toFixed(0)]
},
series: [{
name: "P",
data: [data[1].toFixed(2)],
}]
});
});
</script>
</body>
</html>
"""
@app.route('/stream')
def stream():
return Response(event_stream(), content_type='text/event-stream')上面给出了一个简单的 Flask Web 服务端代码，返回一个 HTML 页面，其中 JavaScript 代码中定义了一个 ECharts 的图表实例。同时，服务器还提供了一个 SSE 接口 /stream，会不断地生成一个数据并通过事件 chart_update 推送给客户端。
为了验证 SSE 推送的实时性，这里加入了一个 time.sleep(1) 的延时，表示每隔 1 秒钟就会生成一个随机数据发送。
客户端代码部分
通过上面的服务端代码，客户端可以不停的接收到服务器端的推送消息，下面给出 ECharts 图表实例更新实现的 JavaScript 代码。
// javascriptcn.com 代码示例
var chart = echarts.init(document.getElementById('chart'));
chart.setOption({
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [{
data: [],
type: 'line'
}]
});
var src = new EventSource('/stream');
src.addEventListener('chart_update', function(e) {
var data = JSON.parse(e.data);
chart.setOption({
xAxis: {
data: ['P' + data[0].toFixed(0)]
},
series: [{
name: "P",
data: [data[1].toFixed(2)],
}]
});
});首先创建了一个 echarts 图表实例，然后通过 setOption 方法初始化了一个带 X 轴和 Y 轴的线性图。接着创建一个 EventSource 对象，向服务端的 SSE 接口 /stream 发起请求，并注册了一个 chart_update 事件监听器，一旦服务端接收到了新的数据，就会通过该事件实时推送给客户端。在事件监听器中，将接收到的消息体解析成 JSON 数组并在图表实例中实时更新数据并重新渲染。
总结
SSE 技术是一种轻量且易于实现的前后端通信技术，可以非常方便地实现数据的更新和图表的实时刷新。在实际应用中，可以通过 SSE 接口推送不同类型的事件数据，从而有效的提高网站的实时性和用户体验。本文简单讲解了 SSE 的原理和使用方法，并给出了一个实际的应用场景，希望通过本文的介绍可以让更多的前端开发者更好的使用 SSE 技术，提升应用的实时性和用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65197f2495b1f8cacd1a886a