介绍
SSE （Server-Sent Events）是 HTML5 中一项比较新的技术，大家可以使用 SSE 技术实现服务器向客户端推送实时数据。然而，当 SSE 向客户端推送大量数据时，可能会导致浏览器产生缓存问题，而这个问题在客户端接收这些实时数据的过程中会变得更加明显。
本文将会详细探索 SSE 在处理大量数据时产生缓存问题的原因，并提供了几种可行的解决方案，以及关于如何使用这些方案的最佳实践。
产生缓存问题的原因
在 SSE 中，客户端通过一个事件源（EventSource）与服务器进行连接，事件源使用 HTTP 协议请求服务器 SSE 格式的数据。当事件源成功与服务器连接后，服务器会开始向事件源推送实时数据。此时，事件源就会收到一些无限制的 SSE 数据，并持续性地接收这些数据，直到服务器关闭连接。
然而，在数据流中可能会遇到一些奇怪的问题，例如浏览器将 SSE 数据缓存在内存中，因此在 SSE 接收器尝试协议重新连接时，它可能首先要处理缓存中的数据而不是服务器发送的最新数据。如果数据量非常大，将会花费大量的时间去先处理它们。
在客户端与服务器之间的连接中，如果存在大量的数据流传输，缓存问题会更加严重，并且如果事件源长时间打开而没有得到关闭，浏览器可能会因缓存崩溃。为了避免这些问题，我们需要一些可行的解决方案。
解决方案
为了解决 SSE 在处理大量数据时产生缓存问题，我们可以采用以下几种方法：
1. 在每次数据推送前添加注释
为了解决数据推送速度太快而导致的缓存问题，可以将注释字符串作为其他数据的分隔符，以便客户端可以更轻松地识别数据。下面是一个例子：
---- -- --- ---------- ---- ------- ----------- ---- ------ - - ------- - -------
echo(": new line\n\n"); 这一行是注释字符串。每次推送数据前都会添加这一行注释。因此，我们可以使用这种方式在数据中添加注释，以便可以更好地控制数据速率并解决缓存问题。
2. 在每次推送时设置缓存控制头
我们可以通过设置缓存控制头来避免数据缓存问题。具体过程如下：
--------------------- -------------------- ---------------------- ----------- -------------------------- -----
第二个头（Cache-Control）表示客户端不应将SSE内容缓存到内存中，而第三个头（X-Accel-Buffering）表示服务器不应将其缓存在RAM中。
3. 使用随机线束
长时间推送 SSE 数据可能会导致浏览器卡顿。为了避免这个问题，可以添加随机线束用于数据的推送。
----- -------------- - ---- ------- --------- -- --------- ----- -- ------- -- ---------- ---- ---- ---- -------------- ------------ --- ---- ------ ---- ------ --- ---- ---------- -------- --------- ------ - ------ ------ ------- ---- ----- -
这个例子中，我们添加了适当的注释，并在每行开头添加了一个随机 ID。通过添加随机线束和休眠（sleep）来控制数据的速率和缓冲，可以确保每个 SSE 数据包都会及时地发送到客户端，从而避免数据缓存问题。
最佳实践
当使用 SSE 接收器时，应该明确 SSE 接收器接收的数据的数量。应该根据所需的数据量制定良好的推送策略。数据速率不应该快到让客户端无法处理，或者慢到在连续的实时更新之间存在太多的延迟。最好采用数据速度适当的推送方法来控制推送的数据速度。
另外，在所有发出的 HTTP 链接中设置适当的头文件是很重要的。缓存问题不一定在 SSE 上，但可能在其他页面资源上。在页面上添加适当的标头，以确保所有浏览器都按预期情况进行。
最后，这些策略往往是介绍性和具有挑战性的，所以像使用 Express.js，Firebase 和Pusher这样的技术可以简化这个问题，因为它们已经在其 API 中使用了之前的一些解决方案。对于初学者来说，这是一个很方便的选择。
结论
SSE 是一项非常实用的技术，可以实现服务器向客户端推送实时数据。但是在处理大量数据时容易出现缓存问题。通过在每次数据推送前添加注释、在每次推送时设置缓存控制头以及使用随机线束，我们可以解决 SSE 在数据量过大时产生的缓存问题。最佳实践是在所有发出的 HTTP 链接中设置适当的头文件，并采用数据速度适当的推送方法来控制推送的数据速度。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/67106ff55f551281026b06b7