在现代 web 应用中，实时数据传输是非常重要的。在很多场景下，我们需要实时地从服务器获取数据，例如在线聊天、实时监控、实时推送等。传统的轮询方式虽然可行，但是效率低下，不仅浪费带宽，而且对服务器造成很大的负担。而使用 Server-Sent Events 技术可以实现高效的实时数据传输，同时也能够有效地减轻服务器的负担。
Server-Sent Events 简介
Server-Sent Events 是一种 HTML5 技术，用于在客户端和服务器之间建立单向的持久连接，以实现实时数据传输。与传统的轮询方式不同，Server-Sent Events 可以在服务器端发送数据时自动推送给客户端，从而实现实时数据传输。
Server-Sent Events 采用纯文本格式进行数据传输，数据格式如下：
------ ------ ----- ---- ------ ------ ----- ---- ---
其中，每一行数据以换行符结尾。每条数据可以包含两个字段：事件名称和数据。事件名称是可选的，如果有事件名称，则客户端可以根据事件名称来处理不同类型的数据。数据可以是任意格式的文本数据，例如 JSON、XML 等。
使用 Server-Sent Events 实现实时数据传输
在使用 Server-Sent Events 技术实现实时数据传输时，需要在服务器端和客户端分别实现相应的代码。
服务器端代码
在服务器端，需要使用特定的语言和框架来实现 Server-Sent Events 的功能。下面以 Node.js 和 Express 框架为例，介绍如何实现 Server-Sent Events。
首先，在服务器端创建一个路由处理程序，用于处理客户端的请求：
----- ------- - ------------------- ----- ------ - ----------------- --------------------- ----- ---- -- - -- ----- -- ----------- ------ --- -------------- - -------
然后，在路由处理程序中，使用 res.writeHead() 方法设置响应头，告诉客户端返回的是 Server-Sent Events 数据：
------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ ---
其中，Content-Type 指定返回的数据类型为 text/event-stream，Cache-Control 指定不缓存数据，Connection 指定保持连接。
接着，在路由处理程序中，使用 res.write() 方法发送数据给客户端：
---------------- ------ -------------
其中，data 表示发送的数据，\n\n 表示数据结束符。
最后，在路由处理程序中，使用 setInterval() 方法定时发送数据给客户端：
-------------- -- - ---------------- ------ ------------- -- ------
其中，1000 表示每隔 1 秒发送一次数据。
客户端代码
在客户端，可以使用原生的 JavaScript 或者第三方库来实现 Server-Sent Events 的功能。下面以原生的 JavaScript 为例，介绍如何实现 Server-Sent Events。
首先，在客户端创建一个 EventSource 对象，用于接收服务器端发送的数据：
----- ----------- - --- -----------------------
其中，/events 是服务器端的路由地址。
然后，在 EventSource 对象上注册 message 事件处理程序，用于处理服务器端发送的数据：
--------------------------------------- ------- -- - ------------------------ ---
其中，event.data 表示接收到的数据。
最后，在 EventSource 对象上注册 error 事件处理程序，用于处理连接错误：
------------------------------------- ------- -- - --------------------- ------- ---
其中，event 包含了错误信息。
优化 Server-Sent Events
虽然 Server-Sent Events 技术可以实现高效的实时数据传输，但是在实际应用中，还需要进行一些优化，以提高性能和可靠性。
优化数据大小
在使用 Server-Sent Events 时，应尽量减小数据的大小，以减轻网络传输的负担。可以采用以下方法来优化数据大小：
- 压缩数据：可以使用 gzip 等压缩算法对数据进行压缩，以减小数据大小。
- 精简数据：可以只发送必要的数据，避免发送无用的数据。
- 去重数据：可以去掉重复的数据，避免发送重复的数据。
优化连接管理
在使用 Server-Sent Events 时，应尽量优化连接管理，以提高性能和可靠性。可以采用以下方法来优化连接管理：
- 保持长连接：可以使用长连接来减少连接建立和关闭的开销。
- 心跳机制：可以使用心跳机制来检测连接是否正常，避免连接断开。
- 断线重连：可以实现断线重连机制，当连接断开时自动重新连接。
示例代码
下面是一个完整的 Server-Sent Events 示例代码，使用 Node.js 和 Express 框架实现服务器端，使用原生的 JavaScript 实现客户端。
服务器端代码
----- ------- - -------------------
----- ------ - -----------------
--------------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - -
----- --- ----------------------------
-------- ------- -------
--
---------------- ------------------------------
-- ------
---
-------------- - -------客户端代码
----- ----------- - --- ----------------------- --------------------------------------- ------- -- - ----- ---- - ----------------------- --------------------------- ------------------ --- ------------------------------------- ------- -- - --------------------- ------- ---
总结
使用 Server-Sent Events 技术可以实现高效的实时数据传输，同时也能够有效地减轻服务器的负担。在应用 Server-Sent Events 技术时，需要注意优化数据大小和连接管理，以提高性能和可靠性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/657c1fd0d2f5e1655d6e529c