JavaScript 如何做 SSE
在网页和后端交互中，我们经常遇到需要“实时更新内容”的场景——比如股票价格实时跳动、直播平台的在线人数变化、物流快递的位置跟踪。如果用传统的HTTP请求，就得不断刷新页面或者手动点击“刷新”，不仅麻烦还浪费资源。这时候SSE就派上用场了，它能让后端主动把新数据推送给前端，不用前端反复请求。那JavaScript具体怎么实现SSE呢？
先搞懂SSE的核心逻辑
SSE的全称是“服务器发送事件”，简单说就是“前端开一个专属通道，后端一有新消息就往这个通道里发，前端自动接收，全程只需要建立一次连接”。举个生活化的例子：这就像你给小区快递驿站留了“专属取件通道”，不用你每天跑过去问有没有包裹，驿站一有你的快递就直接往这个通道里放，你在通道入口等着就行，不用反复跑。
和前端常用的WebSocket不同，SSE是单工通道，只能后端发前端收，适合“后端主动推数据、前端被动接收”的场景；而且SSE天生支持断线重连，不用额外写代码处理断开后的重连，比WebSocket实现起来更简单，非常适合刚才说的实时消息、数据更新这类轻量场景。
JavaScript实现SSE的3个核心步骤
实现SSE其实只有3个简单步骤，全程用浏览器自带的API，不用装任何额外插件，新手也能快速上手。
第一步：建立SSE连接
前端只需要用EventSource这个内置对象，传入后端的SSE接口地址，就能建立连接了。比如你要接收后端的股票价格更新，代码就可以这么写：
`javascript
// 连接后端的SSE接口，地址是后端提前写好的'/api/stock-price'
const stockSSE = new EventSource('/api/stock-price');
`
就像你刚才给驿站留了专属通道，这行代码就是让浏览器和后端的那个“数据通道”正式连上，只要连接成功，后端发的消息都会自动被这个stockSSE对象接住。
第二步：监听后端发来的消息
通道连好了，接下来就是等着收后端的新数据。EventSource提供了专门的message事件，只要后端一推数据，前端就会触发这个事件，我们只需要给它加监听函数就行。比如要把收到的股票价格显示在页面上，代码可以这么写：
`javascript
// 监听SSE传来的消息
stockSSE.addEventListener('message', (event) => {
// event.data就是后端发来的具体数据，这里假设是JSON格式的股价
const stockData = JSON.parse(event.data);
// 把数据渲染到页面上
document.getElementById('stock-price').textContent = stockData.price;
});
`
还是用刚才的例子，这就像你在通道入口等着，驿站一放新快递，你就立刻拿过来拆，把里面的股价信息贴到页面上。
第三步：处理连接的异常和关闭
虽然SSE自带断线重连功能，但有时候也会遇到连接失败的情况，比如后端重启、网络断了，这时候我们可以加个error事件的监听，给用户提示，或者做自定义处理。另外，如果你不想再接收数据了，比如用户关掉了股票页面，一定要手动关闭SSE连接，避免浪费资源：
`javascript
// 监听连接错误，给用户提示
stockSSE.addEventListener('error', (error) => {
console.log('SSE连接出错啦：', error);
// 可以给页面加个提示，比如“实时数据连接异常，请稍后刷新”
});
// 手动关闭连接，比如页面卸载时
window.addEventListener('beforeunload', () => {
stockSSE.close();
});
`
这就像你不用快递了，主动把通道关了，别让驿站一直给你留着位置，也避免后台多余的资源消耗。
简单测试SSE是否正常工作
写完前端代码后，可以先写个简单的后端接口测试。比如用Node.js的Express框架写个模拟SSE接口，每隔1秒发一次模拟股价：
`javascript
// 后端示例（Node.js + Express）
app.get('/api/stock-price', (req, res) => {
// 设置SSE必须的响应头，告诉浏览器这是SSE数据
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
// 每隔1秒发一次数据
const interval = setInterval(() => {
const randomPrice = (100 + Math.random() * 20).toFixed(2);
// SSE的数据格式要求：data: + 数据内容 + 两个换行
res.write(data: {"price": "${randomPrice}"}\n\n);
}, 1000);
// 客户端关闭连接时，清除定时器
req.on('close', () => clearInterval(interval));
});
`
把前后端代码跑起来，打开前端页面，就能看到股价每秒自动更新，不用手动刷新，这就说明SSE实现成功了。
总的来说，JavaScript做SSE核心就是用自带的EventSource对象，简单几步就能实现后端主动推数据，特别适合轻量级的实时数据场景，比WebSocket更轻量、实现更简单，是前端实现实时交互的好用工具。