HTML5 API：HTML5 Server-Sent Events - 完整教程与代码示例

field: value\n

data: 第一行数据\n
data: 第二行数据\n
\n

event: update\n
data: {"price": 100}\n
id: 42\n
\n

: 这是注释\n
retry: 5000\n
\n

const eventSource = new EventSource(url, options);

// 基本连接
const eventSource = new EventSource('/api/sse');

// 带凭据的连接
const eventSource = new EventSource('/api/sse', {
    withCredentials: true
});

// 接收默认 message 事件
eventSource.onmessage = function(e) {
    console.log('数据:', e.data);
    console.log('事件:', e.type);
    console.log('ID:', e.lastEventId);
};

// 接收自定义事件
eventSource.addEventListener('update', function(e) {
    const data = JSON.parse(e.data);
    console.log('更新:', data);
});

eventSource.addEventListener('notification', function(e) {
    console.log('通知:', e.data);
});

// 监听连接打开
eventSource.onopen = function() {
    console.log('连接已建立');
};

// 监听错误
eventSource.onerror = function(e) {
    console.log('连接错误，状态:', eventSource.readyState);
    // readyState 为 0 表示正在自动重连
    // readyState 为 2 表示连接已关闭
};

// 关闭连接
eventSource.close();

// Node.js 服务端示例
const http = require('http');

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

    let id = 0;

    const interval = setInterval(() => {
        id++;
        res.write('id: ' + id + '\n');
        res.write('data: ' + JSON.stringify({ time: new Date().toISOString(), value: Math.random() }) + '\n\n');
    }, 1000);

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

// 合理管理 SSE 连接生命周期
let eventSource = null;

function connectSSE() {
    if (eventSource) {
        eventSource.close();
    }

    eventSource = new EventSource('/api/sse');

    eventSource.onopen = function() {
        console.log('SSE 连接已建立');
    };

    eventSource.onerror = function() {
        if (eventSource.readyState === EventSource.CLOSED) {
            console.log('SSE 连接已关闭');
        }
        // readyState 为 CONNECTING 时会自动重连
    };

    eventSource.onmessage = function(e) {
        console.log('收到消息:', e.data);
    };
}

function disconnectSSE() {
    if (eventSource) {
        eventSource.close();
        eventSource = null;
    }
}

// 页面隐藏时断开，可见时重连
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        disconnectSSE();
    } else {
        connectSSE();
    }
});

// 利用 Last-Event-ID 实现断点续传
const eventSource = new EventSource('/api/sse');

eventSource.onmessage = function(e) {
    // e.lastEventId 包含服务器发送的消息 ID
    // 断线重连时，浏览器会自动在请求头中发送 Last-Event-ID
    console.log('消息 ID:', e.lastEventId);
    console.log('数据:', e.data);
};

// 监听不同类型的事件
const eventSource = new EventSource('/api/sse');

eventSource.addEventListener('price', function(e) {
    const data = JSON.parse(e.data);
    updatePriceDisplay(data);
});

eventSource.addEventListener('notification', function(e) {
    showNotification(e.data);
});

eventSource.addEventListener('heartbeat', function(e) {
    console.log('心跳:', e.data);
});

// 推荐：封装 SSE 管理类
class SSEClient {
    constructor(url, options = {}) {
        this.url = url;
        this.options = options;
        this.eventSource = null;
        this.listeners = new Map();
        this.reconnectAttempts = 0;
        this.maxReconnectAttempts = options.maxReconnectAttempts || 5;
    }

    connect() {
        if (this.eventSource) {
            this.disconnect();
        }

        this.eventSource = new EventSource(this.url, {
            withCredentials: this.options.withCredentials || false
        });

        this.eventSource.onopen = () => {
            this.reconnectAttempts = 0;
            this._emit('open');
        };

        this.eventSource.onerror = () => {
            if (this.eventSource.readyState === EventSource.CLOSED) {
                this._emit('close');
            } else if (this.eventSource.readyState === EventSource.CONNECTING) {
                this.reconnectAttempts++;
                if (this.reconnectAttempts > this.maxReconnectAttempts) {
                    this.disconnect();
                    this._emit('maxReconnect');
                } else {
                    this._emit('reconnecting', { attempt: this.reconnectAttempts });
                }
            }
        };

        this.eventSource.onmessage = (e) => {
            this._emit('message', {
                data: e.data,
                lastEventId: e.lastEventId,
                type: e.type
            });
        };

        // 注册自定义事件
        if (this.options.events) {
            Object.entries(this.options.events).forEach(([event, handler]) => {
                this.on(event, handler);
            });
        }
    }

    on(event, handler) {
        if (!this.listeners.has(event)) {
            this.listeners.set(event, []);
            if (this.eventSource && event !== 'open' && event !== 'close' &&
                event !== 'message' && event !== 'reconnecting' && event !== 'maxReconnect') {
                this.eventSource.addEventListener(event, (e) => {
                    this._emit(event, { data: e.data, lastEventId: e.lastEventId });
                });
            }
        }
        this.listeners.get(event).push(handler);
    }

    off(event, handler) {
        if (this.listeners.has(event)) {
            const handlers = this.listeners.get(event);
            const index = handlers.indexOf(handler);
            if (index > -1) handlers.splice(index, 1);
        }
    }

    _emit(event, data) {
        if (this.listeners.has(event)) {
            this.listeners.get(event).forEach(handler => handler(data));
        }
    }

    disconnect() {
        if (this.eventSource) {
            this.eventSource.close();
            this.eventSource = null;
        }
        this._emit('close');
    }
}

// 使用示例
const sse = new SSEClient('/api/sse', {
    withCredentials: true,
    maxReconnectAttempts: 10,
    events: {
        update: (data) => console.log('更新:', data),
        alert: (data) => console.log('告警:', data)
    }
});

sse.on('open', () => console.log('已连接'));
sse.on('message', (data) => console.log('消息:', data));
sse.on('reconnecting', (data) => console.log('重连中，第', data.attempt, '次'));

sse.connect();

function createEventSource(url) {
    if (typeof EventSource !== 'undefined') {
        return new EventSource(url);
    }
    // 降级为轮询
    return createPollingFallback(url);
}

function createPollingFallback(url) {
    let lastId = 0;
    const interval = setInterval(async () => {
        const response = await fetch(url + '?lastId=' + lastId);
        const data = await response.json();
        if (data.id > lastId) {
            lastId = data.id;
            // 触发回调
        }
    }, 3000);

    return {
        close: () => clearInterval(interval)
    };
}