SSE 的浏览器支持情况及解决方案-JavaScript中文网-JavaScript教程资源分享门户

什么是 SSE？

SSE（Server-Sent Events）是一种前端与服务器之间实现实时通信的技术，它允许服务器向客户端推送数据，而不需要客户端不断地发送请求。SSE 使用 HTTP 协议，与 WebSocket 相比，它更加轻量级和容易实现。

SSE 的浏览器支持情况

SSE 是 HTML5 规范中的一部分，因此只有支持 HTML5 的浏览器才能支持 SSE。以下是 SSE 的浏览器支持情况：

Chrome：从版本 6 开始支持 SSE
Firefox：从版本 6 开始支持 SSE
Safari：从版本 5 开始支持 SSE
Opera：从版本 11 开始支持 SSE
Edge：从版本 12 开始支持 SSE
IE：不支持 SSE

可以看到，IE 不支持 SSE，这对于需要支持 IE 的项目来说是一个问题。但是，我们可以使用一些库来模拟 SSE 的功能，比如 EventSource polyfill。

如何使用 SSE？

使用 SSE 的过程可以分为以下几步：

在客户端创建一个 EventSource 对象，并指定要连接的服务器 URL。
服务器发送数据到客户端的时候，使用 SSE 规范中定义的格式发送数据。
客户端通过监听 EventSource 对象的 onmessage 事件来接收服务器发送的数据。

以下是一个简单的 SSE 示例代码：

// 创建 EventSource 对象
const eventSource = new EventSource('/sse');

// 监听服务器发送的数据
eventSource.onmessage = function (event) {
  console.log(event.data);
};

在服务器端，我们需要设置响应头，告诉浏览器这是一个 SSE 请求，并设置一些其他的响应头信息。以下是一个 Node.js Express 框架的示例代码：

// javascriptcn.com 代码示例
app.get('/sse', function (req, res) {
  // 设置响应头
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  // 发送数据到客户端
  setInterval(function () {
    const data = 'Hello, SSE!';
    res.write(`data: ${data}\n\n`);
  }, 1000);
});

总结

SSE 是一种实现实时通信的轻量级技术，相比 WebSocket 更加容易实现。但是，由于 IE 不支持 SSE，我们需要使用一些库来模拟 SSE 的功能。在使用 SSE 的过程中，需要注意设置响应头，以及监听 EventSource 对象的 onmessage 事件。

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