利用 SSE 在 web 应用中处理大量消息-JavaScript中文网-JavaScript教程资源分享门户

在 web 应用开发中，经常需要处理大量实时消息。例如，需要在 web 界面中显示实时股票价格数据，即时聊天等等。传统的做法是使用轮询或者长轮询方式，但这些方法存在效率低下、资源浪费等问题。随着 HTML5 技术的发展，SSE（Server-Sent Events）成为了一种高效且易用的实时消息传输方式。

SSE 简介

SSE 是一种服务器向客户端发送单向、持久化的消息的技术。它基于 HTTP 协议，使用纯文本格式（text/event-stream）传输数据，类似于长轮询。相比于轮询和长轮询，SSE 的优势在于：

实时性更高：浏览器与服务器的连接始终保持开放状态，当服务器有新消息时，立即将其推送到浏览器端，无需等待下一次轮询或重新建立连接。
省资源：相比于轮询和长轮询，SSE 的通信量更小，可以节省带宽和服务器资源。
简单易用：SSE 协议采用纯文本格式，易于编写和调试。

如何使用 SSE

在客户端中，我们可以通过 JavaScript 来使用 SSE。以下是一个基本的 SSE 示例代码：

const source = new EventSource('/events')

source.onmessage = function (event) {
  console.log(event.data)
}

在上面的代码中，我们通过创建 EventSource 对象来建立一个 SSE 连接，参数 /events 表示服务器端的 SSE 接口地址。然后，我们通过 onmessage 方法来监听服务器端推送的消息。当服务器端有新消息时，会触发 onmessage 方法，我们可以在这里处理消息。

在服务器端，我们需要同时建立一个类似于以下代码的 SSE 接口：

// javascriptcn.com 代码示例
app.get('/events', (req, res) => {
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  })

  setInterval(() => {
    const data = 'data: hello\n\n'
    res.write(data)
  }, 1000)
})

在上面的代码中，我们通过设置 Content-Type 为 text/event-stream，告诉浏览器这是一个 SSE 接口。然后，我们通过 setInterval 方法定时向客户端推送消息，并通过 res.write 方法将消息传递给客户端。

高级应用

在实际应用中，我们还可以使用 SSE 来实现多个连接、断线恢复等高级功能。以下是一个 SSE 断线恢复的示例代码：

// javascriptcn.com 代码示例
let source = new EventSource('/events')

source.onmessage = function (event) {
  console.log(event.data)
}

source.onerror = function (event) {
  console.log('error', event)

  if (event.readyState === EventSource.CLOSED) {
    console.log('reconnect')
    source = new EventSource('/events')
  }
}

在上面的代码中，我们通过监听 onerror 事件来检测 SSE 的连接状态。当连接断开时，我们可以通过重新创建 EventSource 对象来重新建立 SSE 连接。这样就可以实现 SSE 的断线自动恢复。

总结

SSE 是一种高效、易用的实时消息传输方式，在处理大量实时消息时具有较高的优势。本文介绍了 SSE 的基本用法，并给出了一些高级应用示例。在实际应用中，我们还可以使用 SSE 来实现更多的功能，例如多个连接、断线恢复等等。希望本文可以对你在 web 应用开发中使用 SSE 提供一些指导意义。

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