在现代 Web 应用程序中，实时通信越来越受到关注。为了满足这种需求，出现了一种简单而强大的服务器推送技术——Server-Sent Events（SSE）。SSE 是 HTML5 规范中的一项标准化技术，它允许 Web 服务器通过 HTTP 协议向客户端推送数据，而客户端也可以通过 SSE API 监听服务器的事件流。
SSE 原理
通过 HTTP 协议向客户端推送数据主要有两种方式，一种是短轮询，另一种是长轮询。
短轮询是指客户端定时向服务器发送请求，周期性地查询是否有新数据需要更新。这种方式不仅浪费带宽，而且实时性较差。
长轮询则是客户端发起一次长时间请求，服务器在有新数据更新时才会返回响应，保持连接状态，直到客户端收到数据或连接超时。这种方式虽然解决了短轮询的问题，但是也存在一些缺点，比如服务器需要处理大量的连接，容易造成资源浪费。
相比之下，SSE 就显得更加合理和高效。它采用了一种流式传输的方式，即服务器向客户端一次性发送一组数据，并一段时间内保持连接状态。客户端通过 EventSource API 监听服务器的事件流，当有新数据到达时，就会触发回调函数处理数据。
SSE API
SSE API 只有一个构造函数 EventSource()，用于创建 SSE 对象。
----- ----------- - --- --------------------
参数为服务器的 SSE 接口地址，即 SSE 服务需要监听的服务器 URL。通过监听 eventSource 对象的 onmessage 事件，可以获得服务器推送的数据。
--------------------- - -------- ------- - ------------------------ --
在服务器端，需要设置 Content-Type 为 text/event-stream，并使用 SSE 事件格式向客户端推送数据。
----- ---- - ------- ------ ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- ---------------- - - ---- - --------
SSE 应用
SSE 可以应用于许多场景，比如在线聊天室、股票行情、体育比赛直播等。
下面是一个示例：通过 SSE 实现在线聊天室。客户端发送消息后，服务器将消息转发给所有在线用户。
客户端 HTML
--------- -----
------
------
----------- ------------
----- ----------------
-------
--------- -
------- ------
----------- -------
-
--------
-------
------
---- --------------------
------
------ ------------ ------------
------- ---------------------------
-------
--------
----- -------- - ------------------------------------
----- ------------ - -----------------------------------
----- ----------- - --- ---------------------
--------------------- - -------- ------- -
----- ---- - -----------------------
------------------ -- ----- - --------- - -- - - --------- - -------
--
--------------------------------------------------------- -------- ------- -
-----------------------
----- ---- - --------------------------
-- ------------- -
----- --- - --- -----------------
---------------- ---------
------------------------------------ ----------------------------------
------------------------- ---- ----
------------------ - ---
-
---
---------
-------
-------服务器端代码
----- ---- - ----------------
----- --- - ---------------
----- ----------- - -----------------------
--- -------- - ---
----- ------ - -------------------------- ----- ---- -
----- - -------- - - -------------------
-- --------- --- -------- -
-- ----------- --- ------- -
--- ---- - ---
-------------- ----- -- -
---- -- -----------------
---
------------- -- -- -
----- - ---- - -- - - ------------------------
--------------- ----- -------- ---- ---
-------------------
--------------
---
- ---- -- ----------- --- ------ -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------- - - --------------------------- - --------
-------------------- -- -
-- ----------------- -
---------------- - - ------------------------------ - --------
-
-- ------
-
- ---- -
-------------------
----------
-
---
------------------- -------- -- -
------------------- -- --------- -- ---- --------
---这段代码创建了一个 HTTP 服务器，监听客户端的两种请求：
- POST /chat：客户端提交聊天消息。
- GET /chat：客户端监听服务器的 SSE 事件流。
服务器维护了一个消息队列 messages，每当用户提交聊天消息时，就将消息放入队列。GET 请求时，通过 SSE 返回消息队列中的最新消息，并且每秒钟检查一次队列，如果有新消息，就将它们逐个发送给客户端。
总结
SSE 是一种使用方便、效率高的 Web 实时通信技术，可以用于实现聊天室、实时数据更新、在线游戏等应用场景。相比 WebSocket，它更简洁、更易于部署。
在使用 SSE 时，需要注意：
- SSE API 目前只能在 Chrome、Firefox 和 Safari 等浏览器中使用，对于 Internet Explorer 等浏览器暂不支持。
- 在推送事件时，需要注意格式和缓存设置，否则会影响客户端的效果和性能。
- SSE 适用于短时间、低频率的通信，如果需要进行长时间、高频率的通信，建议使用 WebSocket 或其他更高效的技术。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/649a8d7f48841e9894775d71