SSE 实现可靠的定时更新-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要实现定时更新页面的功能，例如实时展示股票行情、新闻动态等。常见的实现方式有轮询和长轮询，但这两种方式都有一些缺点，例如轮询会导致服务器压力增大，长轮询又会增加网络延迟和连接数量，影响用户体验。

在这种情况下，SSE（Server-Sent Events，服务器推送事件）成为了一种更好的选择。SSE 是一种基于 HTTP 的技术，通过建立持久连接，服务器可以主动向客户端发送数据，实现可靠的定时更新。

SSE 原理

SSE 的原理很简单，就是通过 HTTP 的长连接（keep-alive）实现持久连接，服务器不断向客户端发送数据，客户端利用 EventSource API 接收服务器推送的数据。

具体来说，客户端通过创建一个 EventSource 对象来建立与服务器的连接，如下所示：

const source = new EventSource('/subscribe')

其中，/subscribe 是服务器端的一个接口，用于建立 SSE 连接。在服务器端，需要设置响应头来指定返回的数据类型和保持连接：

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

接下来，服务器就可以向客户端发送数据了，如下所示：

res.write('data: hello\n\n')

其中，data 表示数据类型，hello 表示要发送的数据。注意，每条消息必须以两个换行符结尾，否则客户端无法接收到数据。

客户端可以通过监听 message 事件来接收服务器推送的数据，如下所示：

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

在收到服务器推送的数据后，客户端可以根据需要更新页面内容，例如实时展示股票行情、新闻动态等。

SSE 优点

相比轮询和长轮询，SSE 有以下优点：

减轻服务器压力：SSE 可以通过保持连接来减少服务器的请求数量，减轻服务器的压力。
提高用户体验：SSE 可以实现实时更新，不需要等待定时器触发或者手动刷新页面，提高用户体验。
减少网络延迟：SSE 建立的是长连接，不需要像长轮询那样频繁建立和关闭连接，可以减少网络延迟。

示例代码

下面是一个简单的示例代码，实现每隔一秒钟向客户端发送一个计数器的值：

服务器端代码

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

http.createServer(function(req, res) {
  if (req.url === '/subscribe') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    })

    let count = 0
    setInterval(function() {
      count++
      res.write(`data: ${count}\n\n`)
    }, 1000)
  } else {
    res.writeHead(200, {'Content-Type': 'text/html'})
    res.end(`
      <html>
        <head>
          <title>SSE Demo</title>
        </head>
        <body>
          <div id="counter"></div>
          <script>
            const source = new EventSource('/subscribe')
            const counter = document.getElementById('counter')
            source.addEventListener('message', function(event) {
              counter.innerText = event.data
            })
          </script>
        </body>
      </html>
    `)
  }
}).listen(3000)

客户端代码

// javascriptcn.com 代码示例
<html>
  <head>
    <title>SSE Demo</title>
  </head>
  <body>
    <div id="counter"></div>
    <script>
      const source = new EventSource('/subscribe')
      const counter = document.getElementById('counter')
      source.addEventListener('message', function(event) {
        counter.innerText = event.data
      })
    </script>
  </body>
</html>

总结

SSE 是一种可靠的定时更新方案，可以减轻服务器压力、提高用户体验、减少网络延迟。在实际开发中，我们可以根据需要使用 SSE 来实现实时更新的功能。

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