在前端开发中，我们常常需要实时监测用户的访问日志，以便及时发现并解决可能的问题。在此过程中，Server-sent Events（以下简称SSE）成为了一种很好的选择，可以实现简洁高效的实时数据传输。
SSE 的基本概念
SSE 是一种基于 HTTP 协议的服务器推送技术。相比于 WebSocket，SSE 可以更好地处理单向、服务器向客户端的数据传输场景，特别适合实现订阅式的实时数据推送。通过 SSE，服务器可以向客户端发送实时的事件流，而客户端可以监听这个事件流并根据需要进行相应的处理。
SSE 的基本工作原理如下：
- 客户端通过一个普通的 HTTP 请求向服务器请求一个 SSE 链接，链接中包含需要监听的事件类型和相关参数，如下所示：
const eventSource = new EventSource("http://example.com/events?id=123&events=log");- 服务器接收到请求后，返回一个 SSE 流，以指定的 event type （在上例中是 "log"）为事件类型，不断向客户端发送事件消息。
res.writeHead(200, {
"Content-Type": "text/event-stream",
"Cache-Control": "no-cache",
"Connection": "keep-alive"
});
res.write("retry: 10000\n"); //设置重试时间
res.write("event: log\n"); //设置事件类型
res.write("data: " + logData + "\n\n"); //发送事件消息- 客户端可以通过事件监听，捕获到这些SSE消息数据并进行相应的处理：
eventSource.addEventListener('log', function(event) {
console.log('received log: ' + event.data);
}, false);实现访问日志的实时记录
在实际开发中，我们可以通过 SSE 实现实时记录用户的访问日志，从而及时发现可能的异常和问题。
下面是一个基于 Node.js 和 SSE 实现的简单示例代码：
服务端代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
----- --- - ---------------
----- ----------- - -----------------------
----- ---- - ------------------------- -- --------
----- ------- - ------------------------------------ ------- ------
-------------------------- ----- ---- -
----- ------ - ------------------ ------
------ ----------------- -
---- ----
------------------ ---------------- --------------
--- ---- - ------------------------------- --------
--------------
------
---- -------
----- ------ - --------------------------------
----- -------- - ---------- --- ------ - -------- - -------
----- ------- - -------------------- ---------------- ----- -----------
--------------------- - ------
------------------ ---------------- ---------------------
----------------------------- -- -------- -------------
------
---- -------
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----------------- ----------
----------------- --------
---------------- - - -------------------- ---------------- ----- ---- - --------
----- -------- - -------------------- -- -
----- ------- - -------------------- ---- ----- -----
---------------- - - ------- - --------
-- ------
----------------------------------- -------- -- -
------------------------
-- -------
------
--------
------------------ ---------------- ---------------
------------ --------
------
-
----------------
------------------- ------- -- ----------------------------客户端代码：
const eventSource = new EventSource("http://127.0.0.1:3000/sse");
eventSource.addEventListener('log', function(event) {
const logData = JSON.parse(event.data);
console.log(`received log[${logData.url}]: ${logData.data}`);
}, false);在这个示例中，我们针对请求路径为 "/api" 的 POST 请求进行了访问日志记录，并将日志数据以 JSON 格式写入文件 "./access.log" 中。同时，我们开启一个不断往客户端发送 SSE 消息的定时器，并在客户端监听事件类型为 "log" 的 SSE 消息，实现了实时记录访问日志的功能。具体实现过程中，我们可以根据实际需求对SSE的参数进行修改，比如设置retry的时间（防止断开连接），设置contentType，进行gzip压缩等优化。
总结
通过本文，我们了解了 Server-sent Events 的基本概念和工作原理，并学习了如何使用 SSE 实现实时记录访问日志的功能。SSE 作为一种高效简洁的单向服务器推送技术，在实现实时数据传输的场景中具有很大的优势，可以为我们在前端开发中提供更多的选择和方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6476ed30968c7c53b03860bd