引言
在 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，其基本实现如下：
-- -------------------- ---- ------- ----- ---- - --------------- -------------------------- ----- ---- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ -- ----------------- --------- -------------------- -- - ----- ---- - ---------------- -------- ------- ---- - - ---- ---------------------------- -- ---------------- - - ---- - ------- -- ----- --------------- ------------展开代码
Python 服务器端
在 Python 服务器端中，我们也可以很容易的使用 SSE，其基本实现如下：
-- -------------------- ---- ------- ------ ---- ------ -------- ---- ----- ------ ------ -------- --- - --------------- --------------------- --- --------- --- ----------- ----- ----- ----- ------ --------------------------------------- ------------- ------ -------------------- -----------------------------展开代码
客户端代码实现
在客户端中我们使用 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
