SSE（Server-Sent Events 服务端发送事件）简介-JavaScript中文网-JavaScript教程资源分享门户

什么是SSE？

SSE（Server-Sent Events 服务端发送事件）是一种前端开发中用于从服务器推送事件到客户端的技术。它允许在没有任何客户端请求的情况下推送数据到客户端。SSE是基于HTTP协议的，且不需要使用特殊的协议或额外的插件。

SSE的工作原理是，客户端与服务器端通过HTTP协议建立一个长期的连接，当服务器端有新数据时，就可以将数据通过这个连接直接推送给客户端。客户端通过监听该连接，可以及时接收到最新的数据，而不需要轮询请求服务器，降低了客户端和服务器的负担，提高了数据传输的效率。

SSE的优点

相对于传统的轮询方式，SSE有以下优点：

实时性：当有新的数据产生时，服务器可以即时推送到客户端，相对于轮询方式实时性更好。
扩展性：SSE可以建立长连接，避免了频繁的请求和响应，提高了服务器和客户端的响应速度。
高效性：SSE使用HTTP协议，避免了插件的下载，使用上更加简单方便。

SSE的缺点

相对应的，SSE也存在一些缺点：

兼容性：由于SSE是HTML5中的新技术，对于IE浏览器来说兼容性尚未支持。
连接保持：在使用SSE时，需要保持连接的有效性，因此需要使用心跳（heartbeat）维持连接。在网络不稳定的情况下，连接不断重连会消耗设备电量和网络带宽。

SSE的使用

使用SSE时，您需要从服务器端推送事件。这些事件没有特定的格式，您可以自定义推送的数据格式和事件名称。例如，您可以推送一个JSON格式的数据事件，如下所示：

data: {"id":1,"name":"Mike","age":20}
event: user_update

其中data表示要推送的数据，event表示事件名称。在客户端的JS代码中，您可以监听事件内容并进行处理，如下所示：

// javascriptcn.com 代码示例
let source = new EventSource('/sse');
source.onmessage = function(event) {
  let data = JSON.parse(event.data);
  console.log(data); //输出：{"id":1,"name":"Mike","age":20}
};
source.addEventListener('user_update', function(event) {
  let data = JSON.parse(event.data);
  console.log(data); //输出：{"id":1,"name":"Mike","age":20}
});

在上面的代码中，我们首先创建了一个EventSource对象，指定了SSE的URL地址。然后通过监听'onmessage'事件和'addEventListener'事件，处理从服务器推送的数据并进行打印输出。

总结

SSE是一种向前端推送数据的技术，它的特点是实时性，扩展性和高效性。它使用了HTTP协议的长连接，避免了频繁的请求和响应，提高了服务器和客户端的响应速度。同时，它也存在了兼容性和连接保持的问题。因此，在使用SSE时，需要根据具体情况进行选择。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6540831d7d4982a6eba04874