随着前端应用越来越复杂，我们需要经常更新应用的状态。更新状态最常见的方法是使用 ajax 轮询，它会不断地向服务器发送请求，以获取最新的数据。然而，这种方法非常低效，因为它需要不断地发送请求，即使没有数据也要这样做。这对于服务器和客户端都非常消耗资源。
为了解决这个问题，可以使用 server-sent events（SSE）。SSE 是一种向客户端推送数据的技术，它可以让客户端实时地获取服务器上的最新数据，而不需要使用轮询。这比轮询要高效得多，因为 SSE 只在有数据可用时才会发送数据。这意味着减少了需要发送的请求数量，这对服务器和客户端的性能都有帮助。
使用 SSE
要使用 SSE，首先需要创建一个新的 EventSource 对象。这个对象会连接到服务器，并等待来自服务器的消息。在服务器端，需要发送数据的格式应该遵循 SSE 的规则。这通常涉及到使用特殊的 MIME 类型和字段。以下是一个 SSE 消息的示例：
----- -------- ------- -------------
在这个例子中，"data" 是一个特殊的字段，它表示实际的数据。"name" 和 "age" 是传递的数据属性。"\n\n" 表示消息的结束。这是必需的，因为 SSE 接收数据时会基于这个结束符来判断消息是不是完整的。
在客户端，您需要定义一个回调函数来处理收到的消息。以下是一个基本的示例代码：
----- ------ - --- ----------------------- ---------------- - --------------- - ----- ---- - ----------------------- ------------------ --
在这个例子中，我们为 EventSource 包含 URL，以告诉它连接到哪个服务器端点。onmessage 回调函数会在收到消息时执行，解析消息并在控制台上输出它们。
优点和限制
SSE 的两个最大优点是它可以立即向客户端推送数据，以及可以减少请求次数。这使得网络连接更快，应用程序响应更快。
然而，SSE 也有一些限制。它只能接收文本数据，所以如果需要传输二进制数据，则需要转换数据格式。另外，有些浏览器不支持 SSE，尤其是旧版本的浏览器。但好消息是它的支持率正在逐渐增加，以至于成为一个可靠的技术来实现实时数据传输。
总结
SSE 发送数据的过程比 ajax 轮询更有效率，因为它只在有数据可用时才会发送数据。使用 SSE 可以提高应用程序的响应速度，因为它可以实时地更新数据。但是，SSE 也有一些限制，尤其是在旧版本的浏览器上。
如果您正在编写需要实时数据更新的应用程序，建议使用 SSE。它可以大大提高性能，同时也可以减少浪费。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664fe6e8d3423812e419e2fa