接触 EventStream

这两天OpenAI让ChatGPT可以免登录使用,然后就想着是否可以免费使用ChatGPT的接口来调用大模型了。根据他持续接收后端数据的行为,起初以为是通过websocket实现,打开Chrome看了下请求,惊呆了,发现他是通过一个POST请求就能持续接收文字数据,Chrome控制台有一个EventStream的Tab,十分好奇,现在就来初步了解下EventStream。

EventStream

EventStream是一种用于在Web应用程序中实现服务器向客户端推送事件的协议。它建立在HTTP之上,并通过在HTTP响应中使用特殊的Content-Type(text/event-stream)和一些预定义的字段来传输事件数据。EventStream允许服务器向客户端持续发送事件数据,而无需客户端发起新的请求。

EventStream协议的特点包括:

  1. 文本格式 :事件以纯文本形式发送,每个事件由一个或多个字段组成,以\n作为分隔符。
  2. 单向传输:通常是服务器向客户端发送事件,客户端通常不会向服务器发送数据。
  3. 持续连接:客户端通过HTTP长连接(Keep-Alive)与服务器建立连接,使得服务器可以在任何时候向客户端发送事件。
  4. 事件类型:每个事件可以有一个可选的事件类型(event),用于标识事件的类型。
  5. 数据字段:每个事件可以包含一个数据字段(data),用于携带事件的具体数据。
  6. 注释字段:事件流中可以包含注释字段(以冒号开头),用于传递一些额外的信息,但客户端通常会忽略它们。

一个简单的EventStream事件如下所示:

makefile 复制代码
event: message
data: Hello, world!

这表示一个类型为"message"的事件,其数据为"Hello, world!"。

EventStream协议本身并不是一种独立的网络协议,而是建立在HTTP之上的一种通信协议,用于实现服务器向客户端推送事件的功能。

ChatGPT这里POST请求是通过HTTP协议发送的,并且事件流的响应也是通过HTTP协议发送的,只是在响应头中指定了Content-Typetext/event-stream,表明这是一个事件流的响应。

值得一提的是ChatGPT发送的POST请求,Content-Type是application/json, 但是Accept是text/event-stream, 我猜是服务器宽松处理,实现灵活地处理逻辑。

服务器如何响应EventStream

以nodejs为例,以下是一个简单的例子:

javascript 复制代码
const http = require('http');

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  // 发送事件
  setInterval(() => {
    res.write(`data: ${JSON.stringify({ message: 'Event message' })}\n\n`);
  }, 1000);
}).listen(3000);

console.log('Server running at http://localhost:3000/');

总结

通过EventStream,我们可以在无需发起websocket的情况下持续从服务器接收数据,可用于服务器端不能立即响应所有数据的场景,例如web终端的命令执行,就可以使用event-stream持续显示服务器端命令行的执行情况。

后续再研究下能否通过服务器免费调用chatgpt接口

相关推荐
冬冬小圆帽19 分钟前
防抖和节流
开发语言·前端·javascript
lydxwj25 分钟前
vue3自定义hooks遇到的问题
前端·javascript·vue.js
野生的程序媛1 小时前
重生之我在学Vue--第8天 Vue 3 UI 框架(Element Plus)
前端·vue.js·ui
前端付杰1 小时前
从Vue源码解锁位运算符:提升代码效率的秘诀
前端·javascript·vue.js
然后就去远行吧1 小时前
小程序 wxml 语法 —— 37 setData() - 修改对象类型数据
android·前端·小程序
用户3203578360022 小时前
高薪运维必备Prometheus监控系统企业级实战(已完结)
前端
黄天才丶2 小时前
高级前端篇-脚手架开发
前端
乐闻x2 小时前
React 如何实现组件懒加载以及懒加载的底层机制
前端·react.js·性能优化·前端框架
小鱼冻干2 小时前
http模块
前端·node.js
悬炫2 小时前
闭包、作用域与作用域链:概念与应用
前端·javascript