js 使用fetch接收eventstream时如果接收到的stream不是连续的需要把stream转为json逐个匹配类型是json为true则逐个打印到控制台不能重复
打印。
以下是使用fetch接收eventstream并转换为json并逐个打印的示例代码:
const url = 'YOUR_EVENT_STREAM_URL';
fetch(url, { headers: { 'Accept': 'text/event-stream' } })
.then(response => {
const reader = response.body.getReader();
let buffer = '';
let jsonBuffer = '';
const processBuffer = () => {
while (buffer.includes('\n\n')) {
const index = buffer.indexOf('\n\n');
const event = buffer.slice(0, index);
buffer = buffer.slice(index + 2);
if (event.startsWith('data:')) {
const data = event.slice(5);
jsonBuffer += data;
if (jsonBuffer.endsWith('\n')) {
jsonBuffer = jsonBuffer.slice(0, -1);
try {
const json = JSON.parse(jsonBuffer);
if (typeof json === 'object') {
console.log(json);
}
} catch (error) {
console.error(error);
}
jsonBuffer = '';
}
}
}
};
const read = ({ done, value }) => {
if (done) {
console.log('Stream closed');
return;
}
buffer += new TextDecoder('utf-8').decode(value);
processBuffer();
return reader.read().then(read);
};
return reader.read().then(read);
})
.catch(error => console.error(error));
解释一下代码:
-
发送fetch请求并指定Accept头为text/event-stream。
-
获取响应的body reader并定义一个buffer和jsonBuffer用于缓存数据。
-
定义一个processBuffer函数用于处理缓存的数据。如果缓存的数据包含了两个连续的换行符,则表示一个事件已经结束,提取出事件内容并将其放入jsonBuffer中。
-
如果事件以data:开头,则表示这是一个数据事件,将事件内容追加到jsonBuffer中。
-
如果jsonBuffer以换行符结尾,则表示jsonBuffer中已经包含了一个完整的JSON对象,尝试将其解析为JSON对象并打印到控制台。
-
在catch块中处理JSON解析错误。
-
在read函数中读取响应body的数据并调用processBuffer函数处理缓存的数据。
-
在read函数中返回一个Promise以继续读取body的数据。
-
在catch块中处理错误。
原文地址: http://www.cveoy.top/t/topic/6qL 著作权归作者所有。请勿转载和采集!