Server-Sent Events 技术介绍与实际运用-JavaScript中文网-JavaScript教程资源分享门户

引言

在 Web 开发中，前端和后端的通信一直是一个非常重要的话题。目前，我们经常使用的有 Ajax 和 WebSocket 技术来实现前后端通信。但是，除了 Ajax 和 WebSocket，还有一种技术可以实现前后端通信：Server-Sent Events（简称 SSE）。本文将对 SSE 技术进行详细介绍与实际运用，以及进一步探究其学习以及指导意义。

什么是 Server-Sent Events

SSE 基本概念

Server-Sent Events（SSE）是一种轻量级的客户端-服务器通信技术，它让服务器能够将实时数据推送到客户端。SSE 是一种单向通信协议，只有服务器能够向客户端发送消息，而客户端则不能向服务器发送消息。SSE 采用了 HTTP 协议，因此 SSE 的优势是：

使用 HTTP 协议，能够利用持久连接节省网络带宽。
不存在握手所带来的额外开销，轻量级的 SSE 标准不依赖于大型的应用和浏览器库。
SSE 不需要额外增加服务器或者客户端的线程或进程， SSE 中的信息获取是异步的，也就是基于事件处理的，能够保证服务器的性能。

SSE 标准

SSE 标准是由 W3C 定义的，其基本格式如下：

event: <event name>
id: <message id>
data: <message data>

event: SSE 事件类型，即自定义的事件名称。
id: 消息序列号，如果需要重新连接，客户端会将最后一个 id 发送到服务器; 服务器端则通过将 id 注入到 SSE 流中来再次发送新的事件流。
data: SSE 消息体，数据可以以纯文本或 JSON 格式发送到客户端。

在 SSE 技术中，实时数据是通过打开一个 HTTP 长轮询连接而实现的。在这个连接上，服务器向客户端发送数据流，并保持连接的打开状态。一旦用户与后端建立了 SSE 连接，浏览器会等待服务器端的响应，在服务器端推送实时数据时，它们将立即从服务器推送到客户端。

实际运用

服务器端代码实现

Node.js 服务器端

在 Node.js 服务器端中，我们可以很容易的使用 SSE，其基本实现如下：

// www.javascriptcn.com code example
const http = require('http')
http.createServer(function (req, res) {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  })

  res.write('retry: 10000\n')

  setInterval(function () {
    const data = JSON.stringify({ message: 'server time ' + (new Date().toLocaleTimeString()) })
    res.write('data: ' + data + '\n\n')
  }, 1000)

}).listen(1337, '127.0.0.1')

Python 服务器端

在 Python 服务器端中，我们也可以很容易的使用 SSE，其基本实现如下：

// www.javascriptcn.com code example
import time
import datetime
from flask import Flask, Response
app = Flask(__name__)

@app.route('/stream')
def stream():
    def generate():
        while True:
            yield 'data: {}\n\n'.format(datetime.datetime.now())
            time.sleep(1)

    return Response(generate(), mimetype='text/event-stream')

客户端代码实现

在客户端中我们使用 JavaScript 来实现 SSE 的请求，其基本实现如下：

const eventSource = new EventSource('/stream')
eventSource.onmessage = function(e) {
  console.log(e.data)
}

进一步探究

SSE 与 WebSocket 的区别

SSE 和 WebSocket 都是用于实现客户端和服务器端实时通信的技术，它们之间的区别是：

WebSocket 已经成为 Web 标准，而 SSE 仅是被 W3C 提出的建议。
SSE 是只读的，服务器主动向客户端发送消息，而 WebSocket 是双向通信，客户端和服务器端都可以向对方发送消息。
SSE 基于 HTTP 协议，只需要使用一个长连接，并且能够利用持久连接节省网络带宽；WebSocket 也是基于 HTTP 协议，但是需要进行前后端的握手，连接建立后连接会一直保持打开状态。

SSE 与 WebSocket 的使用场景不同，SSE 适用于单向通信，只读场景下；WebSocket 适用于双向通信，双向通信场景下。

SSE 学习以及指导意义

SSE 技术是一种非常有用的技术，在实际项目中很有实用价值。通过 SSE 技术，可以快速实现从服务器端推送实时数据到客户端这一需求。SSE 技术使我们的应用更加优化、实用和可行性更强，能够推动我们更快地实现业务和应用的开发和上线。

总之，SSE 技术是当前 Web 开发中最为优秀的一种技术，我们应该更多的去学习、运用它。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cfe09de46428fe9ec1a845

Server-Sent Events 技术介绍与实际运用

引言