前言
在前端开发中，我们经常需要实现实时数据的传输，比如聊天室、股票行情等等。而传统的方式是使用轮询或者 WebSocket，但是这些方式都有一些缺点，轮询会导致服务器压力过大，WebSocket 在一些场景下不太适用。
这时候就需要使用 Server-sent Events（SSE），它是 HTML5 中的一项新技术，可以实现服务器向客户端推送数据，而且支持跨浏览器。
本文将详细介绍如何使用 SSE 进行跨浏览器的数据传输，包括 SSE 的原理、如何使用 SSE、SSE 的优缺点以及一些注意事项。
SSE 的原理
SSE 是基于 HTTP 协议的，它使用了 HTTP 的长连接（长轮询）来实现服务器向客户端的推送。客户端向服务器发送一个 HTTP 请求，服务器保持连接不关闭，并实时向客户端发送数据，直到客户端关闭连接。
SSE 的数据格式是纯文本，以“data: ”开头的行为数据行，以“event: ”开头的行为事件行。事件行可以用来区分不同类型的数据。如果不指定事件名，则默认为“message”。
如何使用 SSE
服务端
使用 SSE 需要先创建一个 HTTP 服务器，然后在服务器端发送 SSE 数据。以下是一个 Node.js 服务器的示例代码：
-- -------------------- ---- ------- ----- ---- - ---------------- -------------------------- ----- ---- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- -------------------- -- - ---------------- - - --- --------------------------- - -------- -- ------ ----------------展开代码
上面的代码创建了一个 HTTP 服务器，并在每秒钟向客户端发送当前时间。需要注意的是，需要设置响应头的 Content-Type 为“text/event-stream”，这样浏览器才能正确解析 SSE 数据。
客户端
在客户端，我们可以使用 EventSource 对象来接收 SSE 数据。以下是一个简单的 HTML 页面的示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- ------------ ------- ------ ---- ------------------ -------- ----- -- - --- ------------------------------------- ------------ - -------- ------- - ----- ---- - ----------- ------------------------------------------- -- ---- - ------- -- --------- ------- -------展开代码
上面的代码创建了一个 EventSource 对象，并指定了 SSE 数据的来源。当有新的数据到达时，会触发 onmessage 事件，我们可以在事件处理函数中获取数据并显示在页面上。
SSE 的优缺点
优点
- SSE 基于 HTTP 协议，不需要像 WebSocket 那样建立新的连接，减少了服务器的负担。
- SSE 支持跨浏览器，不需要像轮询那样写多种实现方式。
- SSE 使用纯文本格式，比 WebSocket 更加轻量级，适合一些简单的实时数据传输场景。
缺点
- SSE 只能从服务器向客户端发送数据，不支持双向通信。
- SSE 的兼容性不如 WebSocket，部分浏览器不支持 SSE。
注意事项
- SSE 不支持跨域请求，需要在服务器端设置 CORS。
- SSE 长连接会占用服务器资源，需要根据实际情况进行调整。
- SSE 会占用客户端的一个 HTTP 连接，需要注意浏览器的最大连接数。
结语
本文介绍了如何使用 SSE 进行跨浏览器的数据传输，包括 SSE 的原理、如何使用 SSE、SSE 的优缺点以及一些注意事项。SSE 是一个轻量级的实时数据传输方案，在一些简单的实时数据传输场景下有着不错的表现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d1ff76a941bf71343f1ae5
