在前端开发中，通常我们会使用 Ajax 技术来与服务器交换数据。但是 Ajax 有一个很明显的缺点：它是基于轮询的，这意味着我们需要不断地向服务器发送请求来获取更新的数据。这样做的问题是，它会不断地创建新的 HTTP 连接，增加服务器和客户端的负担，增加带宽消耗，并且无法实时推送数据。
为了解决这个问题，HTML5 提出了一个新的特性：Server-Sent Events（SSE）。SSE 可以让服务器主动向客户端推送数据，而无需客户端发送请求。SSE 的实现方式是通过一个长期保持连接的 HTTP 连接，该连接保持打开状态，直到服务器通过该连接推送数据或者连接超时。
SSE 的应用
SSE 可以应用于一些需要实时推送数据的场景，例如：
- 股票行情实时推送
- 天气预报信息实时更新
- 实时聊天室
- 游戏实时推送数据
SSE 的优点
- 实时性：SSE 可以做到服务器主动推送数据，实时性比 Ajax 更高。
- 高效性：SSE 通过一个长期保持连接的 HTTP 连接来推送数据，减少了 HTTP 请求的开销，减少了带宽消耗。
- 兼容性：SSE 在 HTML5 中成为了标准，几乎所有现代浏览器都支持该特性。
- 容错性：SSE 有自动重连机制，如果连接断开，客户端可以自动重新连接。
SSE 的基本用法
SSE 的基本用法和普通的 Ajax 请求非常相似，但是 SSE 是通过 EventSource 对象来处理的。
在客户端，我们可以使用如下代码创建一个 EventSource 对象：
const evtSource = new EventSource('/sse');
其中，/sse 是 SSE 服务端的地址。客户端创建 EventSource 对象时，就会自动与服务器建立长期保持连接的 HTTP 连接。
在服务器端，我们需要创建一个 HTTP 接口来向客户端推送数据。推送数据的方式是通过将数据发送到客户端保持连接的 HTTP 连接。
为了向客户端推送数据，我们可以使用如下代码：
res.write('data: hello\n\n');
其中，data 表示推送数据的类型，hello 是要推送的数据。重要的是，每一个推送数据的事件都以 \n\n 结束，表示已经结束了。
完整的示例代码如下：
-- -------------------- ---- ------- ----- ---- - ---------------- ----------------------- ---- -- - -- -------- --- ------- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- ----------------- ---------- -------------- -- - ----- ---- - ------ - - --- --------------------------- - ------- ---------------- -- ------ - ---- - ------------------ - --------------- ------------ --- --------------- ----------- - ---------------- ------------------- ------- -- ------------------------展开代码
在浏览器中打开 http://localhost:3000，可以看到我们实时地在客户端界面中显示当前的时间。
SSE 在粘性会话中的应用
Web 应用中的「粘性会话」是指用户在 Web 上保持登录状态，并且他/她的状态能够在页面之间共享的一种机制。在粘性会话中，用户的数据通常保存在服务器的会话中。SSE 可以很好地应用于粘性会话中。例如，我们可以使用 SSE 在用户登录后显示一个实时的「欢迎回来」信息。
客户端代码如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- --------------- -------- ----- --------- - --- ------------------------ ------------------------------------- --------------- - ----- ---- - ----------- -------------------------------------------- - ----- --- --------- ------- ------ ---- ------------------- ------- -------展开代码
服务器端代码如下：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------- - --------------------------- ----- ------- - ------------------- ----- --- - ---------- ----- ------------- - --------- ------- ---------------- ------- ------ ------------------ ----- --- ----------------------- ----------------- ----- ---- -- - ----- ---- - --------------- ---------------- - ----- --------------- --- ------------------- ----- ---- -- - -- ------------ -- ----------------- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- -------------- -- - ----- ---- - -------- ----- ---------------------- ---------------- -------------- -- ------ - ---- - ------------- --- --- ------ ------ - --- ----- ------ - ----------------------- ------------------- -- -- - ------------------- ------- -- ------------------------ ---展开代码
当用户登录后，我们设置了一个会话，将用户的信息存储在服务器上。当用户访问 /welcome 时，首先检查该用户是否已经登录，并且在保持连接的 HTTP 连接上推送实时的消息。
总结
Server-Sent Events 是一种非常有用的技术，它可以让服务器主动推送实时数据给客户端。该技术比 Ajax 更为高效和实时，非常适用于大型数据的实时通讯和展示。SSE 在粘性会话中的应用也非常广泛，可以帮助我们实现简单而又实用的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64df44e2f6b2d6eab3a78dc9
