什么是 Server-sent Events？
Server-sent Events（SSE）是一种 Web 技术，它允许 Web 服务器向客户端推送事件，而无需客户端发起请求。SSE 基于 HTTP 协议，使用长轮询或 HTTP 流技术来实现服务器向客户端的推送。SSE 可以用于实现实时通信、实时数据更新、通知和提醒等功能。
SSE 的优点
相比于传统的 Ajax 轮询或 WebSocket 技术，SSE 有以下优点：
- SSE 使用 HTTP 协议，可以通过标准的 HTTP 端口（80 或 443）传输，不需要额外的端口。
- SSE 可以在浏览器和服务器之间建立单向连接，只需要客户端发起一次请求，服务器就可以一直向客户端推送数据，节省了网络带宽和服务器资源。
- SSE 支持自定义事件类型和数据格式，可以灵活地传递数据。
- SSE 支持自动重连和断线重连，可以保持长时间的连接。
SSE 的实际例子
实时股票行情
假设我们有一个股票行情网站，需要实时推送最新的股票价格给用户。使用 SSE 技术可以轻松实现这个功能。
服务端代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- -------------------- -- ------ -----------------
---------------- ----------- -- ----
---
-------------- -- -
----- ----- - ------------- - -- - --- -- ------
----- ---- - ------ ---------- ------- -------- -------------------------- -- ------ ---- ---
---------------- -- --------
-- ------
---
------------------- -- -- -
------------------- ------- -- ---- -------
---客户端代码：
const eventSource = new EventSource('/stocks');
eventSource.onmessage = (event) => {
const data = JSON.parse(event.data); // 解析 JSON 字符串为 JavaScript 对象
console.log(`${data.symbol}: ${data.price}`);
};实时聊天室
假设我们有一个在线聊天室，需要实时推送用户的聊天消息给其他用户。使用 SSE 技术可以轻松实现这个功能。
服务端代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ---- -
--------------------------- ----- ----- -- -
------------------ - --------------- ----------- ---
--------------
---
- ---- -- -------- --- -------- -
------------------ -
--------------- -------------------- -- ------ -----------------
---------------- ----------- -- ----
---
-- -------
-------------- ------- -- -
----- ------- - -----------------
----- ---- - ------ ---------------- -- ---------
---------------- -- --------
---
- ---- -
-------------------
----------
-
---
------------------- -- -- -
------------------- ------- -- ---- -------
---客户端代码：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----------- ------------
-------
------
-------- ---------
--------- ------------- --------- ---------------------
------ ----------- --------------- --
------- ----------------------------
--------
----- ------- - ------------------------------------
----- --------- - --------------------------------------
----- -------- - -------------------------------------
----- ----------- - --- ---------------------
--------------------- - ------- -- -
----- ------- - -----------
------------- -- ------- - -----
--
---------------- - -- -- -
----- ------- - ----------------
----- --- - --- -----------------
---------------- ---------
------------------
--------------- - ---
--
---------
-------
-------总结
SSE 技术可以帮助我们实现实时通信、实时数据更新、通知和提醒等功能。相比于传统的 Ajax 轮询或 WebSocket 技术，SSE 具有更低的网络带宽和服务器资源消耗，更容易实现自动重连和断线重连等功能。在实际开发中，我们可以根据需求选择不同的技术来实现最佳的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6628cffac9431a720c602d88