在前端开发中，我们经常需要将服务器端产生的日志信息展示在浏览器端，以方便开发人员进行调试和排查问题。而传统的方式是通过 AJAX 定时拉取日志文件，这种方式效率低下，而且对服务器资源的消耗也比较大。
Server-sent Events（简称 SSE）是一种新的技术，它可以让服务器端主动向浏览器端推送消息，从而实现实时更新日志信息的效果。本文将介绍 SSE 的基本原理、使用方法和注意事项，并提供示例代码，帮助读者快速上手。
SSE 的基本原理
SSE 是一种基于 HTTP 协议的技术，它利用了 HTTP 协议中的长连接（long-polling）机制，实现了服务器端向客户端持续发送消息的功能。具体实现方式是，浏览器端通过 EventSource 对象向服务器端发送一个 HTTP 请求，服务器端在收到请求后保持连接不断开，然后在有新消息时向客户端发送消息，直到连接被客户端主动关闭为止。
SSE 的消息格式是纯文本，每条消息由一个字段和一个值组成，字段和值之间用冒号分隔，字段和字段之间用换行符分隔。例如，下面是一条 SSE 消息的格式：
data: This is a test message
SSE 的使用方法
在浏览器端使用 SSE，需要创建一个 EventSource 对象，并指定服务器端的 URL。例如，下面的代码创建了一个 EventSource 对象，并将服务器端的 URL 设置为 /logs：
var source = new EventSource('/logs');在服务器端，需要处理客户端发送的 SSE 请求，并保持连接不断开。同时，在有新消息时，需要向客户端发送 SSE 消息。下面是一个使用 Node.js 实现 SSE 的示例代码：
-- -------------------- ---- -------
--- ---- - ----------------
------------------------------- ---- -
-- -------- --- -------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
--- ----- - ---------------------- -
---------------- ---- -- - ---- --------------
-- ------
-------------------------- ---------- -
---------------------
---
-
----------------在上面的代码中，我们首先判断客户端发送的 URL 是否为 /logs，如果是，则设置响应头，告诉客户端返回的是 SSE 消息，并保持连接不断开。然后，我们使用 setInterval 函数每秒钟向客户端发送一条 SSE 消息。最后，在客户端关闭连接时，我们清除定时器，释放资源。
SSE 的注意事项
在使用 SSE 时，需要注意以下几点：
- SSE 只能使用 HTTP 协议，不能使用 HTTPS 协议。
- SSE 的消息格式必须是纯文本，不能是二进制数据。
- SSE 的消息发送是单向的，即服务器端向客户端发送消息，客户端不能向服务器端发送消息。
- SSE 的连接不支持跨域访问，即服务器端和客户端必须在同一个域名下。
- SSE 的连接不支持断点续传，即客户端不能在中途关闭连接后恢复连接。
总结
Server-sent Events 是一种实现浏览器端实时更新日志信息的技术，它利用了 HTTP 协议的长连接机制，可以让服务器端向客户端持续发送消息。使用 SSE 可以提高日志信息的实时性，减少服务器资源的消耗。在使用 SSE 时，需要注意一些细节，如消息格式、协议限制、跨域访问、断点续传等。希望本文能够帮助读者理解 SSE 的原理和使用方法，并在实际项目中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655c3229d2f5e1655d649f56