简介
SSE（Server-Sent Events）是一种服务器推送技术，能够让服务器实时向客户端发送事件。相比于传统的轮询方式，SSE 能够减少资源消耗，降低耗电量，提高性能和响应速度。
本文将介绍 SSE 的最佳实践，包括如何使用 SSE，如何优化 SSE，以及如何处理 SSE 事件。
使用 SSE
使用 SSE 非常简单，只需要在客户端通过 JavaScript 创建一个 EventSource 对象，然后指定服务器端的 URL 即可。
const eventSource = new EventSource('/sse');在服务器端，需要设置响应头 Content-Type 为 text/event-stream，然后将事件以一定格式发送给客户端。
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
res.write(`event: message\n`);
res.write(`data: Hello, world!\n\n`);客户端可以通过监听 message 事件来获取服务器推送的消息。
eventSource.addEventListener('message', function(event) {
console.log(event.data);
});优化 SSE
虽然 SSE 相对于传统的轮询方式能够减少资源消耗，但是如果不进行优化，仍然会有一些问题。
保持长连接
为了保持 SSE 的连接，需要在服务器端设置响应头 Connection 为 keep-alive，并在客户端监听 close 事件来处理连接关闭的情况。
eventSource.addEventListener('close', function() {
console.log('Connection closed');
});控制发送频率
SSE 默认会每秒发送一个心跳包，以保持连接。如果服务器端没有及时发送事件，客户端会一直等待，造成不必要的资源浪费。为了避免这种情况，可以在服务器端设置发送频率，比如每 5 秒发送一个事件。
setInterval(() => {
res.write(`event: message\n`);
res.write(`data: Hello, world!\n\n`);
}, 5000);压缩数据
SSE 发送的数据可以进行压缩，以减少网络传输的数据量。在服务器端可以使用 gzip 压缩数据，客户端则需要解压缩。
-- -------------------- ---- ------- ------------------ - --------------- -------------------- ------------------- ------- ---------------- ----------- ------------- ------------ --- ----- ---- - ------------------ --------------- -------------- -- - ----- ---- - ---------------- -------- ------- ------- --- ------------------ ------------ ----------------- -------------- -- ------
处理 SSE 事件
SSE 接收到的事件可以是任意类型的数据，比如文本、JSON、二进制等。客户端需要根据事件类型来处理数据。
-- -------------------- ---- -------
--------------------------------------- --------------- -
----- ---- - -----------
-- ----------- --- ---------- -
------------------
- ---- -- ----------- --- ------- -
------------------------------
- ---- -- ----------- --- --------- -
----- ---- - --- -------------
----- --- - --------------------------
----- --- - --- --------
------- - ----
-------------------------------
-
---在服务器端，需要根据事件类型来设置响应头的 Content-Type。
-- -------------------- ---- ------- ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- ----------------- ------------ ---------------- ------ ------------- ----------------- --------- ---------------- ------------------ -------- ------- ------- ---------- ----- ------ - ------------------ ----- ------- ----------------- ----------- ---------------- -----------------------------------
总结
SSE 是一种非常实用的服务器推送技术，能够减少资源消耗，降低耗电量，提高性能和响应速度。在使用 SSE 时，需要注意保持长连接、控制发送频率、压缩数据，并根据事件类型来处理数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6639e795d3423812e48123a9