Server-sent Events(SSE)是一种在 Web 应用程序中实现实时通信的技术。它允许服务器向客户端发送事件流,而无需客户端发起请求。这使得实时通信可以更加高效地实现,而无需使用 WebSocket 等其他更复杂的技术。
然而,在使用 SSE 时,有一个非常重要的问题需要注意,那就是浏览器缓存问题。由于 SSE 是一种持续连接,因此浏览器可能会将事件流缓存起来,而不是实时更新。这可能会导致客户端无法及时收到最新的事件。
为了解决这个问题,我们可以使用以下几种方法:
1. 设置响应头
我们可以在服务器端的响应头中设置 "Cache-Control" 和 "Pragma" 字段,来告诉浏览器不要缓存 SSE 事件流。
response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
response.setHeader("Pragma", "no-cache");这样,浏览器就会在每次请求时都从服务器获取最新的事件流。
2. 添加时间戳
另一种方法是在客户端的事件流 URL 中添加时间戳参数,以确保每次请求都是唯一的。
var source = new EventSource("/events?timestamp=" + new Date().getTime());这样,每次请求的 URL 都会不同,从而避免浏览器缓存问题。
3. 使用随机数
除了时间戳,我们还可以使用随机数来确保每次请求都是唯一的。
var source = new EventSource("/events?random=" + Math.random());这种方法也可以有效地避免浏览器缓存问题。
综上所述,为了避免浏览器缓存问题,我们可以在服务器端设置响应头、在客户端的事件流 URL 中添加时间戳或随机数。这些方法都可以确保每次请求都是唯一的,从而避免浏览器缓存问题。
以下是一个完整的 SSE 示例代码:
-- -------------------- ---- -------
--- ------ - --- -------------------------------- - --- ------------------
---------------------------------- --------------- -
--------------------- ------ - - ------------
-- -------
------------------------------- --------------- -
----------------------- ----------
-- -------
-------------------------------- --------------- -
-- ------------------------ --- ------------------- -
----------------------- ----------
- ---- -
------------------ ------------
-
-- -------在服务器端,我们可以使用 Node.js 和 Express 框架来实现 SSE:
-- -------------------- ---- -------
--- ------- - -------------------
--- --- - ----------
------------------ ----------------- --------- -
---------------------------------- ---------------------
----------------------------------- ---------- --------- ------------------
---------------------------- ------------
---------------------- -
--------------------- - - --- ---------------- - --------
-- ------
---
-----------------这个例子会每秒钟向客户端发送一个事件,事件内容为当前时间戳。我们在客户端的事件流 URL 中添加了时间戳参数,以确保每次请求都是唯一的。在服务器端,我们也设置了响应头,告诉浏览器不要缓存事件流。
这个例子可以让你更好地理解如何使用 SSE,并避免浏览器缓存问题。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d1927ba941bf713434dab8