Server-Sent Events（SSE）是一种基于HTTP协议的服务器推送技术，它可以实现在浏览器与服务器之间建立一个持久连接，从而实现实时推送消息的功能。相比于WebSocket等技术，SSE更加轻量级且易于实现。本文将介绍如何使用异步方式来实现SSE，以及如何通过非缓存持久连接复用来提高性能。
实现步骤
首先，我们需要在服务器端建立一个SSE服务，用于向浏览器实时推送消息。以下是实现SSE服务的几个步骤：
1. 建立HTTP连接
在浏览器端使用JavaScript代码建立一个HTTP连接，代码如下：
const eventSource = new EventSource('/sse');
这里传入的参数是SSE服务的URL，用于建立连接并接收服务端推送的消息。
2. 实现SSE服务
在服务器端实现SSE服务，代码如下：
-- -------------------- ---- ------- ----- ---------- - ----------------------- ---- -- - -- -------- --- ------- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- -------------- -- - ---------------- ------------------- -- ------ - ---展开代码
这里使用Node.js的http模块建立一个HTTP服务器，并设置服务端响应的头部信息，包括Content-Type为"text/event-stream"，Cache-Control为"no-cache"，Connection为"keep-alive"。然后使用setInterval方法每隔一秒钟向客户端发送一条消息。消息的格式为"data: " + 消息内容 + "\n\n"，其中"\n\n"用于告诉浏览器该条消息结束。在SSE服务中，每一条消息必须以"data:"开头，中间可以自由定义消息内容，最后以"\n\n"结束。
3. 关闭HTTP连接
当浏览器不需要接收SSE消息时，需要关闭HTTP连接。代码如下：
eventSource.close();
非缓存持久连接复用
在上面的示例代码中，我们使用了一个定时器每隔一秒钟向客户端发送一条消息。这种方式可以实现实时推送消息的功能，但是在实际应用中，由于网络等各种原因，消息发送的间隔可能会产生波动，从而导致消息的不稳定性。同时，每次发送消息都要建立一个新的HTTP连接，这会产生一定的性能消耗，特别是在高并发访问场景下。
为了解决以上问题，我们可以使用非缓存持久连接复用的方式。具体实现步骤如下：
1. 建立单一连接
在浏览器端建立单一HTTP连接，代码如下：
const eventSource = new EventSource('/sse');
2. 实现SSE服务
在服务器端实现SSE服务，代码如下：
-- -------------------- ---- ------- ----- ---------- - ----------------------- ---- -- - -- -------- --- ------- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- ----- -- - ----------- -------------- ------------ --------------- - ---- --------------- -- -- - ------ ---------------- --- - ---展开代码
这里除了设置与前面相同的头部信息外，还实现了一个记录连接的对象connections。当客户端建立连接时，服务器会在响应头部中返回一个唯一的ID，并将当前连接的响应对象保存到connections中。当客户端关闭连接时，服务器会从connections中删除该连接。
3. 发送实时数据
在需要发送实时数据时，服务器可以遍历connections对象，向其中的每个响应对象发送消息。代码如下：
setInterval(() => { const data = `data: ${Date.now()}\n\n`; for (const id in connections) { connections[id].write(data); } }, 1000);
这里使用定时器每隔一秒钟向客户端发送当前时间戳，遍历connections对象并向其中的每个响应对象发送数据。
总结
SSE技术是一种轻量级的服务器推送技术，可以实现在浏览器与服务器之间建立一个持久连接，实现实时推送消息的功能。通过使用异步方式和非缓存持久连接复用的技术，可以提高SSE的性能和稳定性，适用于高并发访问场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6499531f48841e9894651963
