实现简单的ChatGPT官网的对话效果

Cruiter

已于 2024-03-26 13:21:51 修改

阅读量377

点赞数 4

文章标签： javascript

于 2024-03-25 23:41:35 首次发布

本文链接：https://blog.csdn.net/printfscanfmain/article/details/137029413

版权

实现简单的ChatGPT官网的对话效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="load()">生成文本</button>
    <p id="t"></p>
    <script defer>
      async function load() {
        const dom = document.getElementById("t");
        let res = await fetch("http://localhost:3000/audio", {
          method: "GET",
        });
        // getReader
        const reader = res.body.getReader();
        while (true) {
          let { done, value } = await reader.read();
          //   decode
          const decoder = new TextDecoder("utf-8");
          const text = decoder.decode(value);
          //   console.log(text);
          dom.innerText += text;
          if (done) {
            break;
          }
        }
      }
    </script>
  </body>
</html>

使用fetch请求请求nodejs接口，异步等待response对象，接着获取response.body对象的reader，即获取读指针，然后创建一个document对象自带的解码器TextDecoder，解码器用来将解码二进制的字节流，reader.read方法我认为会读取当前http响应报文请求体的内容，一个请求报文可以有多个响应报文，该方法会返回一个带有done和value属性的对象，分别对应是否完成和字节流，并且我注意到响应头多了一个TransferEncopding:chunked表示分块传输。
在这里插入图片描述
服务端代码，采用http和fs库原生实现

import http from "http";
import fs from "fs";
const server = http.createServer();
server.on("request", async (req, res) => {
  res.setHeader("Content-Type", "text/plain");
  res.setHeader("Access-Control-Allow-Origin", "*");
  fs.readFile("./text.txt", (err, data) => {
    if (err) {
      throw err;
    } else {
      const decoder = new TextDecoder("utf-8");
      const text = decoder.decode(data);
      let i = 0;
      setInterval(() => {
        if (i < text.length) {
          res.write(text[i]);
          i++;
        } else {
          res.end();
        }
      }, 500);
    }
  });
});
server.listen(3000, () => {
  console.log("Server is running at http://localhost:3000");
});

Cruiter

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
实现简单的ChatGPT官网的对话效果

方法我认为会读取当前http响应报文请求体的内容，一个请求报文可以有多个响应报文，该方法会返回一个带有done和value属性的对象，分别对应是否完成和字节流，并且我注意到响应头多了一个。对象的reader，即获取读指针，然后创建一个document对象自带的解码器。服务端代码，采用http和fs库原生实现。请求请求nodejs接口，异步等待。，解码器用来将解码二进制的字节流，
复制链接

扫一扫