共计 4632 个字符，预计需要花费 12 分钟才能阅读完成。
我的项目地址：github.com/ltyzzzxxx/g…
欢送大家 Star、提出 PR，一起高兴地用 GPT Terminal 游玩吧～
前言
明天来给大家整点 ChatGPT 的干货！想必大家用过 ChatGPT 都晓得，它是一个练习时长两年半，喜爱唱 …（油饼食不食！）
它在响应咱们给它发送音讯的时候，并不是将一整个音讯间接返回给咱们，而是流式传输，如同打字机成果个别，逐步地将整个内容出现给咱们。（市面上的 GPT 个别都是如此）
这样的益处有两个，一方面是 GPT 一边响应一边返回后果，流式输入，响应效率大大晋升；另一方面是显著晋升了用户体验，给咱们的感觉就像是实在的对话一样，GPT 仿佛在思考问题的答案。
说到这里，不得不拜服 Open AI 这家公司。不仅仅实现了人工智能的冲破，掀起了第四次科技反动，而且它在做产品方面，也有很多值得咱们深刻学习与思考的中央。正如陆奇传授在前段时间一次演讲上说的个别：
OpenAI 所代表的是全新的组织、全新的能力，他们所做的所有是要既能做科研、又能写代码、又能做产品，这些能力是分不开的。
心愿能给大家在将来的学习与工作中带来一些新的思考维度～
啊仿佛又跑题了，话不多说，咱们迅速进入正题！
Server-Sent Events
要想揭开 ChatGPT 实现流式传输的秘诀，那么肯定离不开这个技术 —— Server-Sent Events
它是一种服务端被动向客户端推送的技术，这一点是不是与 Websocket 有些相似，然而 SSE 并不反对客户端向服务端发送音讯，即 SSE 为单工通信。
通俗易懂一些了解就是，服务端与客户端建设了 长连贯 ，服务端源源不断地向客户端推送音讯。服务端就相当于河流的上游，客户端就相当于河流的上游，水往低处流，这就是 SSE 的流式传输。
大家简略理解一下即可，咱们还是须要在实战中深刻理解其具体如何应用。
GPT Terminal 调用流程
- 用户输出
GPT Terminal中的GPT相干命令
gpt chat -r ikun 请给我表演一下《只因你太美》！- 前端失去用户输出的命令并解析，将解析后果作为参数，申请后端。
- 后端拿到参数后，渲染对应的角色模板（如：ikun），申请 GPT 服务。
- GPT 服务响应用户传入的音讯，并以
Stream流模式返回给后端；后端也以Stream流模式返回给前端。
咱们要害的点在于拆解 2/3/4 步，看看两次数据传输是如何用 Server-Sent Events 实现的！
至于前端是如何解析命令的，请大家移步 GPT Terminal 我的项目中寻找答案。
至于我为什么不必前端间接去申请 GPT 服务，思考有一下几点，供大家参考：
- 职责拆散。GPT 服务属于第三方库，依照个别设计理念来看，须要交由后端解决，前端只须要负责申请后端。
- 便于扩大。之后在 GPT Terminal 中可能会引入用户服务以及 GPT 图片生成性能，为了防止性能都耦合到前端，导致前端臃肿，因而我抉择将 GPT 服务抽取到后端。
前端申请后端
如下局部代码对应我的项目门路为：
src/core/commands/gpt/subCommands/ChatBox.vue
const response = await fetch('http://127.0.0.1:7345/api/gpt/get', {
method: "POST",
headers: {"Content-Type": "application/json",},
body: JSON.stringify({
message: message.value,
role: role.value,
}),
});
if (!response.body) return;
const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
while (true) {var { value, done} = await reader.read();
if (done) break;
value = value?.replace('undefined', '')
console.log("received data -", value)
output.value += value?.replace('undefined', '')
} 前端向后端发动申请，失去申请响应体，而后通过 pipeThrough() 办法将其转换为一个文本解码器流（TextDecoderStream），这个流能够将字节流（如网络申请的响应）转换为 Unicode 字符串，最初调用 getReader() 办法返回一个 reader 对象，用于读取响应体数据。
读取时循环读取，并对数据做一些解决（数据流结尾、结尾为 undefined），而后拼接到 output.value 中，渲染到页面中。这样的话 output.value 就是动静浮现的，给用户视觉效果即为 打字机 。
在这里大家很容易发现，后端与 GPT 服务的交互对于前端而言就是通明的，前端仅晓得其响应是一个流式数据，其它一概不知。
说到这里，大家可能还有些纳闷，Server-Sent Events 仿佛什么都还没配，前端不就是发了一个惯例的 POST 申请嘛！我晓得你很急，但你先别急，跟我缓缓往下看～重头戏是在后端与 GPT 服务的交互！
后端申请 GPT 服务
如下局部代码对应我的项目门路为：
server/src/thirdpart/gptApi/gptApi.js
async function createChatCompletion(messages) {
// 如下为 流式数据传输 写法
const res = openai.createChatCompletion(
{
model: "gpt-3.5-turbo",
messages,
stream: true,
},
{responseType: "stream",}
);
return res
}后端拿到前端传递的参数后，对角色进行简略的模板渲染，失去音讯数组后，调用 GPT 服务。
其参数如下所示，设置 GPT 模型类型，传入音讯数组。
关键在于，设置 stream 参数为 true。这一步就是通知 GPT 服务，我须要获取流式响应！
而如果你只想要 GPT 给你回复整个音讯内容，能够不设置 stream，即为一般响应。
接下来，关键在于后端是如何解析 GPT 返回的响应。
如下局部代码对应我的项目门路为：
server/src/handler/gptStreamHandler.js我将这部分的解决独自抽取到了
gptStreamHandler.js中，将其与其它一般申请的解决辨别开，便于之后扩大
res.setHeader("Cache-Control", "no-cache");
res.setHeader("Content-Type", "text/event-stream");
res.setHeader("Connection", "keep-alive");
res.flushHeaders();
const response = handlerFunction(req.body, req, res);
response.then((resp) => {resp.data.on("data", (data) => {console.log("stream data -", data.toString());
const lines = data
.toString()
.split("\n\n")
.filter((line) => line.trim() !== "");
for (const line of lines) {const message = line.replace("data:", "");
if (message === "[DONE]") {res.end();
return;
}
const parsed = JSON.parse(message);
console.log("parsed content -", parsed.choices[0].delta.content);
res.write(`${parsed.choices[0].delta.content}`);
}
});
}); 该响应是一个流式响应，因而须要用事件回调函数来解决。具体来说，response.then() 是一个 Promise 对象的办法，用于解决异步操作的后果。其中 resp.data 是一个可读流对象，通过订阅 data 事件，能够在每次获取到数据时触发回调函数。
回调函数须要做的很简略，先将数据转换为字符串，而后应用 split() 和 filter() 办法将其拆散为一个个独立的音讯行。每一行都是以 data: 结尾，如下所示：
data: {
"id":"chatcmpl-7RNOsBXERLBhETQxgg5RpF2EGDSpi",
"object":"chat.completion.chunk",
"created":1686759162,
"model":"gpt-3.5-turbo-0301",
"choices":[
{
"delta":{"content":"你"},
"index":0,
"finish_reason":null
}
]
} 数据看起来比较复杂，然而咱们重点只须要关注 choices.delta.content，这是咱们真正须要的数据！
后端须要做的事件就是把这个数据返回给前端即可。当其读到 message === "[DONE]"，这也就是 GPT 服务给咱们提供的信号，通知这个时候曾经没有内容给你啦，你能够进行接管了。这样就实现了一次音讯的回复！
置信粗疏的大家曾经发现了，我还没有提到代码一开始响应的 header 设置，这正是 Server-Sent Events 的外围配置，是不是很简略？
res.setHeader("Cache-Control", "no-cache");
res.setHeader("Content-Type", "text/event-stream");
res.setHeader("Connection", "keep-alive"); 只须要简略设置一下 header，即可实现服务端到客户端的流式传输！
然而很粗疏的大家又发现了，为什么 GPT 服务向后端传输数据的时候，并没有设置 header 呢？起因我认为很简略，因为咱们调用的是 Open AI 提供的 SDK 包。其对于响应的封装对于咱们而言是通明的，也就是说，咱们无需去设置，这些繁琐的操作 SDK 都帮咱们做好啦！
成绩
来吧，展现！让咱们看看，通过这一系列骚操作之后，GPT Terminal 会为咱们出现什么样的成果？
总结
明天带着大家通过我的项目实战的形式，理解了 Server-Sent Events 的根本实现原理。
在此，我也有一点心得想与大家分享，在学习新技术的时候，肯定不要畏手畏脚，总想着先把原理看会再去做，这其实是一种 夸夸其谈 。只有真正地去实际，去动手做，能力更加粗浅地了解其原理！在做与踩坑的过程中，去学习与了解，并及时地补充相干常识，这样最初学到的货色才是本人的！
好啦，明天就临时告一段落啦！如果大家想要理解 GPT Terminal 我的项目的更多细节与解锁更多玩法的话，请到其主页查看哦。
看在我这么认真的份上，大家点个 Star、点个赞不过分吧（磕头！）下期再见！
