SSE 是指通过 HTTP 协议，从服务端向客户端实时推送数据，同时也支持跨域访问。SSE 功能类似于 WebSocket，但是相比 WebSocket 更加简单和轻量。这篇文章将会详细介绍 SSE 的相关知识。
什么是 SSE
SSE 是 HTML5 中提供的一种技术，用于在客户端和服务器之间实现单向实时通信。当客户端与服务器建立 SSE 连接后，客户端可以自动接收来自服务器的事件流，这些事件包括文本消息、JSON 对象等等。
与其他实时通信技术相比，SSE 最大的优势是它使用简单。SSE 基于 HTTP，只需要使用普通的 AJAX 请求即可建立连接，这使得它可以轻松地添加到已有的应用程序中。
SSE 的特点
相对于其他实时通信技术，SSE 有以下特点：
- 支持跨域请求
- 只需要通过 AJAX 请求建立一次连接
- 数据传输压力小，占用带宽小
SSE 的工作原理
使用 SSE 的过程大致如下：
- 客户端通过 AJAX 发送一个 HTTP GET 请求到服务端
- 服务端做出响应，建立连接
- 服务端持续向客户端发送数据
- 客户端通过 JavaScript 接收数据
在建立 SSE 连接后，服务器可以将数据通过 HTTP 的事件流（event stream）形式发送给客户端。事件流是一个持续不断的数据流，以“data: ”开头，并以双换行符作为结尾。例如：
data: This is a message
当客户端接收到事件流消息时，会触发一个 message 事件。我们可以在 JavaScript 中监听这个事件，从而对接收的数据进行处理。
下面是一个 SSE 在客户端和服务端的实现示例：
服务端代码：
// javascriptcn.com 代码示例
from flask import Flask, Response
app = Flask(__name__)
@app.route('/stream')
def stream():
def event_stream():
for i in range(10):
yield 'data: Message {}\n\n'.format(i)
time.sleep(1)
return Response(event_stream(), mimetype="text/event-stream")客户端代码：
const eventSource = new EventSource('/stream');
eventSource.onmessage = function(event) {
console.log(event.data);
}这个示例演示了如何在 Flask 中建立 SSE 连接。当客户端访问 /stream 时，服务端会开始向客户端发送数据，每个两秒发送一条消息。然后，客户端会在控制台中打印出每个消息。
SSE 的应用场景
SSE 可以被应用于需要实时更新数据的情景，比如：
- 聊天室
- 实时通知
- 在线游戏
同时，由于 SSE 本身是轻量级的，因此对于对服务器负载提出较高要求的应用来说，SSE 可以是一个很好的解决方案。
总结
SSE 的特点是和工作原理使得它成为一个简单、快速和高效的技术，可以实现跨域单向通信。这一技术已经成为客户端和服务端之间实时通信的趋势，并且获得了广泛的应用。在您的下一个项目中尝试使用 SSE，看看它是否能够传递您需要的事件流数据。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6540614d7d4982a6eb9dcf63