SSE 技术实现前后端实时数据同步

sg_knight2025-12-05 15:38

在现代 Web 应用中，实时数据同步是一个非常常见的需求，例如股票行情、消息通知、在线协作工具等。相比 WebSocket，SSE（Server-Sent Events）在实现单向实时推送时更加简单高效，适合服务端向客户端推送频繁更新的数据。

一、SSE 简介

SSE 是 HTML5 提供的一种标准技术，允许服务端通过 HTTP 长连接向浏览器推送消息。它的特点包括：

单向通信：服务端 → 客户端
基于 HTTP 协议：穿透防火墙能力强
自动重连：浏览器会在断开后自动尝试重连
轻量简洁：无需额外协议，易于实现

SSE 使用 EventSource 对象在浏览器端建立连接：

javascript 复制代码

const evtSource = new EventSource('/sse');
evtSource.onmessage = function(event) {
    console.log('接收到消息：', event.data);
};

二、服务端实现示例

下面以 Node.js 为例，实现一个简单 SSE 服务端：

javascript 复制代码

const express = require('express');
const app = express();

app.get('/sse', (req, res) => {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');

    let counter = 0;
    const interval = setInterval(() => {
        counter++;
        res.write(`data: 当前计数 ${counter}\n\n`);
    }, 1000);

    req.on('close', () => {
        clearInterval(interval);
    });
});

app.listen(3000, () => {
    console.log('SSE 服务启动在 3000 端口');
});

三、前后端实时数据同步应用场景

实时消息通知：聊天系统、系统消息
数据监控：服务器状态、股票行情、IoT 设备数据
协作应用：在线编辑、多人协作工具

SSE 适合频繁更新但数据量不大、单向推送场景，如果需要双向通信或者大量数据流，WebSocket 更适合。

四、SSE 优缺点

优点

简单易用，基于 HTTP，无需额外协议
浏览器原生支持，自动重连
适合推送轻量级实时数据

缺点

单向通信，客户端无法通过 SSE 发送数据
对大规模推送场景可能有性能瓶颈

SSE 是一种轻量、易用的实时数据推送方案，对于前后端需要快速同步数据的场景非常实用。掌握它，你就可以轻松实现消息通知、实时数据监控等功能。