在 Web 应用程序中，实现实时通信一直是一个挑战。而 Server-sent Events（简称 SSE）就是一种简单且有效的实时推送技术。本文将介绍 SSE 并提供一些示例代码，帮助您了解如何在前端应用程序中使用 SSE。
什么是 Server-sent Events？
Server-sent Events 是一种基于 HTTP 的实时推送技术。它提供了一种双向通信的机制，它可以使服务器实时地将数据推送到客户端。SSE 与 WebSockets 相比有以下几个优点：
- 基于标准的 HTTP 和 HTTPS 协议；
- 支持服务器推送的事件类型；
- 自动重连机制；
- 阻止浏览器默认行为的能力（使用事件
event.preventDefault()）。
SSE 是 HTML5 的一部分，它是一种比 WebSockets 更轻量级的替代方案并且早已被所有主流浏览器支持。
如何使用 Server-sent Events？
基本语法
使用 SSE，首先要使用 EventSource 对象来创建与服务器端的连接：
const source = new EventSource('/stream');其中 /stream 是服务器端的 SSE 端点。
然后，可以监听 source 对象触发的事件：
-- -------------------- ---- ------- ------------- - --------------- - --------------------- -- ---------------- - --------------- - ------------------------ -- -------------- - --------------- - ---------------------- --
source.onopen 事件在连接建立时触发，source.onmessage 事件在服务器端发送消息时触发，source.onerror 事件在连接发生错误时触发。
服务器端实现
服务器端要向客户端推送消息，可以使用以下代码：
-- -------------------- ---- ------- -- -- --- --- ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- -- ------ ----------------- -------------- ---------------- ------------------------------
其中，event: eventType 表示事件类型，data: ${JSON.stringify(data)} 表示事件数据，\n\n 表示消息结束。
取消 SSE 连接
SSE 连接可以通过以下代码取消：
source.close();
自动重连机制
SSE 支持自动重连机制，即客户端在连接丢失时自动重新连接。要启用自动重连机制，请添加以下代码：
-- -------------------- ---- -------
-------------- - --------------- -
-- ----------------- --- ------------------- -
----------------------
- ---- -
----------------------
--------------------- -
----- ------ - --- -----------------------
-- ------
-
--阻止浏览器默认行为
在 SSE 连接建立时，浏览器会自动发出一个 OPTIONS 请求。要阻止此请求，请添加以下代码：
app.options('/stream', function(req, res) {
res.writeHead(200, {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'OPTIONS, GET',
'Access-Control-Allow-Headers': 'Content-Type'
});
res.end();
});示例代码
以下是一个使用 SSE 实现的简单聊天室：
Client:
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ----- -----------
-------
------
--- -------------------
------
------ ---------- ----------- -------------------
-------------------
-------
--------
----- ----- - ---------------------------------
----- -------- - ------------------------------------
----- ------ - --- -----------------------
---------------- - --------------- -
----- ------- - -----------------------
----- -- - -----------------------------
-------------- - --------------------- --------------------
-------------------------
--
--------------------------------------------------------- ----------- -
-------------------
----- -------- - ------------------- -- ----------
----- ------- - ------------
-------------- -
------- -------
-------- -
--------------- ------------------
--
----- ------------------------- ---------
--
------------------------ -
----------- - ---
--
---------------------- -
---------------------
---
---
---------
-------
-------Server:
-- -------------------- ---- -------
----- ------- - -------------------
----- ---------- - -----------------------
----- --- - ----------
---------------------------
----- -------- - ---
-- --- --
------------------ ------------- ---- -
-- -- --- ---
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------------- -
-- ---------------- - -- -
----- ------- - -----------------
----------------- ------------
---------------- ---------------------------------
-
-- ------
---
-- ---
----------------- ------------- ---- -
----- ---------- -------- - ---------
------------------------ ----------
----------------------
---
---------------------- ------------- ---- -
------------------ -
------------------------------ ----
------------------------------- --------- -----
------------------------------- --------------
---
----------
---
---------------- ---------- -
------------------- --------- -- ---- -------
---在以上代码中，客户端向服务器发送聊天消息，服务器将消息存储到数组中，然后发送事件消息到客户端。客户端接收到消息后将消息显示在聊天室中。
总结
Server-sent Events 是一种简单有效的实现实时推送的技术，它支持自动重连机制和阻止浏览器默认行为的能力，适用于实现简单的实时通信场景。在实际的应用场景中，您可以根据需求使用 SSE 或 WebSockets 等其他实时通信技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f63c0980a9b385b8e8edc