如何丝滑实现 GPT 打字机流式回复？Server-Sent Events！

项目地址：github.com/ltyzzzxxx/g…

欢迎大家Star、提出PR，一起快乐地用 GPT Terminal 玩耍吧～

前言

今天来给大家整点 ChatGPT 的干货！想必大家用过 ChatGPT 都知道，它是一个练习时长两年半，喜欢唱…（油饼食不食！）

它在响应我们给它发送消息的时候，并不是将一整个消息直接返回给我们，而是流式传输，如同打字机效果一般，逐渐地将整个内容呈现给我们。（市面上的 GPT 一般都是如此）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jx8mwgaG-1686799752550)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/50e79d59737047459f8a7fd4dafced28~tplv-k3u1fbpfcp-watermark.image?)]

这样的好处有两个，一方面是 GPT 一边响应一边返回结果，流式输出，响应效率大大提升；另一方面是显著提升了用户体验，给我们的感觉就像是真实的对话一样，GPT 似乎在思考问题的答案。

说到这里，不得不佩服 Open AI 这家公司。不仅仅实现了人工智能的突破，掀起了第四次科技革命，而且它在做产品方面，也有很多值得我们深入学习与思考的地方。正如陆奇教授在前段时间一次演讲上说的一般：

OpenAI 所代表的是全新的组织、全新的能力，他们所做的一切是要既能做科研、又能写代码、又能做产品，这些能力是分不开的。

希望能给大家在未来的学习与工作中带来一些新的思考维度～

啊似乎又跑题了，话不多说，咱们迅速进入正题！

Server-Sent Events

要想揭开 ChatGPT 实现流式传输的秘诀，那么一定离不开这个技术 —— Server-Sent Events

它是一种服务端主动向客户端推送的技术，这一点是不是与 Websocket 有些类似，但是 SSE 并不支持客户端向服务端发送消息，即 SSE 为单工通信。

通俗易懂一些理解就是，服务端与客户端建立了 长连接，服务端源源不断地向客户端推送消息。服务端就相当于河流的上游，客户端就相当于河流的下游，水往低处流，这就是 SSE 的流式传输。

大家简单了解一下即可，我们还是需要在实战中深刻理解其具体如何使用。

GPT Terminal 调用流程

1. 用户输入 GPT Terminal 中的 GPT 相关命令

gpt chat -r ikun 请给我表演一下《只因你太美》！

2. 前端得到用户输入的命令并解析，将解析结果作为参数，请求后端。

3. 后端拿到参数后，渲染对应的角色模板（如：ikun），请求 GPT 服务。

4. GPT 服务响应用户传入的消息，并以 Stream 流形式返回给后端；后端也以 Stream 流形式返回给前端。

咱们关键的点在于拆解 2/3/4 步，看看两次数据传输是如何用 Server-Sent Events 实现的！

至于前端是如何解析命令的，请大家移步 GPT Terminal 项目中寻找答案。

至于我为什么不用前端直接去请求 GPT 服务，考虑有一下几点，供大家参考：

1. 职责分离。GPT 服务属于第三方库，按照一般设计理念来看，需要交由后端处理，前端只需要负责请求后端。

2. 便于扩展。之后在 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.val