实战代码GitHub代码:chatgpt-google-extension 该代码以Chrome 插件的实用案例讲解了 fetch-sse 的用法,之前这个技术被用得很少,大家基本上都直接用 webs
实战代码GitHub代码:chatgpt-google-extension
该代码以Chrome 插件的实用案例讲解了 fetch-sse 的用法,之前这个技术被用得很少,大家基本上都直接用 websocket 了
谷歌插件:chatgpt-google-extension
fetch()
和 EventSource
都是用于实现服务器推送事件(Server-Sent Events,SSE)的技术,但它们在实现上有一些不同。下面是它们的优缺点:
fetch()
的优点:
更灵活的数据处理:使用 fetch()
方法可以更灵活地处理 SSE 数据流,因为我们可以使用 javascript 中的任何方法来处理和解析从 SSE 服务器端点接收的数据流。例如,我们可以使用 TextDecoder
对象来解码数据流并将其转换为字符串,然后使用 split()
方法将其拆分为多个行。
更高的兼容性:fetch()
方法是一个标准的 WEB api,支持所有主流的现代浏览器。因此,使用 fetch()
方法可以获得更高的兼容性。
更好的控制权:使用 fetch()
方法可以更好地控制 SSE 数据流的读取和处理。我们可以手动控制 SSE 数据流的读取进度,而不是依赖于 EventSource
对象的自动控制。
fetch()
的缺点:
需要手动解析数据:使用 fetch()
方法需要手动解析从 SSE 服务器端点接收的数据流,这需要一些额外的代码和技术。
无法自动重连:使用 fetch()
方法无法自动重连 SSE 服务器端点。如果与 SSE 服务器端点的连接断开,我们需要手动重新连接。
无法处理错误:使用 fetch()
方法无法处理 SSE 数据流的错误。如果发生错误,我们需要手动处理并调试代码。
EventSource
的优点:
自动重连:EventSource
对象提供了自动重连的功能。如果与 SSE 服务器端点的连接断开,EventSource
对象会自动尝试重新连接,并恢复之前的数据流。
自动解析数据:EventSource
对象自动解析从 SSE 服务器端点接收的数据流,并将其转换为 JavaScript 对象,方便我们进行处理和操作。
错误处理:EventSource
对象提供了错误处理的功能。如果发生错误,EventSource
对象会触发错误事件,并提供错误信息,方便我们进行调试和处理。
EventSource
的缺点:
低兼容性:EventSource
对象是一个 HTML5 新增的 Web API,可能不被所有的浏览器所支持。一些旧版的浏览器可能不支持 EventSource
对象。
可能会出现内存泄漏:使用 EventSource
对象可能会出现内存泄漏的问题,特别是在长时间运行的情况下。因此,我们需要注意释放 EventSource
对象。
综上所述,fetch()
方法和 EventSource
对象都有各自的优缺点。如果你需要更灵活的数据处理
给出两者的实现案例
以下是使用 fetch()
方法和 EventSource
对象实现 SSE 的代码示例:
使用 fetch()
方法:
const endpoint = 'Http://example.com/sse';fetch(endpoint, { headers: { 'Accept': 'text/event-stream' },}).then(response => { const reader = response.body.getReader(); let buffer = ''; reader.read().then(function process({ done, value }) { if (done) { console.log('Stream closed'); return; } buffer += new TextDecoder('utf-8').decode(value); const lines = buffer.split('\n'); buffer = lines.pop(); lines.forEach(line => { console.log(line); }); // Continue reading return reader.read().then(process); });}).catch(error => { console.error(error);});
使用 EventSource
对象:
const endpoint = 'http://example.com/sse';const eventSource = new EventSource(endpoint);eventSource.addEventListener('open', event => { console.log('Connected to SSE server');});eventSource.addEventListener('message', event => { console.log(event.data);});eventSource.addEventListener('error', error => { console.error(error);});setTimeout(() => { eventSource.close(); console.log('Connection closed');}, 60000);
这两个代码示例分别使用了 fetch()
方法和 EventSource
对象来实现 SSE 技术。使用 fetch()
方法需要手动解析从 SSE 服务器端点接收的数据流,而使用 EventSource
对象则自动解析数据。使用 fetch()
方法需要手动控制 SSE 数据流的读取进度,而使用 EventSource
对象则自动控制。两种方式都可以实现 SSE,具体使用哪种方式取决于你的具体需求和场景。
好的,以下是整合在一起的代码示例:
const endpoint = 'http://example.com/sse';function connectSSE() { fetch(endpoint, { headers: { 'Accept': 'text/event-stream' }, }).then(response => { if (response.status !== 200) { // 报错 throw new Error(`Server responded with ${response.status}`); } const reader = response.body.getReader(); let buffer = ''; reader.read().then(function process({ done, value }) { if (done) { console.log('Stream closed'); // 自动重连 setTimeout(connectSSE, 1000); return; } buffer += new TextDecoder('utf-8').decode(value); const lines = buffer.split('\n'); buffer = lines.pop(); lines.forEach(line => { // 解析 SSE 数据 const data = parseSSEData(line); console.log(data); }); // Continue reading return reader.read().then(process); }).catch(error => { console.error(error); // 自动重连 setTimeout(connectSSE, 1000); }); }).catch(error => { console.error(error); // 自动重连 setTimeout(connectSSE, 1000); });}connectSSE();function parseSSEData(line) { const data = {}; const fields = line.split(':'); for (let i = 0; i < fields.length; i++) { const field = fields[i].trim(); if (i === 0) { // Event Type data.type = field; } else if (field.indexOf('data') === 0) { // Event Data data.data = field.substr(5); } else if (field.indexOf('id') === 0) { // Event ID data.id = field.substr(3); } else if (field.indexOf('retry') === 0) { // Retry Timeout data.retry = field.substr(6); } } return data;}
来源地址:https://blog.csdn.net/wangsenling/article/details/130490769
--结束END--
本文标题: ChatGPT API SSE(服务器推送技术)和 Fetch 请求 Accept: text/event-stream 标头案例
本文链接: https://www.lsjlt.com/news/384302.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-23
2024-05-22
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-13
2024-05-13
2024-05-11
2024-05-11
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
一口价域名售卖能注册吗?域名是网站的标识,简短且易于记忆,为在线用户提供了访问我们网站的简单路径。一口价是在域名交易中一种常见的模式,而这种通常是针对已经被注册的域名转售给其他人的一种方式。
一口价域名买卖的过程通常包括以下几个步骤:
1.寻找:买家需要在域名售卖平台上找到心仪的一口价域名。平台通常会为每个可售的域名提供详细的描述,包括价格、年龄、流
443px" 443px) https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294.jpg https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294-768x413.jpg 域名售卖 域名一口价售卖 游戏音频 赋值/切片 框架优势 评估指南 项目规模
0