Web应用程序需要从服务器获得实时更新。在过去，我们使用长轮询（长连接）来实现这一目标。这会导致一些问题，例如服务器上的并发连接可能会增加，服务器不得不经常回应大量请求，而且服务器没有任何通知连接已经被关闭。
随着HTML5提供的Server-sent Events（SSE）的出现，一个更加简单和现代的方法可以被使用。SSE是实现服务器推送的一种机制，利用一个开放的HTTP连接从服务器向客户端发送数据。这种新的方法更加优雅和高效。SSE可以减少网络流量并减轻服务器的负担。
原理
SSE是一种基于HTTP的服务器推送技术。它的原理是，在服务器和客户端之间创建一个长期的连接（单向），然后服务器通过这个连接向客户端发送数据。当连接关闭时，客户端就知道没有新的数据可以接收。
SSE连接的请求和响应类型表现为常规的HTTP请求和响应，但是，它们具有与常规HTTP请求和响应不同的语义。一旦收到SSE流式响应，客户端将使用文本事件流从服务器接收数据。服务器可以随时重新开始发送数据，并且在客户端关闭连接之前保持开放。
当客户端接收数据时，它将使用JavaScript（或其他客户端端口）来处理数据。不同于Web套接字协议，SSE是一种无状态协议，客户端不会发起任何请求。
SSE实现最新数据推送
实现SSE的关键是使用EventSource对象。该对象提供了一个API，用于与服务器建立SSE连接、处理接收到的数据和处理错误和断开连接。
下面是一个常规的SSE连接代码：
let eventSource = new EventSource('/path/to/sse');
eventSource.onmessage = function (event) {
console.log(event.data);
};使用这个API，我们可以在客户端上创建一个SSE连接。当数据到达时，它将以事件的形式传递给我们。这里我们只需要在浏览器端发送请求，然后从服务器端发送数据。上面的代码在客户端控制台中将数据打印出来。
为了让SSE只推送最新数据，我们在服务器端通过一些技巧来控制推送内容。代码示例如下：
-- -------------------- ---- ------- --- ----------- - -- ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- -------------- ------------------- ----------------- ------------ ---------------- ---------------- --- ---------- - -------------- -- - -------------- -------------- ------------------- ----------------- ------------ ---------------- ---- -------- ----- -- -- --------------------- -- ------ --------------- -- -- - -------------------------- ---
我们可以使用lastEventId变量的值来标识每个事件并确保每个事件都是唯一的。在客户端，我们可以通过event.lastEventId属性检查最后一个已接收事件的ID。这将有助于我们处理断开连接并在重新连接时获得最新数据。
结论
SSE是一种有效的、基于HTTP的服务器推送机制。它是Web开发中一个很好的补充，可以用来推送最新的数据。本文提供了一些实现SSE的技术，使我们能够仅仅推送最新数据。当然，还有其他方法可以实现这个目标。SSE还是需要服务器的支持，但是，在客户端，任何现代浏览器都支持它。
感谢您阅读本文。如果您有任何问题或意见，请随时在评论中与我们分享。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674807dd5883fc5ebff15ae7