admin 管理员组

文章数量: 887017

实现简单的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");
});

本文标签： 官网 效果 简单 ChatGpt

版权声明：本文标题：实现简单的ChatGPT官网的对话效果 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1729014422h1307027.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。