前端Server-Sent Events（SSE）请求如何用post

现在非常流行AI问答，AI回答的时候一般都是流式输出，一个字几个字几个字地慢慢加载完，要实现这个效果，我们一般可以用WebSocket和Server-Sent来实现。但是呢，又遇到了一个问题，我们知道get请求是由长度限制，如果是一个POST请求，按照SSE 的标准事不允许 POST请求的。一、npm install @microsoft/fetch-event-source。1. WebSock

qq_36685296

2945人浏览 · 2023-09-06 15:34:22

qq_36685296 · 2023-09-06 15:34:22 发布

现在非常流行AI问答，AI回答的时候一般都是流式输出，一个字几个字几个字地慢慢加载完，要实现这个效果，我们一般可以用WebSocket和Server-Sent来实现。

我会选择使用SSE，为什么不用WebSocket呢？

1. WebSocket是双向通信，这个功能只需要服务器一直向我们输出。

2.SSE是一个http协议的请求，能更好地兼容浏览器。

但是呢，又遇到了一个问题，我们知道get请求是由长度限制，如果是一个POST请求，按照SSE 的标准事不允许 POST请求的。如何解决这个问题呢？

一、npm install @microsoft/fetch-event-source

二、简单封装下

import {fetchEventSource} from '@microsoft/fetch-event-source';
 
const controller = new AbortController()
const signal = controller.signal


export default  function sseRequset(url, obj, successCallback, errCallback){
    console.log(url, obj)
    fetchEventSource(url, {
        method: 'POST',
        signal: signal,
        headers: {  
                    'Content-Type': 'application/json',
                    'Accept': '*/*'
                  },
        body: JSON.stringify( obj)) ,
        onmessage(msg) {
            successCallback(msg)
        },
        onerror(err){
            // 必须抛出错误才会停止
            errCallback(err)
            throw err
        }
    })
}