現(xiàn)在非常流行AI問(wèn)答，AI回答的時(shí)候一般都是流式輸出，一個(gè)字幾個(gè)字幾個(gè)字地慢慢加載完，要實(shí)現(xiàn)這個(gè)效果，我們一般可以用WebSocket和Server-Sent來(lái)實(shí)現(xiàn)。
我會(huì)選擇使用SSE，為什么不用WebSocket呢？
1.?WebSocket是雙向通信，這個(gè)功能只需要服務(wù)器一直向我們輸出。
2.SSE是一個(gè)http協(xié)議的請(qǐng)求，能更好地兼容瀏覽器。
但是呢，又遇到了一個(gè)問(wèn)題，我們知道get請(qǐng)求是由長(zhǎng)度限制，如果是一個(gè)POST請(qǐng)求，按照SSE 的標(biāo)準(zhǔn)事不允許 POST請(qǐng)求的。如何解決這個(gè)問(wèn)題呢？
一、npm install @microsoft/fetch-event-source文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-788340.html
二、 簡(jiǎn)單封裝下文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-788340.html
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){
// 必須拋出錯(cuò)誤才會(huì)停止
errCallback(err)
throw err
}
})
}到了這里，關(guān)于前端Server-Sent Events（SSE）請(qǐng)求如何用post的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![SSE[Server-Sent Events]實(shí)現(xiàn)頁(yè)面流式數(shù)據(jù)輸出(模擬ChatGPT流式輸出)](https://imgs.yssmx.com/Uploads/2024/01/813587-1.png)
