SSE的GET请求和POST请求

2025-03-28 / 1 阅读 / JS

什么是SSE

SSE（Server-Sent Events）是一种用于实现服务器主动向客户端推送数据的技术，也被称为“事件流”（Event Stream）。它基于 HTTP 协议，利用了其长连接特性，在客户端与服务器之间建立一条持久化连接，并通过这条连接实现服务器向客户端的实时数据推送。

SSE 和 Socket 区别

SSE（Server-Sent Events）和 WebSocket 都是实现服务器向客户端实时推送数据的技术，但它们在某些方面还是有一定的区别。

适用于场景

chatGPT 返回的数据就是使用的SSE 技术

实时数据大屏如果只是需要展示实时的数据可以使用SSE技术而不是非要使用webSocket

Get请求

实现较容易，是H5原生支持。局限是无法发送大量数据。

const sse = new EventSource('http://localhost:8080/sse' )

sse.addEventListener('open', (e) => {
    console.log(e.target)
})
//对应后端nodejs自定义的事件名lol
sse.addEventListener('lol', (e) => {
    console.log(e.data)
})

Post请求

fetch('http://192.168.9.100:8080/chat/stream/1/你是谁', {
    method: "POST",
    body: JSON.stringify({"content": 1}),
    timeout: 0,
    dataType: "text/event-stream",
    headers: {
        "Content-Type": "application/json"
    },
}).then(function (response) {
    // 检查响应是否成功
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    // 返回一个可读流
    return response.body;
}).then(function (response) {
    const reader = response.getReader();
    const textDecoder = new TextDecoder();
    // 读取数据流
    (function read() {
        return reader.read().then(({done, value}) => {
            // 检查是否读取完毕
            if (done) {
                console.log('已传输完毕');
                return;
            }
            // 处理每个数据块
            console.log('收到的数据:', textDecoder.decode(value));
            // 继续读取下一个数据块
            read();
        });
    })();
}).catch(function (error) {
    console.error('Fetch error:', error);
});

尊重作者，转载请注明出处！

版权申明：本文版权归作者所有，未经授权，任何单位或个人不得以任何形式转载、摘编或利用其它方式使用本博客内容。作者保留追究相关法律责任的权利。如需使用博客内容，请与作者联系获得授权。感谢对本文的尊重与支持。

免责声明：本网站所载内容仅供参考，不构成任何专业建议。用户基于本网站内容作出的决策，风险自担。对于因使用本网站内容而产生的任何直接或间接损失，本网站不承担任何责任。请用户审慎判断，理性使用。