chatGPT前端流式輸出js實現(xiàn)三種方法—fetch、SSE、websocket
項目需要接入chatgpt提供的api，后端返回流式的字符，前端接收并實時顯示。在JavaScript中，使用Stream流通常指的是處理數(shù)據(jù)流的一種方式。Stream可以是可讀的、可寫的、或者既可讀又可寫的。它們允許數(shù)據(jù)被處理成塊，而不是一次性處理整個數(shù)據(jù)集，這對于處理大量數(shù)據(jù)或者來自網(wǎng)絡(luò)請求的數(shù)據(jù)非常有用。
一、fetch實現(xiàn)stream
fetch 本身不直接支持流式輸出，但你可以使用 ReadableStream 和 TextDecoder 等 Web Streams API 來實現(xiàn)類似的效果。
function streamOutput(msg) {
// 發(fā)送 POST 請求
fetch('url', {
method:"POST",
body:JSON.stringify({ "content": msg}),
timeout: 0,
dataType:"text/event-stream",
headers:{
"Content-Type":"application/json"
},
}).then(response => {
// 檢查響應(yīng)是否成功
if (!response.ok) {
throw new Error('Network response was not ok');
}
// 返回一個可讀流
return response.body;
}).then(body => {
disableLoading();
const reader = body.getReader();
// 讀取數(shù)據(jù)流
function read() {
return reader.read().then(({ done, value }) => {
// 檢查是否讀取完畢
if (done) {
console.log('已傳輸完畢');
return;
}
// 處理每個數(shù)據(jù)塊
console.log('收到的數(shù)據(jù):', value);
// 繼續(xù)讀取下一個數(shù)據(jù)塊
read();
});
}
// 開始讀取數(shù)據(jù)流
read();
}).catch(error => {console.error('Fetch error:', error);});
}二、SSE實現(xiàn)（只支持GET請求）
在 SSE 中，瀏覽器通過發(fā)送 HTTP GET 請求到服務(wù)器上特定的 SSE 端點（endpoint），然后服務(wù)器通過該連接發(fā)送事件（event）和相關(guān)數(shù)據(jù)到客戶端，故SSE 主要使用 GET 請求。EventSource不支持發(fā)送請求頭，如果需要發(fā)送請求頭則要用EventSourcePolyfill。
在使用EventSourcePolyfill前需要引入 Server-Sent Events (SSE) 的 JavaScript 庫。
引入方式一：npm或yarn
npm install event-source-polyfill
yarn add event-source-polyfill
在js文件中引入
import EventSource from 'event-source-polyfill';
引入方式二：eventsource
下載倉庫：https://github.com/Yaffle/EventSource
注意：進入src文件下載所需eventsource.js或eventsource.min.js文件，引入時注意路徑，如果是jsp文件用絕對路徑
<script type="text/javascript" src="/path/eventsource.js"></script>
function streamOutput() {
// 創(chuàng)建 EventSourcePolyfill連接，如果不需要發(fā)送請求頭可以使用EventSource即可
const eventSource = new EventSourcePolyfill('url',{
headers:{
"Content-Type":"application/json"
}
});
// 處理 SSE 消息
eventSource.onmessage = function (event) {
console.log('接收SSE的消息:', event.data);
// 在這里處理接收到的流式數(shù)據(jù)
};
// 處理 SSE 連接打開事件
eventSource.onopen = function (event) {
console.log('SSE連接完成:', event);
};
// 處理 SSE 連接關(guān)閉事件
eventSource.onclose = function (event) {
console.log('SSE連接關(guān)閉:', event);
};
// 處理 SSE 錯誤事件
eventSource.onerror = function (error) {
console.error('SSE EventSource error:', error);
};
}三、websocket實現(xiàn)（url必須為ws或wss開頭的接口）
WebSocket 是一種全雙工通信協(xié)議，允許客戶端和服務(wù)器之間進行實時的雙向通信，并且支持POST請求。但是值得注意的是WebSocket只支持ws或wss開頭的接口。WebSocket 握手時并沒有提供直接設(shè)置請求頭的標準方法，它的握手階段是由瀏覽器自動處理的，因此你不能直接在創(chuàng)建 WebSocket 連接時設(shè)置請求頭，但可以通過通過 URL 參數(shù)傳遞的方式傳遞信息。
function streamOutput(msg) {
const socket = new WebSocket('url');
// 連接打開時觸發(fā)
socket.addEventListener('open', event => {
console.log('WebSocket連接完成:', event);
// 處理接收到的消息
socket.addEventListener('message', event => {
console.log('接收消息:', event.data);
// 在這里處理接收到的流式數(shù)據(jù)
});
});
// 連接關(guān)閉時觸發(fā)
socket.addEventListener('close', event => {
console.log('WebSocket連接關(guān)閉:', event);
});
// 處理錯誤時觸發(fā)
socket.addEventListener('error', error => {
console.error('WebSocket error:', error);
});
}四、總結(jié)
相關(guān)文章
這篇文章主要介紹了java設(shè)計模式中觀察者模式，全文通過舉例子及代碼的形式進行了一個簡單的介紹，希望大家能夠理解并且學習到其中知識2021-08-08
javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(三)情景對話中仿打字機輸出文字
前兩講我告訴了大家如何使人物移動，那么今天我們就來看看如何實現(xiàn)仿《三國志曹操傳》人物情景對話,感興趣的朋友可以了解下，希望本文對你有所幫助2013-01-01
fckeditor部署到weblogic出現(xiàn)xml無法讀取及樣式不能顯示問題的解決方法
這篇文章主要介紹了fckeditor部署到weblogic出現(xiàn)xml無法讀取及樣式不能顯示問題的解決方法,分析了問題出現(xiàn)的原因及相關(guān)配置文件設(shè)置技巧,需要的朋友可以參考下2017-03-03
D3.js支持從外部讀取數(shù)據(jù)進行圖形交互(Loading External Resources)，支持的格式有CSV、txt、Html、tsv、xml文本文件和JSON XML數(shù)據(jù)結(jié)構(gòu)，下面這篇文章主要給大家介紹了D3.js中CSV表格文件讀取的相關(guān)資料，需要的朋友可以參考下。2017-06-06
UUID是一種由算法生成的二進制長度為128位的數(shù)字標識符，格式為“xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”。本文總結(jié)了五個JS生成UUID的方法，感興趣的可以了解一下2022-06-06
使用json-server簡單完成CRUD模擬后臺數(shù)據(jù)的方法
這篇文章主要介紹了使用json-server簡單完成CRUD模擬后臺數(shù)據(jù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
麥雞的TAB切換功能代碼2008-10-10
