SSE 推送的正确姿势-JavaScript中文网-JavaScript教程资源分享门户

什么是 SSE？

SSE，即 Server-Sent Events，是一种基于 HTTP 协议的服务器向客户端推送数据的技术。它允许服务器单向向客户端发送数据流，而不需要客户端发出请求。SSE 可以在 Web 应用程序中实现实时更新，如聊天应用、股票报价等。

如何使用 SSE？

服务器端代码

在服务器端，我们需要设置 HTTP 响应的 MIME 类型为 "text/event-stream"，这样浏览器就能识别这个响应是 SSE 格式的。

response.writeHead(200, {
  "Content-Type": "text/event-stream",
  "Cache-Control": "no-cache",
  "Connection": "keep-alive"
})

然后，我们就可以在 HTTP 响应中不断地发送数据流，每个数据流都带着一个标识符和一个消息体。标识符可以用来区分不同类型的消息，消息体可以是任意格式的数据。比如：

response.write("event: message\n");
response.write("data: hello world\n\n");

上面的代码就是一个简单的消息流，标识符是 "message"，消息体是 "hello world"。注意每个数据流以一个空行结束。

客户端代码

在客户端，我们需要创建一个接收 SSE 数据流的 EventSource 对象。

const source = new EventSource('/sse')

这里的 '/sse' 是服务器端设置的 SSE 接口路径。

然后，我们就可以监听 EventSource 对象的 "message" 事件来接收数据流。

source.addEventListener('message', function(event) {
  console.log(event.data)
})

上面的代码就是在控制台输出接收到的消息体。如果有多个类型的消息，我们可以监听不同的事件类型来区分。

source.addEventListener('message', function(event) {
  console.log(event.data)
})

source.addEventListener('error', function(event) {
  console.error(event)
})

注意事项

跨域问题

由于 SSE 是基于 HTTP 协议的，所以同样受到同源策略的限制。如果服务器和客户端不在同一个域名下，需要在服务器端设置 CORS 头部。

response.writeHead(200, {
  "Content-Type": "text/event-stream",
  "Cache-Control": "no-cache",
  "Connection": "keep-alive",
  "Access-Control-Allow-Origin": "http://example.com"
})

断开连接

SSE 会自动保持连接，直到客户端关闭连接或者服务器断开连接。如果服务器端主动断开连接，客户端会触发 "error" 事件。

response.on("close", function() {
  console.log("connection closed")
})

重新连接

如果客户端希望在连接断开之后自动重新连接，可以监听 "error" 事件并在一定时间后重新连接。

// javascriptcn.com 代码示例
let source

function connect() {
  source = new EventSource('/sse')
  
  source.addEventListener('message', function(event) {
    console.log(event.data)
  })
  
  source.addEventListener('error', function(event) {
    console.error(event)
    setTimeout(connect, 5000)  // 5 秒后重试
  })
}

connect()

上面的代码每隔 5 秒重新连接一次。如果需要停止自动连接，可以调用 source.close() 方法关闭连接。

参考示例

下面是一个简单的 SSE 示例，包含服务器端代码和客户端代码。

服务器端代码

// javascriptcn.com 代码示例
const http = require('http');

http.createServer((request, response) => {
  console.log(`${request.method}: ${request.url}`)
  
  if (request.url === "/sse") {
    response.writeHead(200, {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
      "Connection": "keep-alive",
      "Access-Control-Allow-Origin": "http://example.com"
    })
    
    setInterval(() => {
      response.write("event: message\n");
      response.write("data: hello world\n\n");
    }, 1000)
  } else {
    response.writeHead(200, {"Content-Type": "text/html"});
    response.end(`
      <html>
        <head>
          <title>SSE Example</title>
        </head>
        <body>
          <script>
            const source = new EventSource('/sse')

            source.addEventListener('message', function(event) {
              console.log(event.data)
            })

            source.addEventListener('error', function(event) {
              console.error(event)
            })
          </script>
        </body>
      </html>
    `);
  }
}).listen(8080);

console.log("Server listening on http://localhost:8080");

客户端代码

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <title>SSE Example</title>
</head>
<body>
  <script>
    const source = new EventSource('/sse')

    source.addEventListener('message', function(event) {
      console.log(event.data)
    })

    source.addEventListener('error', function(event) {
      console.error(event)
    })
  </script>
</body>
</html>

总结

SSE 是前端实时更新技术中非常重要的一环。通过服务器向客户端推送数据流，可以实现实时展示以及更好的用户体验。本文介绍了 SSE 的基本使用方法以及注意事项，希望对大家在实际开发中有所帮助。

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