从 WebSocket 到 SSE：实时通信的轻量化演进

在实时 Web 应用开发领域，WebSocket 长期占据主导地位。但当应用场景只需要单向数据推送时，Server-Sent Events (SSE) 提供了更轻量、更优雅的解决方案。

===============================================================================================

为什么需要轻量化实时通信？

想象这些常见需求：

实时数据大屏，持续更新业务指标
新闻网站推送突发新闻
后台系统发送任务完成通知

在这些场景中，数据流本质上是单向的------从服务器到客户端。使用 WebSocket 就如同为了寄送明信片而建立专用高速公路，功能过剩且成本高昂。

认识 Server-Sent Events (SSE)

SSE 允许服务器通过单一、持久的 HTTP 连接向客户端推送数据更新，其魅力在于极简设计。

核心优势

1. 基于标准 HTTP 协议

无需特殊服务器支持
天然兼容现有网络基础设施
协议开销极小

2. 客户端实现极其简单

javascript

ini 复制代码

// 前端实现仅需几行代码
const eventSource = new EventSource('/updates');

eventSource.onmessage = function(event) {
    const data = JSON.parse(event.data);
    updateUI(data);
};

eventSource.onerror = function() {
    console.log('连接错误');
};

技术对比：SSE vs WebSocket

实战演示：实时时钟应用

后端实现 (Node.js + Express)

javascript 复制代码

app.get('/time-stream', (req, res) => {
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive',
        'Access-Control-Allow-Origin': '*'
    });

    // 每秒发送当前时间
    const timer = setInterval(() => {
        const data = {
            time: new Date().toISOString(),
            timestamp: Date.now()
        };
        
        res.write(`data: ${JSON.stringify(data)}\n\n`);
    }, 1000);

    // 客户端断开连接时清理
    req.on('close', () => {
        clearInterval(timer);
    });
});

前端实现

xml 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>实时时钟 - SSE 演示</title>
    <style>
        .clock {
            font-family: 'Courier New', monospace;
            font-size: 24px;
            padding: 20px;
            background: #f5f5f5;
            border-radius: 8px;
            text-align: center;
        }
        .status {
            margin-top: 10px;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="clock" id="timeDisplay">连接中...</div>
    <div class="status" id="status">准备建立 SSE 连接</div>

    <script>
        const timeDisplay = document.getElementById('timeDisplay');
        const statusDisplay = document.getElementById('status');

        function connectSSE() {
            const eventSource = new EventSource('/time-stream');
            
            eventSource.onopen = () => {
                statusDisplay.textContent = '已连接 - ' + new Date().toLocaleTimeString();
                statusDisplay.style.color = 'green';
            };

            eventSource.onmessage = (event) => {
                const data = JSON.parse(event.data);
                timeDisplay.textContent = new Date(data.time).toLocaleString();
            };

            eventSource.onerror = () => {
                statusDisplay.textContent = '连接错误 - ' + new Date().toLocaleTimeString();
                statusDisplay.style.color = 'red';
                
                // 3秒后自动重连
                setTimeout(() => {
                    eventSource.close();
                    connectSSE();
                }, 3000);
            };

            return eventSource;
        }

        // 初始化连接
        let sseConnection = connectSSE();
    </script>
</body>
</html>

生产环境最佳实践

1. 错误处理与重连

kotlin 复制代码

class RobustSSE {
    constructor(url, options = {}) {
        this.url = url;
        this.retryCount = 0;
        this.maxRetries = options.maxRetries || 5;
        this.connect();
    }

    connect() {
        this.eventSource = new EventSource(this.url);
        
        this.eventSource.onopen = () => {
            this.retryCount = 0;
            console.log('SSE 连接成功');
        };

        this.eventSource.onerror = () => {
            if (this.retryCount < this.maxRetries) {
                this.retryCount++;
                setTimeout(() => this.connect(), 1000 * this.retryCount);
            }
        };
    }
}

2. 性能优化建议

合理设置连接超时时间
使用连接池管理多个 SSE 连接
实施消息频率限制
考虑使用 Nginx 代理处理连接

适用场景分析

结论

在技术选型时，我们应该基于实际需求选择最合适的工具。WebSocket 功能强大但复杂，SSE 轻量简洁且高效。

关键决策点：你的应用是否需要客户端向服务器发送实时数据？

如果答案是否定的，SSE 以其原生支持、自动重连和极简实现等优势，将成为提升开发效率和系统稳定性的理想选择。

通过拥抱合适的轻量化技术，我们能够在保证功能完整性的同时，显著降低系统复杂度和维护成本