在 Web 开发中，实时通信是一个非常重要的功能。SSE（Server-Sent Events）就是一种用于实现服务器向客户端推送数据的技术。本文将介绍 SSE 的基本原理和用法，并提供相应的示例代码。
SSE 的基本原理
SSE 基于 HTTP 协议，利用了 HTTP 的长连接机制，实现了服务器向客户端推送数据的功能。其原理如下：
- 客户端向服务器发送一个 HTTP 请求，请求的头部包含
Accept: text/event-stream。 - 服务器接收到请求后，会保持连接不断开，然后将数据以一定的格式发送给客户端。
- 客户端接收到数据后，会通过 JavaScript 代码进行处理和展示。
SSE 的数据格式如下：
event: <事件名称> data: <数据> event: <事件名称> data: <数据> ...
其中，event 表示事件名称，data 表示数据。每个事件名称和数据之间用一个空行隔开。事件名称是可选的，如果不需要可以省略。数据可以是任意格式的字符串，包括 JSON、XML 等。
SSE 的用法
SSE 的用法非常简单，只需要在客户端使用 JavaScript 发送一个 SSE 请求即可。下面是一个 SSE 请求的示例代码：
const source = new EventSource('/sse');
source.onmessage = function(event) {
console.log(event.data);
};上面的代码中，EventSource 是 SSE 的核心对象，用于发送 SSE 请求和接收服务器推送的数据。/sse 是服务器端的 SSE 接口地址。source.onmessage 是用于处理服务器推送的数据的回调函数。
在服务器端，需要使用特定的技术实现 SSE 的功能。下面是一个基于 Node.js 和 Express 的 SSE 示例代码：
const express = require('express');
const app = express();
app.get('/sse', function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(function() {
res.write('data: ' + new Date() + '\n\n');
}, 1000);
});
app.listen(3000);上面的代码中，res.writeHead 设置了响应头部，包括 Content-Type、Cache-Control 和 Connection。setInterval 是用于定时向客户端推送数据的函数。
总结
SSE 是一种非常实用的实时通信技术，可以用于实现聊天室、股票行情等实时数据的展示和推送。本文介绍了 SSE 的基本原理和用法，并提供了相应的示例代码，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c0758aadd4f0e0ffa5bfb6