随着 Web 技术的不断发展，越来越多的应用需要实现实时通信。传统的轮询技术明显存在性能问题，WebSocket 技术虽然弥补了这个问题，但使用起来更为复杂。而 SSE（Server-Sent Events）服务端推送技术则提供了一种轻量级的、简单易用的实时通信解决方案。本文将对 SSE 技术进行深入剖析，包括其原理、应用场景、使用方法和示例代码等内容。
原理
SSE 技术基于 HTTP 协议，利用 HTTP/1.1 中的持久连接技术实现服务端向客户端实时推送数据。客户端通过建立一个长连接，然后等待服务端推送数据。服务端可以随时向客户端发送数据，每次发送的数据格式是一段以“data: ”开头的 UTF-8 编码的文本。客户端接收到数据后，解析其中的文本信息并进行相应处理。
应用场景
SSE 技术可以实现一些实时性要求不高但需要及时更新的场景，比如股票行情、天气预报、在线聊天等。与 WebSocket 技术相比，SSE 技术实现更为简单，并且兼容性更广，能够在现有的 Web 架构中灵活使用。
使用方法
在服务端，需要设置 HTTP 头信息，包括 MIME 类型和缓存控制等。在 Node.js 中可以使用 res.writeHead() 方法设置头信息。同时需要向客户端发送数据，数据格式可以是任意的文本，但需要以“data: ”开头并以“\n\n”结束。在 Node.js 中可以使用 res.write() 方法发送数据。
在客户端，需要创建一个 EventSource 对象，并监听 message 事件。当服务发送事件时，该事件会被触发，同时可以通过 event.data 属性获取服务端发送的数据。需要注意的是，SSE 对象只能与同域名下的服务器通信。
示例代码如下：
// 服务端代码
const http = require('http')
const fs = require('fs')
const path = require('path')
const server = http.createServer((req, res) => {
if (req.url === '/sse') {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
})
setInterval(() => {
const now = new Date()
res.write(`data: ${now.toLocaleTimeString()}\n\n`)
}, 1000)
} else {
res.writeHead(200, { 'Content-Type': 'text/html' })
const html = fs.readFileSync(path.join(__dirname, 'index.html'), 'utf-8')
res.end(html)
}
})
server.listen(8000, () => {
console.log('SSE server is running at http://localhost:8000')
})
// 客户端代码
const es = new EventSource('/sse')
es.addEventListener('message', (event) => {
console.log(`Received: ${event.data}`)
})总结
SSE 技术是一种轻量级的、简单易用的实时通信解决方案，可以实现一些实时性要求不高但需要及时更新的场景。同时，与 WebSocket 技术相比，SSE 技术实现更为简单，并且兼容性更广，能够在现有的 Web 架构中灵活使用。在使用 SSE 技术时需要注意头信息和数据格式，同时需要在客户端进行监听事件并处理数据。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65afed4badd4f0e0ff962af6