随着互联网技术的不断发展，Web 应用程序已经成为了人们生活和工作中必不可少的一部分。而随着 Web 应用程序的复杂度不断提高，实时的数据交互和响应也变得越来越重要。为了满足这一需求，Server-Sent Events 技术应运而生。
什么是 Server-Sent Events
Server-Sent Events（简称 SSE）是一种基于 HTTP 协议的服务器推送技术，它可以让服务器向客户端主动发送事件，实现实时的数据交互和响应。与传统的 Ajax 轮询方式相比，SSE 可以更加高效、稳定地实现实时数据交互，同时也可以减少服务器的负载。
SSE 的基本原理是客户端向服务器发送一个 HTTP 请求，并在请求头中指定了“text/event-stream”作为响应的 MIME 类型。服务器在接收到这个请求后，会持续地向客户端发送消息，每个消息都是一个带有特定格式的文本数据流，客户端通过解析这些数据流来获取服务器发送的事件信息。
如何使用 Server-Sent Events
使用 SSE 技术可以分为服务器端和客户端两个部分。
服务器端实现
在服务器端，我们需要使用一种支持 SSE 的编程语言或框架，来实现向客户端发送事件信息的功能。以 Node.js 为例，我们可以使用 Express 框架来实现 SSE 功能的路由。
// javascriptcn.com 代码示例
const express = require('express')
const app = express()
// SSE 路由
app.get('/sse', (req, res) => {
// 设置响应头，指定 MIME 类型为 text/event-stream
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
})
// 持续向客户端发送消息
setInterval(() => {
const data = `data: ${new Date().toLocaleString()}\n\n`
res.write(data)
}, 1000)
})
app.listen(3000, () => {
console.log('Server started at http://localhost:3000')
})上面的代码中，我们定义了一个 /sse 路由，该路由会持续向客户端发送当前时间的消息。在响应头中，我们设置了 MIME 类型为 text/event-stream，这是 SSE 技术的标志性响应类型。同时，我们也设置了 Cache-Control 和 Connection 响应头，以确保 SSE 可以稳定地工作。
客户端实现
在客户端，我们需要使用 JavaScript 来实现 SSE 的功能。通常情况下，我们可以使用 EventSource 对象来与服务器建立 SSE 连接。
const eventSource = new EventSource('/sse')
eventSource.onmessage = (event) => {
console.log(event.data)
}上面的代码中，我们使用 EventSource 对象来建立与服务器的 SSE 连接，并监听 onmessage 事件来处理服务器发送的消息。当服务器向客户端发送消息时，我们可以通过 event.data 属性来获取消息内容。
Server-Sent Events 的优势和应用场景
与传统的 Ajax 轮询方式相比，SSE 技术具有以下优势：
- 节省带宽和服务器资源：SSE 只需要建立一次连接，就可以持续地向客户端发送消息，减少了不必要的 HTTP 请求和响应，节省了带宽和服务器资源。
- 更加高效和稳定：SSE 可以使用 HTTP/2 协议，支持多路复用和流控制，可以更加高效和稳定地传输数据。
- 更加实时和响应：SSE 可以实现服务器向客户端主动发送事件信息，可以更加实时和响应地更新数据。
基于 SSE 技术，我们可以实现一些实时的 Web 应用场景，比如在线聊天、股票行情实时更新、实时监控等。
总结
Server-Sent Events 技术是一种基于 HTTP 协议的服务器推送技术，可以让服务器向客户端主动发送事件，实现实时的数据交互和响应。使用 SSE 技术可以提高 Web 应用程序的实时性和响应性，同时也可以减少服务器的负载。在实际应用中，我们可以使用 SSE 技术来实现一些实时的 Web 应用场景，提升用户体验和数据交互效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e123b95b1f8cacd76bb5c