原来如此！十分钟掌握 ChatGPT 聊天打字兼自动滚动效果，实现 AI 操控小程序！

2023-05-17 07:02:07

拥抱 AI 时代：打造出色的 ChatGPT 聊天小程序

简介

人工智能 (AI) 的时代已经到来，ChatGPT 的出现就是明证，它让我们得以窥见 AI 的无限潜能。作为具有远见的开发者，我们必须紧跟时代潮流，掌握 AI 技术，而非被其取代。本文将深入探讨如何利用 ChatGPT 构建一款出色的聊天小程序，赋能您的应用程序并提升用户体验。

第一步：准备工作

在着手构建之前，请确保您已安装 Node.js 和 npm。如果没有，请访问 Node.js 官网进行下载和安装。

第二步：创建项目

在命令行窗口中，导航至您希望创建项目的目录，然后运行以下命令创建一个新项目：

npm init -y

这将创建一个新的 package.json 文件。

第三步：安装依赖项

我们需要安装一些依赖项来帮助我们实现聊天打字效果。运行以下命令来安装这些依赖项：

npm install chatgpt --save

第四步：编写代码

现在，我们可以创建名为 index.js 的文件，并在其中编写以下代码：

// 引入必要的模块
const ChatGPT = require("chatgpt");
const app = require("express")();

// 设置路由
app.get("/", (req, res) => {
  // 发送 index.html 文件
  res.sendFile(__dirname + "/index.html");
});

app.post("/chat", (req, res) => {
  // 获取提示文本
  const prompt = req.body.prompt;

  // 向 ChatGPT 发送请求
  ChatGPT.chat(prompt).then((response) => {
    // 将响应发送回前端
    res.json(response);
  });
});

// 监听端口 3000
app.listen(3000, () => {
  console.log("服务器正在端口 3000 上监听");
});

第五步：创建 HTML 文件

创建名为 index.html 的 HTML 文件，并在其中写入以下代码：

<!DOCTYPE html>
<html>
  <head>
    
    <!-- 引入 chatgpt.js 文件 -->
    <script src="/chatgpt.js"></script>
  </head>
  <body>
    <!-- 创建聊天表单 -->
    <form id="chat-form">
      <input type="text" id="chat-input" placeholder="Ask me anything..." />
      <button type="submit">Send</button>
    </form>

    <!-- 创建聊天输出区 -->
    <div id="chat-output"></div>

    <!-- 编写客户端脚本 -->
    <script>
      // 获取聊天表单和输入元素
      const chatForm = document.getElementById("chat-form");
      const chatInput = document.getElementById("chat-input");

      // 获取聊天输出元素
      const chatOutput = document.getElementById("chat-output");

      // 为聊天表单添加提交事件监听器
      chatForm.addEventListener("submit", (event) => {
        // 阻止默认行为
        event.preventDefault();

        // 获取提示文本
        const prompt = chatInput.value;

        // 向 ChatGPT 发送请求
        ChatGPT.chat(prompt).then((response) => {
          // 获取 ChatGPT 的响应
          const output = response.candidates[0].output;

          // 将响应添加到聊天输出区
          chatOutput.innerHTML += `<div>${output}</div>`;

          // 滚动到聊天输出区的底部
          chatOutput.scrollTo(0, chatOutput.scrollHeight);
        });
      });
    </script>
  </body>
</html>

实现自动滚动效果

为了让聊天记录自动滚动到最新消息，我们需要在 index.js 文件中添加以下代码：

// 引入 socket.io 模块
const io = require("socket.io")(3001);

// 添加 socket.io 连接事件监听器
io.on("connection", (socket) => {
  // 为 "chat message" 事件添加监听器
  socket.on("chat message", (msg) => {
    // 向所有已连接的客户端广播消息
    io.emit("chat message", msg);
  });
});

然后，我们需要在 index.html 文件中添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    
    <!-- 引入 chatgpt.js 和 socket.io.min.js 文件 -->
    <script src="/chatgpt.js"></script>
    <script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script>
  </head>
  <body>
    <!-- ... 其他代码 ... -->

    <!-- 编写客户端脚本 -->
    <script>
      // ... 其他代码 ...

      // 创建 socket.io 连接
      const socket = io();

      // 为聊天表单添加提交事件监听器
      chatForm.addEventListener("submit", (event) => {
        // ... 其他代码 ...

        // 通过 socket.io 发送消息
        socket.emit("chat message", output);
      });

      // 为 "chat message" 事件添加监听器
      socket.on("chat message", (msg) => {
        // ... 其他代码 ...
      });
    </script>
  </body>
</html>