SSE接入的具体落地的几种方案

Document

        const eventSource = new EventSource("http://localhost:3000/events");
        eventSource.onmessage = function (e) {
            const data = JSON.parse(e.data);
            console.log("收到消息:", data);
        };
        eventSource.addEventListener("statusUpdate", function (e) {
            console.log("状态更新:", e.data);
        });
        eventSource.onerror = function () {
            console.log("连接错误，尝试重连...");
        };

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

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

        // 每秒发送一次消息
        setInterval(() => {
            res.write(`data: ${JSON.stringify({time: new Date()})}\n\n`);
        }, 1000);
    }
}).listen(3000);

console.log('Server running on http://localhost:3000');XMLHttpRequestXMLHttpRequest (XHR) 是一个 JavaScript API，用于在浏览器和服务器之间传输数据。它允许网页在不刷新整个页面的情况下从服务器获取数据，这是 AJAX (Asynchronous JavaScript and XML) 编程的核心技术。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true); // 异步请求

xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    } else {
        console.error('请求失败:', xhr.status);
    }
};

xhr.onerror = function() {
    console.error('请求出错');
};

xhr.send();接入SSE示例

    Document

        function setupSSEWithXHR(url, callback) {
            const xhr = new XMLHttpRequest();
            xhr.open("GET", url, true);
            xhr.setRequestHeader("Accept", "text/event-stream");

            let buffer = "";

            xhr.onprogress = function () {
                const newData = xhr.responseText.substring(buffer.length);
                buffer = xhr.responseText;

                const lines = newData.split("\n");
                for (const line of lines) {
                    if (line.startsWith("data:")) {
                        const data = line.substring(5).trim();
                        callback(data);
                    }
                }
            };

            xhr.onerror = function () {
                console.error("SSE连接出错");
            };

            xhr.send();

            return {
                close: function () {
                    xhr.abort();
                },
            };
        }

        const sseConnection = setupSSEWithXHR(
            "http://localhost:3000/events",
            function (data) {
                console.log("收到数据:", data);
            }
        );

        // 注意：这里立即关闭了连接，实际使用时可能需要延迟或条件关闭
        sseConnection.close();

FetchFetch API 是现代浏览器提供的用于替代传统 XMLHttpRequest 的网络请求接口，它基于 Promise 设计，提供了更强大、更灵活的功能集。

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));接入SSE示例

    Enhanced SSE Client

    连接状态: 未连接

    连接
    断开

        class SSEClient {
            constructor(url, options = {}) {
                this.url = url;
                this.options = {
                    reconnectInterval: 3000,
                    maxReconnectAttempts: 5,
                    ...options
                };
                this.reconnectAttempts = 0;
                this.isConnected = false;
                this.abortController = null;
            }

            async connect(callback) {
                if (this.isConnected) {
                    console.log('Already connected');
                    return;
                }

                this.abortController = new AbortController();

                try {
                    this.updateStatus('连接中...');

                    const response = await fetch(this.url, {
                        headers: {
                            Accept: "text/event-stream",
                            "Cache-Control": "no-cache"
                        },
                        signal: this.abortController.signal
                    });

                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }

                    if (!response.body) {
                        throw new Error("ReadableStream not supported");
                    }

                    this.isConnected = true;
                    this.reconnectAttempts = 0;
                    this.updateStatus('已连接');

                    const reader = response.body.getReader();
                    const decoder = new TextDecoder();
                    let buffer = "";

                    while (this.isConnected) {
                        const { done, value } = await reader.read();

                        if (done) {
                            console.log("Stream completed");
                            break;
                        }

                        buffer += decoder.decode(value, { stream: true });

                        const lines = buffer.split("\n");
                        buffer = lines.pop();

                        for (const line of lines) {
                            if (line.startsWith("data:")) {
                                const data = line.substring(5).trim();
                                if (data) {
                                    callback(data);
                                }
                            }
                        }
                    }
                } catch (error) {
                    if (error.name === 'AbortError') {
                        console.log('Connection aborted');
                        return;
                    }

                    console.error("SSE Error:", error);
                    this.updateStatus(`连接错误: ${error.message}`);

                    // 自动重连
                    if (this.reconnectAttempts  {
                            this.connect(callback);
                        }, this.options.reconnectInterval);
                    } else {
                        this.updateStatus('连接失败，已达到最大重试次数');
                    }
                } finally {
                    this.isConnected = false;
                }
            }

            disconnect() {
                if (this.abortController) {
                    this.abortController.abort();
                }
                this.isConnected = false;
                this.updateStatus('已断开');
            }

            updateStatus(status) {
                const statusEl = document.getElementById('status');
                if (statusEl) {
                    statusEl.textContent = `连接状态: ${status}`;
                }
            }
        }

        // 使用示例
        const sseClient = new SSEClient("http://localhost:3000/events");

        function handleMessage(data) {
            console.log("Received:", data);

            // 显示消息
            const messagesEl = document.getElementById('messages');
            const messageEl = document.createElement('div');
            messageEl.textContent = `${new Date().toLocaleTimeString()}: ${data}`;
            messagesEl.appendChild(messageEl);
        }

        // 按钮事件
        document.getElementById('connect').addEventListener('click', () => {
            sseCl

const requestTask = wx.request({
    enableChunked: true,
    url: `${baseUrl}${apiPath}`,
    header: {
        ...headers,
        "content-type": "application/json",
    },
    responseType: "arraybuffer",
    method: "POST",
    data: {},
    complete: function (res) {
        console.log(res);
    },
});

requestTask.onChunkReceived((r) => {
    const arrayBuffer = r.data;
    const uint8Array = new Uint8Array(arrayBuffer);
    const data = new TextDecoder("utf-8").decode(uint8Array);

    data.split("data:").forEach((ele) => {
        console.log("ele", ele);
    });
});