背景
在前端开发中，我们经常会遇到实时消息传输的问题。特别是在聊天室或者实时数据监控等场景下，消息实时性是非常重要的。通常来说，我们可以通过 WebSocket 或者轮询等方式来实现消息传输。但如果是非即时聊天，实时性并不是特别重要，却需要减轻服务器压力，该怎么办呢？这时候 Server-Sent Events 就是一个不错的选择。
Server-Sent Events
Server-Sent Events 是一个 HTML5 的特性，它允许我们从服务器获取推送事件。相比 WebSocket，它更简单，并且可以通过 User-Agent 的缓存机制来降低服务器压力。
Server-Sent Events 的特点如下：
- 服务器可以不断发送数据给客户端，客户端可以实时接收。
- 支持断线重连。
- 支持 HTTP 缓存机制。
- 传输的数据格式为文本格式。
Server-Sent Events 的数据传输方式类似于 HTTP，但协议规范不同。客户端通过创建一个 EventSource 对象来连接服务器，然后通过监听 message 事件来实时接收数据。
实现
要使用 Server-Sent Events，我们需要做以下几个步骤：
1. 创建一个 EventSource 对象
var eventSource = new EventSource('/api/messages');通过上述代码，我们创建了一个 EventSource 对象，并指定了服务器的消息推送接口。
2. 监听服务器发送的数据
eventSource.onmessage = function(event) {
console.log(event.data);
};通过上述代码，我们可以在控制台打印出来服务器发送的数据。
3. 发送数据
res.write('data: ' + JSON.stringify({ name: 'Tom', message: 'Hello!' }) + '\n\n');通过上述代码，我们可以在服务器端发送数据给客户端。
4. 关闭连接
eventSource.close();
通过上述代码，我们可以关闭 EventSource 连接。
案例
我们来看一个使用 Server-Sent Events 实现非即时聊天消息传输的案例。
客户端
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------
-------
------
--- -------------------
------
------ --------- -------------------
------ ------------ ----------------------
---------------------
-------
--------
--- ----------- - --- -----------------------------
--------------------- - --------------- -
--- ---- - -----------------------
--- -------- - ------------------------------------
--- ---- - -----------------------------
---------------- - --------- - -- - - -------------
---------------------------
--
-------------------------- - ---------- -
--- ---- - --------------------------------------
--- ------- - -----------------------------------------
--- --- - --- -----------------
---------------- -----------------
------------------------------------ --------------------
------------------------- ----- ----- -------- ------- ----
------ ------
--
---------
-------
-------服务器端
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
------------------------------- ---- -
-- -------- --- ---- -
------------------ - --------------- ----------- ---
--------------------------------- - ----------------
- ---- -- -------- --- ---------------- -
-- ----------- --- ------ -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------------- -
---------------- - - ---------------- ----- ------ -------- -------- -- - --------
-- ------
- ---- -- ----------- --- ------- -
--- ---- - ---
-------------- ----- -- -
---- -- -----------------
---
------------- -- -- -
--------------
------------------
---
-
-
----------------通过上述代码，我们创建了一个简单的聊天室，服务器每 5 秒向客户端发送一条消息，同时客户端可以通过页面向服务器发送消息，从而实现非即时聊天消息传输。
总结
通过本文，我们了解了如何使用 Server-Sent Events 解决非即时聊天消息的延迟问题。相比 WebSocket，Server-Sent Events 更简单，并且可以通过 User-Agent 的缓存机制来降低服务器压力，对处理大量非即时消息数据流的场景非常适用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b05a55add4f0e0ff9b5c70