什么是 SSE？
SSE（Server-Sent Events）是一种基于 HTTP 的单向通信协议，允许服务器向客户端推送数据。传统的 HTTP 响应是基于请求和响应的，客户端发送请求，服务器返回响应，而 SSE 允许服务器在任何时候向客户端发送数据，而客户端不需要不停地发送请求，可以减少网络负载和延迟。
为什么要使用 SSE？
在一些场景下，服务器需要实时向客户端推送数据，例如实时数据更新、聊天程序等。SSE 提供了一种简单、可靠的方式来实现实时数据传输，而不需要使用 WebSocket 或其他更复杂的技术。
另外，SSE 与标准的 HTTP 响应相比，具有更好的兼容性和可用性。它不需要任何特殊的库和插件，而且能够在所有现代浏览器和设备中使用。
如何使用 SSE？
基本使用方法
SSE 是基于 EventSource 接口来实现的。在客户端，我们可以通过创建一个 EventSource 对象来与服务器建立连接，并监听 server-sent 事件。服务器端需要发送一个包含“Content-Type: text/event-stream”头部的响应，并以“data:”开头的行来发送数据。
下面是一个简单的 SSE 消息推送示例，服务端使用 Node.js：
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- -------------------- -- -- --- --
---------------- ----------- -- --------- --- -
---
-------------- -- -
----- ---- - --- ----------------------------
---------------- -------------- -- ----
-- ------
----------------在客户端，我们可以通过以下方式接收 SSE 数据：
----- ------ - --- -------------------- ---------------------------------- - -- - -------------------- ---
客户端将会每秒钟收到一个类似“data: 14:23:46\n\n”的字符串，表示当前时间。
事件类型和数据格式
在服务端发送的 SSE 数据中，可以使用以下事件类型和数据格式：
data：一条普通的消息，以“data:”开头。例如：
---------------- ---- -- - --------------
event：指定一个事件名称。例如：
----------------- -------------- ---- -----------
id：为消息指定一个 ID。例如：
-------------- ---------- ---- -----------
客户端可以通过 EventSource 对象的 lastEventId 属性获取以前接收到的最后一个 ID。服务器端可以使用“Last-Event-ID”头部指定起始 ID。
retry：在连接中断后，客户端自动重连的时间间隔。例如：
----------------- ------------
服务端发送多个事件
服务端可以在一个响应中发送多个事件，只需要在每条消息之间加入一个空行即可。例如：
----------------- ----------------- ---- ----------- ----------------- ------------------ ---- -----------
在客户端，我们可以使用 addEventListener 来监听不同的事件类型：
------------------------------------- - -- - --------------------- ------------- -------- --- -------------------------------------- - -- - --------------------- -------------- -------- ---
可以使用哪些浏览器？
SSE 是一个规范化的技术，所有标准符合规范的浏览器和设备都可以支持。以下是一些常见的支持 SSE 的浏览器和版本：
- Chrome 6+
- Firefox 6+
- Safari 5+
- Opera 11.6+
- Edge 12+
总结
SSE 提供了一种简单、可靠的方式来实现实时数据传输，无需使用 WebSocket 等更复杂的技术。在本文中，我们学习了 SSE 的工作原理、基本用法和常见的数据格式。通过实现一个简单的 SSE 消息推送示例，我们可以更好地理解 SSE 在现代 Web 应用程序中的用途。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/646350e4968c7c53b0455aa6