如何使用 SSE 打造高效能且可扩展的 Web 应用？-JavaScript中文网-JavaScript教程资源分享门户

现代的 Web 应用需要高效能的实时数据传输，而 SSE（Server-Sent Events）就是一种非常适合实现这一需求的技术。SSE 是一种单向的、基于 HTTP 的实时数据传输技术，可以让服务器主动向客户端发送事件数据，而客户端只需要通过简单的 JavaScript 代码就可以接收这些数据。本文将介绍 SSE 的基本原理、使用方法以及如何将其应用于实际的 Web 应用中。

SSE 的基本原理

SSE 的基本原理是通过一个特殊的 HTTP 连接（通常是长连接）来实现服务器向客户端推送事件数据。这个连接被称为 SSE 连接，它与普通的 HTTP 连接不同的是，它不会在服务器发送完响应后立即关闭，而是保持打开状态，直到服务器发送完所有的事件数据或者客户端关闭连接。

SSE 连接的响应格式也有一定的特殊性，它使用了一种称为“text/event-stream”的文本格式，每个事件数据都由一个或多个字段（例如“event”、“data”、“id”等）组成。下面是一个简单的 SSE 响应示例：

// javascriptcn.com 代码示例
HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache

event: message
data: Hello, world!

event: message
data: How are you?

event: message
data: I'm fine, thank you!

上面的例子中，服务器向客户端发送了三个事件数据，每个事件数据都包含了一个名为“message”的事件类型和一个名为“data”的数据字段。客户端可以通过 JavaScript 代码来监听这些事件数据，从而实现实时数据传输的功能。

如何使用 SSE

使用 SSE 需要两个部分：服务器端和客户端。下面分别介绍如何在这两个部分中使用 SSE。

服务器端

在服务器端，使用 SSE 需要满足以下几个条件：

返回的响应头中需要包含“Content-Type: text/event-stream”字段，以告诉客户端这是一个 SSE 连接。
返回的响应头中需要包含“Cache-Control: no-cache”字段，以避免浏览器缓存响应。
响应的数据需要按照 SSE 格式进行组织，并通过 SSE 连接发送给客户端。

下面是一个使用 Node.js 和 Express 框架实现 SSE 的例子：

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

app.get('/events', (req, res) => {
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache'
  })

  setInterval(() => {
    res.write(`data: ${new Date().toISOString()}\n\n`)
  }, 1000)
})

app.listen(3000, () => {
  console.log('Server listening on port 3000')
})

上面的例子中，我们使用 Express 框架创建了一个 HTTP 服务器，并在“/events”路径下创建了一个 SSE 连接。在这个 SSE 连接中，我们每隔一秒钟向客户端发送一个包含当前时间戳的事件数据。注意，我们在每个事件数据后面都添加了两个换行符“\n\n”，这是因为 SSE 规定每个事件数据必须以两个换行符结尾。

客户端

在客户端，使用 SSE 需要满足以下几个条件：

创建一个 SSE 连接，并指定连接的 URL。
监听 SSE 连接的“message”事件，并在事件回调函数中处理服务器发送的事件数据。

下面是一个使用 JavaScript 实现 SSE 客户端的例子：

const source = new EventSource('/events')

source.addEventListener('message', event => {
  console.log(`Received message: ${event.data}`)
})

上面的例子中，我们使用了 JavaScript 内置的“EventSource”对象来创建一个 SSE 连接，并指定连接的 URL 为“/events”。我们还通过“addEventListener”方法监听了 SSE 连接的“message”事件，并在事件回调函数中打印了服务器发送的事件数据。

如何将 SSE 应用于实际的 Web 应用中

将 SSE 应用于实际的 Web 应用中需要注意以下几点：

SSE 连接需要保持打开状态，这意味着服务器需要处理大量的长连接请求。为了避免长连接请求过多导致服务器负载过高，可以考虑使用专门的消息队列系统（例如 RabbitMQ 或 Kafka）来处理 SSE 事件数据的推送。
SSE 连接可以实现实时数据传输，但并不适用于大量数据的传输。如果需要传输大量的数据，可以考虑使用 WebSocket 或者其他基于 TCP 的实时数据传输技术。
SSE 连接需要客户端浏览器支持，目前大部分现代浏览器都已经支持 SSE，但是在一些特殊情况下（例如使用 IE 浏览器）可能会出现兼容性问题。

下面是一个使用 SSE 实现实时股票行情更新的例子：

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

app.get('/stocks', (req, res) => {
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache'
  })

  const stocks = ['AAPL', 'GOOG', 'MSFT', 'AMZN', 'FB']
  const prices = {}

  setInterval(() => {
    stocks.forEach(stock => {
      prices[stock] = Math.random() * 1000
    })

    res.write(`event: update\n`)
    res.write(`data: ${JSON.stringify(prices)}\n\n`)
  }, 1000)
})

app.use(express.static('public'))

app.listen(3000, () => {
  console.log('Server listening on port 3000')
})

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>Realtime Stock Quotes</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Symbol</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody id="stocks">
      </tbody>
    </table>

    <script>
      const source = new EventSource('/stocks')

      source.addEventListener('update', event => {
        const prices = JSON.parse(event.data)

        Object.entries(prices).forEach(([symbol, price]) => {
          const row = document.getElementById(symbol) || document.createElement('tr')
          row.id = symbol
          row.innerHTML = `<td>${symbol}</td><td>${price.toFixed(2)}</td>`
          document.getElementById('stocks').appendChild(row)
        })
      })
    </script>
  </body>
</html>

上面的例子中，我们创建了一个 SSE 连接来实现实时股票行情更新的功能。在服务器端，我们每隔一秒钟生成一组随机的股票行情数据，并通过 SSE 连接发送给客户端。在客户端，我们通过 JavaScript 代码监听 SSE 连接的“update”事件，并在事件回调函数中更新股票行情数据的显示。同时，我们还使用了 HTML 和 CSS 来实现股票行情数据的表格显示。

总结

SSE 是一种非常适合实现实时数据传输的技术，可以用于实现实时股票行情更新、实时聊天、实时推送等功能。使用 SSE 需要注意服务器端和客户端的实现细节，以及 SSE 连接的保持打开状态可能会对服务器性能产生影响。但是，通过合理的应用 SSE 技术，可以为 Web 应用带来更好的用户体验和更高的性能表现。

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