Server-sent Events (SSE)，即服务端推送事件，是一种 HTML5 技术，在客户端与服务器之间建立长时间的连接，实现服务器推送数据到客户端。SSE 技术对于实时性要求较高的 Web 应用程序具有重要意义，如聊天室，股票报价，天气预报等。本文将介绍如何使用 SSE 技术实现定时推送数据。
SSE 工作原理
SSE 技术基于常规 HTTP 协议，使用单向的、持久的连接，由客户端向服务器发出请求，服务器收到请求后保持连接，将数据发送给客户端。客户端接收到推送数据时，SSE API 会触发一个事件，开发人员可以在事件处理程序内部对推送数据进行处理。
SSE 自带心跳机制，连接中断或断开时会自动重连或清理资源。SSE 技术还支持自定义事件类型、重试时间等参数，开发人员可以根据实际需求进行配置。
SSE 基本应用
在客户端，我们可以使用 JavaScript 中的 EventSource 对象来向服务器发出 SSE 请求，如下所示：
----- ----------- - --- -----------------
--------------------- - --------------- -
------------------------
--
------------------- - --------------- -
---------------------
--其中，url 是服务器端推送数据的地址。eventSource 对象有两个事件处理程序，onmessage 处理服务器推送数据的信息，onerror 处理错误事件。以上代码只是简单的定义了 SSE 连接，还需要在服务器端为其提供数据推送接口。
在服务器端，需要将推送数据封装成 SSE 格式，并使用 HTTP 头部设置 Content-Type 为 text/event-stream，如下所示：
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
------------ ------------
----- ----- - -------------- -- -
----- ---- - ------ - - ----------------
-- -----
-- - -------
----------------
-- ------
--------------- -- -- -
---------------------
---其中，res 是服务器响应对象，json 是待推送的数据。SSE 格式以 data 字段开头，数据类型为 json 格式。在发送推送数据之前，需要向客户端发送 ': start\n\n'，以表明服务端已经成功建立连接。
定时推送数据
如果需要定时推送数据，可以在服务器端使用 setInterval 函数来实现。在每个时间间隔内，向客户端发送一次推送数据。
下面是一个例子，在服务端每隔1秒钟推送一次随机数到客户端：
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
------------ ------------
----- ----- - -------------- -- -
----- ---- - ------ - - ----------------
---- -------------
-- - -------
----------------
-- ------
--------------- -- -- -
---------------------
---在客户端，会接收到不断推送的数据，可以在 SSE 事件处理程序内部对数据进行处理。
----- ----------- - --- -----------------
--------------------- - --------------- -
----- ---- - -----------------------
----------------------
--
------------------- - --------------- -
---------------------
--总结
本文介绍了如何使用 SSE 技术实现定时推送数据，通过 SSE 技术，可以方便实现实时数据推送。需要注意的是，在使用 SSE 技术时，需要保证服务器端支持 SSE 技术，以及客户端浏览器支持 SSE 技术。另外，由于 SSE 技术是基于 HTTP 协议，缺陷显然，需要根据实际情况综合考虑。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6519091d95b1f8cacd1479b9