如何使用 SSE 实现后台主动推送消息到前端页面
在前端开发的日常工作中，我们经常需要向页面中主动推送消息。通常，我们采用轮询的方式来实现消息的推送。但是，轮询的方式在一定程度上会增加服务器负载，效率较低，而使用 SSE （Server-Sent Events） 可以更加高效、方便地实现后台主动推送消息到前端页面。本文将详细介绍 SSE 原理以及如何使用 SSE 实现后台主动推送消息到前端页面。
一、SSE 原理
SSE 是一种服务器向客户端推送事件的方式。相较于传统的轮询方式，SSE 可以更加高效、方便地实现数据的推送。SSE 的实现原理如下：
首先，客户端通过监听一个特定的 URL（一般是 /eventsource 或 /sse）来建立与服务器的连接。
连接建立成功后，服务器向客户端发送一个 HTTP 响应头，头信息包含 Content-Type 和 Cache-Control 两个字段，其中 Content-Type 的值为 text/event-stream ，而 Cache-Control 的值为 no-cache 。
服务器通过不断向客户端发送数据流的方式，将需要推送到前端的消息发送给客户端。数据以一行一行的字符串的形式发送，每行字符串都以 \n 结尾。
客户端通过 addEventListener 方法监听数据流，当有新的数据到来时，就会触发 message 事件，从而实现数据的更新。
二、SSE 使用方法
在使用 SSE 实现后台主动推送消息到前端页面时，需要按照以下步骤进行操作：
- 建立连接
在客户端中，可以通过以下方式建立与服务器的连接：
const eventSource = new EventSource('/eventsource')其中，/eventsource 是服务器端用来监听事件的 URL，可以根据具体情况进行修改。
- 接收数据
接收数据的操作也很简单，只需要使用 addEventListener 方法监听 message 事件即可：
eventSource.addEventListener('message', (event) => {
console.log(`Received event: ${event.data}`)
})其中，event.data 表示接收到的数据，可以根据实际情况进行处理。
- 发送数据
在服务器端，可以根据需要随时向客户端发送数据，数据格式如下：
res.write(`data: ${JSON.stringify(data)}\n\n`)其中，data 表示需要发送的数据，可以根据实际情况进行处理。注意，每个数据以一行一行的字符串的形式发送，每行字符串都以 \n 结尾。
- 关闭连接
当不再需要使用 SSE 时，可以通过关闭连接来释放资源：
eventSource.close()
三、示例代码
下面是一个使用 SSE 实现后台主动推送消息到前端页面的示例代码：
服务器端代码：
// javascriptcn.com 代码示例
const http = require('http')
// 建立 HTTP 服务器
const server = http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
})
// 模拟每秒向客户端发送一个事件
setInterval(() => {
const data = {
time: new Date().toLocaleTimeString(),
message: 'Hello, SSE!'
}
res.write(`data: ${JSON.stringify(data)}\n\n`)
}, 1000)
})
server.listen(8080, () => {
console.log('Server is running at http://localhost:8080')
})客户端代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSE Example</title>
</head>
<body>
<h1>Server-Sent Events Example</h1>
<div id="messages"></div>
<script>
const eventSource = new EventSource('/eventsource')
eventSource.addEventListener('message', (event) => {
const data = JSON.parse(event.data)
const message = `Time: ${data.time}, Message: ${data.message}`
const messages = document.getElementById('messages')
messages.innerHTML += `<p>${message}</p>`
})
eventSource.addEventListener('open', (event) => {
console.log('Connection established.')
})
eventSource.addEventListener('error', (event) => {
console.error('Error occurred: ', event)
})
</script>
</body>
</html>在运行代码后，我们可以看到每秒钟会向客户端推送一个消息，客户端也能够实时接收到推送的消息。
四、总结
通过本文的介绍，我们可以发现，使用 SSE 实现后台主动推送消息到前端页面是一种高效、方便且灵活的方式。相较于轮询方式，SSE 可以降低服务器负载，提高效率。同时，SSE 也非常易于使用，只需要简单的几个步骤就可以实现。因此，在实际项目中，我们可以考虑使用 SSE 来实现后台主动推送消息到前端页面。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654d9f287d4982a6eb70b2c6