关于 SSE 的背景了解及应用实践

Server-Sent Events (SSE) 是一种用于在客户端与服务器之间提供单向通信的技术。这种方法是一种传统的模式，它使用 HTTP 协议来实现。它是最近年来越来越流行的一种技术，因为它能够在 Web 应用程序中比传统的轮询技术更有效地传输实时数据。

背景

SSE 的背景始于 2006 年，早期为了解决关于页面刷新的问题，人们就开始研究轮询技术。但是，轮询技术，因其周期性地接收请求， 而低效且消耗过多的资源，而且无法支持实时通信。此时，SSE 就被提出来作为一种解决方案。

SSE 可以通过简单的 HTTP 连接，在客户端和服务器之间创建持久连接，从而实现实时消息的推送。这使得服务器能够实时向客户端发送消息，而不需要客户端重复发出请求。除此之外，SSE 还支持自定义消息类型以及 CORS。

应用实践

实现一个简单的 SSE 应用

在使用 SSE 前，需要先将其建立在一个服务器上，以实现服务器端实时的消息推送。下面是一个使用 Node.js Express 框架实现 SSE 的示例代码，它能够给客户端发送每秒的时间戳：

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

app.use(express.static(__dirname + '/public'))

app.get('/sse', (req, res) => {
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
  })
  setInterval(() => {
    const time = new Date().toLocaleTimeString();
    res.write(`event: ping\ndata: ${time}\n\n`)
  }, 1000)
})

app.listen(3000, () => {
  console.log(`listening on http://localhost:3000/sse`)
})

在客户端中，使用以下代码即可对 SSE 进行监听：

const eventSource = new EventSource('/sse');
eventSource.onmessage = event => {
  console.log(event.data)
}

客户端使用

在客户端中，可以使用基础的 JavaScript 语言即可监听 SSE。SSE 事件还有一些自定义的属性，比如事件类型，数据类型等等。下面是一个使用 Vue 框架实现的简单应用结合前面给出的 SSE 服务端实现：

// javascriptcn.com 代码示例
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
  mounted() {
    this.eventSource = new EventSource("/sse");
    this.eventSource.addEventListener(
      "ping",
      event => (this.message = event.data)
    );
  },
  beforeDestroy() {
    this.eventSource && this.eventSource.close();
  },
};
</script>

总结

SSE 相对于传统的轮询技术，具有更高的效率和更低的资源消耗。它能够实现在 Web 应用程序中的实时消息推送，使得服务器端能够实时地向客户端发送消息，而不需要客户端不断发出请求。同时，使用 SSE 可以极大地提高应用程序的用户体验。

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