接触 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接口

相关推荐
知识分享小能手1 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲1 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell2 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮3 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel4 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip4 小时前
JavaScript事件流
前端·javascript
赵得C4 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG5 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904275 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路5 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架