ToB企服应用市场:ToB评测及商务社交产业平台

标题: 纯前端：极速构建一个私有ChatGPT！AI套壳居然云云简朴！ [打印本页]

---

作者: 美食家大橙子    时间: 2024-12-9 01:49
标题: 纯前端：极速构建一个私有ChatGPT！AI套壳居然云云简朴！
注：CSDN不支持超过10M的动图显示，以是文中会有部门动图展示不出来。
  如果想拥有更好地阅读体验，可以去我的文章首发地点：https://juejin.cn/post/7441774623833260070

  

---

随着人工智能Chatgpt的出现，各种国产的AI大模子应用而出，如豆包、文心一言、通义千问、kimi等等，同时，我们也发现有各种各样的套壳APP在割韭菜！
作为一个程序员，我们不能助长这种套壳App的嚣张气势，我们要用邪术打败邪术，实现一个只属于我们自己的ChatGpt!
在这篇文章中，我将介绍怎样利用 Node.js 和 WebSocket 实现一个基于kimi（Moonshot 月之暗大模子）的AI工具，让我们快速拥有属于自己的ChatGpt。大致实现的效果：

基于本文demo代码，你将能快速构建比较完备，且专属于你的ChatGpt，赶快收藏，让我们一起学习套壳应用的奥秘！
技术栈简介

• 前端：
  

前端界面比较容易，只需要简朴的额css + js即可，本文利用vue作为作为demo。

• 后端：我java很垃圾，写不出好的代码，以是后端只能用koa代替，实现接口调用即可。
  
• 前后端通信：为了实现前后端的数据交互，完成AI即时问答功能，我采用WebSocket进行通信。
  
• AI大模子：要实现AI问答，核心就是需要利用现有的AI大模子。好比OpenAI 的 GPT-4、字节跳动的豆包大模子、Kimi的月之暗Moonshot模子等等。由于Kimi的Moonshot模子兼容了 OpenAI 的SDK，调用简朴、学习成本低，因此本文利用此模子。
  

   有人可能问，你怎么不自己开辟大语言模子？可笑，我要套壳实现白嫖！
  开辟前准备

要利用Moonshot的 AI语言模子能力，我们起首要登录其官网，申请属于自己的API Key，通过这个key，我们就可以实现接口调用，完成自己的AI助手搭建。
注册账号

起首，我们需要登录kimi官网，注册账号：

创建API Key

登录后台后，选择【API Key管理】面板，点击【创建】按钮，即可创建自己的密钥。这个密钥就是我们需要利用的API Key。创建好后，把它复制生存起来。

关于费用

作为一个白嫖用户，充值是不可能充值的。注册后，系统免费赠予15，用不完，根本用不完！

技术方案

核心项目搭建

服务端搭建

搭建后端服务，其实就是调用Kimi API 获取问答信息返回给前端。
Kimi API 兼容了 OpenAI 的接口规范，因此，我们可以直接利用 OpenAI 提供的NodeJS(opens in a new tab) SDK 来调用和利用 Kimi 大模子：

1. npm i koa koa-websocket openai

复制代码

项目初始化完毕后，在根目录创建app.js文件

1. const Koa = require("koa");
2. const websocket = require("koa-websocket");
3. const OpenAI = require("openai");
5. const app = websocket(new Koa());
7. // 配置 Moonshot AI 客户端
8. const client = new OpenAI({
9.   apiKey: "你自己在kimi后台创建的API key",
10.   baseURL: "https://api.moonshot.cn/v1", // Moonshot API 的基础路径
11. });
13. // WebSocket 路由
14. app.ws.use((ctx) => {
15.   // .....
16. });
18. // 启动服务器
19. app.listen(3000, () => {
20.   console.log("服务已启动，监听 ws://localhost:3000");
21. });

复制代码

上述代码中，WebSocket 路由内部的逻辑也非常简朴，它的逻辑流程如下：

• 监听前端发送的消息
  
• 调用 Moonshot AI 的聊天接口
  
• 获取 Kimi 的回答内容
  
• 将回答发送到前端
  

1. // WebSocket 路由
2. app.ws.use((ctx) => {
3.   console.log("WebSocket connected");
5.   // 1.监听前端发送的消息
6.   ctx.websocket.on("message", async (message) => {
7.     const { content } = JSON.parse(message); // 从前端接收的 JSON 消息中解析用户输入
9.     try {
10.       // 2.调用 Moonshot AI 的聊天接口
11.       const completion = await client.chat.completions.create({
12.         model: "moonshot-v1-8k",
13.         messages: [
14.           { role: "user", content },
15.         ],
16.         temperature: 0.3, // 控制回答的随机性
17.       });
18.       // 3.获取 Kimi 的回答内容
19.       const reply = completion.choices[0]?.message?.content
20.       // 4.将回答发送到前端
21.       ctx.websocket.send(JSON.stringify({ reply }));
22.     } catch (error) {
23.       ctx.websocket.send(
24.         JSON.stringify({ reply: "Kimi 暂时无法回答您的问题，请稍后再试。" })
25.       );
26.     }
27.   });
29.   ctx.websocket.on("close", () => {
30.     console.log("WebSocket connection closed");
31.   });
32. });

复制代码

  接口中的temperature值用于控制回答的随机性，Kimi API 的 <font style="color:rgb(51, 65, 85);">temperature</font> 参数的取值范围是 <font style="color:rgb(51, 65, 85);">[0, 1]</font>，官方推荐取值为0.3
  至此，后端服务就搭建完毕了，我们执行下面的命令启动服务

1. node app.js

复制代码

前端搭建

参考其他的AI助手，前端的界面一般都非常简朴，我们直接参考微信聊天界面，做一个简易的对话框即可。

1. <template>
2.     <div class="chat-container">
3.         <div class="chat-box">
4.             <div class="messages">
5.                 <!-- 显示聊天记录 -->
6.                 <div v-for="(message, index) in messages" :key="index" class="message-wrapper"
7.                     :class="message.role === 'user' ? 'user-message' : 'ai-message'">
8.                     <div class="message">
9.                         <p>{{ message.content }}</p>
10.                     </div>
11.                 </div>
12.             </div>
13.         </div>
14.         <div class="input-box">
15.             <textarea v-model="userInput" placeholder="请输入您的问题..." @keyup.enter="sendMessage"></textarea>
16.             <button @click="sendMessage">发送</button>
17.         </div>
18.     </div>
19. </template>
21. <script setup>
22. import { ref } from 'vue';
24. const messages = ref([]);
25. const userInput = ref('');
26. const socket = new WebSocket('ws://localhost:3000');
28. // 监听服务端消息
29. socket.onmessage = (event) => {
30.     const data = JSON.parse(event.data);
31.     messages.value.push({ role: 'ai', content: data.reply });
32. };
34. // 发送用户消息
35. const sendMessage = () => {
36.     if (!userInput.value.trim()) return;
38.     // 添加用户输入到消息列表
39.     messages.value.push({ role: 'user', content: userInput.value });
41.     // 通过 WebSocket 发送到后端
42.     socket.send(JSON.stringify({ content: userInput.value }));
44.     userInput.value = ''; // 清空输入框
45. };
46. </script>

复制代码

1. <style scoped lang="less">
2. .chat-container {
3.   height: 100vh;
4.   background-color: #f6f7f9;
5.   overflow: hidden;
7.   .chat-box {
8.     height: calc(100% - 60px);
9.     box-sizing: border-box;
10.     padding: 16px;
11.     overflow-y: auto;
12.     background-color: #ffffff;
14.     .messages {
15.       display: flex;
16.       flex-direction: column;
17.       gap: 12px;
18.     }
20.     .message-wrapper {
21.       display: flex;
23.       .message {
24.         max-width: 70%;
25.         padding: 5px 16px;
26.         border-radius: 18px;
27.         font-size: 14px;
28.         line-height: 1.5;
29.         white-space: pre-wrap;
30.         word-wrap: break-word;
31.         box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
32.       }
33.     }
35.     .user-message {
36.       justify-content: flex-end;
38.       .message {
39.         background-color: #0084ff;
40.         color: #ffffff;
41.         text-align: right;
42.         border-bottom-right-radius: 4px;
43.       }
44.     }
46.     .ai-message {
47.       justify-content: flex-start;
49.       .message {
50.         background-color: #f1f0f0;
51.         color: #333333;
52.         text-align: left;
53.         border-bottom-left-radius: 4px;
54.       }
55.     }
56.   }
58.   .input-box {
59.     height: 60px;
60.     display: flex;
61.     align-items: center;
62.     gap: 8px;
63.     background-color: #e5e5e5;
64.     border-top: 1px solid #e5e5e5;
65.     padding: 0 10px;
67.     button {
68.       padding: 5px 20px;
69.       background-color: #0084ff;
70.       color: #ffffff;
71.       border: none;
72.       border-radius: 10px;
73.       font-size: 14px;
74.       cursor: pointer;
75.       box-shadow: 0 2px 4px rgba(0, 132, 255, 0.3);
76.       transition: background-color 0.3s ease;
77.     }
79.     button:hover {
80.       background-color: #006bbf;
81.     }
83.     button:active {
84.       background-color: #0056a3;
85.     }
87.     textarea {
88.       flex: 1;
89.       padding: 10px;
90.       border: 1px solid #d5d5d5;
91.       border-radius: 15px;
92.       resize: none;
93.       font-size: 14px;
94.       background-color: #ffffff;
95.       box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
96.       outline: none;
97.       height: 20px;
98.     }
100.     textarea:focus {
101.       border-color: #0084ff;
102.       box-shadow: inset 0 1px 4px rgba(0, 132, 255, 0.2);
103.     }
104.   }
106. }
107. </style>

复制代码

上述代码实现了一个简朴的聊天界面，利用 WebSocket 实现前后端通信，大致代码逻辑如下：
响应式数据

1. - `messages`：存储所有聊天记录的数组，role字段储信息来自用户还是AI。
2. - `userInput`：用户输入框的内容，绑定到 `textarea`。

复制代码

WebSocket 通信

1. - **连接服务端**：通过 `new WebSocket('ws://localhost:3000')` 创建连接。ws://localhost:3000是我们后端服务的运行地址。
2. - **接收消息**：监听 `onmessage` 事件，将服务端返回的数据解析后追加到 `messages` 中。
3. - **发送消息**：在 `sendMessage` 方法中：
4.     * 验证输入框是否为空。
5.     * 将用户消息推送到 `messages`。
6.     * 使用 `socket.send` 将输入内容以 JSON 格式发送到服务端。

复制代码

现在，我们运行前端项目是还效果：

非常nice啊兄弟们！固然交互可能不是很好，但是根本功能实现了！
   不外眼睛尖的同砚们可能也看见了，末了一次输入666的时候，接口报错了。嗐，毕竟我们是白嫖用户，有用量限制：一分钟内只支持连续3次问题：
  

  进行多轮对话

现在，你可能会发现，我们的AI助手并不能实现多轮对话，对话是不连续的。这很正常，API 本身不具有记忆功能，它是无状态的，当我们多次请求 API 时，Kimi 大模子并不知道我们前一次请求的内容。
要解决这个问题，我们可以手动维护每次请求的上下文，把上一次请求过的内容手动参加到下一次请求中，让 Kimi 大模子能正确知道我们之前都聊了什么。
现在，我们维护 一个messages 列表让 Kimi 大模子拥有记忆，并实现多轮对话功能。我们轻微改造下后端代码：

1. const Koa = require("koa");
2. const websocket = require("koa-websocket");
3. const OpenAI = require("openai");
4. require("dotenv").config();
6. const app = websocket(new Koa());
8. // 配置 Moonshot AI 客户端
9. const client = new OpenAI({
10.   apiKey: "你自己在kimi后台创建的API key",
11.   baseURL: "https://api.moonshot.cn/v1",
12. });
14. // 定义全局 messages 对象，按 WebSocket 连接 ID 记录会话上下文
15. const sessions = {};
17. app.ws.use((ctx) => {
18.   // 分配唯一会话 ID（以 WebSocket 对象为标识）
19.   const sessionId = ctx.websocket;
21.   // 初始化当前会话的历史记录
22.   sessions[sessionId] = [];
24.   // 监听前端发送的消息
25.   ctx.websocket.on("message", async (message) => {
26.     const { content } = JSON.parse(message);
28.     try {
29.       // 将用户问题追加到历史消息
30.       const userMessage = { role: "user", content };
31.       sessions[sessionId].push(userMessage);
33.       // 调用 Moonshot API
34.       const completion = await client.chat.completions.create({
35.         model: "moonshot-v1-8k",
36.         messages: sessions[sessionId],
37.         temperature: 0.3,
38.       });
40.       // 记录 AI 回复并发送给前端
41.       const assistantMessage = completion.choices[0]?.message || {
42.         role: "assistant",
43.         content: "抱歉，我暂时无法回答您的问题。",
44.       };
45.       sessions[sessionId].push(assistantMessage);
47.       ctx.websocket.send(JSON.stringify({ reply: assistantMessage.content }));
48.     } catch (error) {
49.       ctx.websocket.send(
50.         JSON.stringify({ reply: "Kimi 暂时无法回答您的问题，请稍后再试。" })
51.       );
52.     }
53.   });
55.   // 关闭 WebSocket 时清除会话记录
56.   ctx.websocket.on("close", () => {
57.     console.log("WebSocket connection closed");
58.     delete sessions[sessionId];
59.   });
60. });
62. // 启动服务器
63. app.listen(3000, () => {
64.   console.log("服务已启动，监听 ws://localhost:3000");
65. });

复制代码

上述代码的实现其实非常简朴，我们维护一个 **sessions** 对象，用于给每一个用户连接有一个专属记录（通过 WebSocket 的 sessionId 区分）。当用户发送消息时，值生存到对应的 sessionId 的记录里（包括用户的消息和 AI 的回复）。然后每次对话，我们都可以把完整的对话汗青传给 AI，AI 就能“记住”之前聊过的内容。
我们看看代码实现的效果：

通过上图，我们可以看出多轮对话的效果已经根本实现了！
自动选择Kimi 大模子

上述的代码中，我们利用的是kimi固定的 <font style="color:rgb(51, 65, 85);">moonshot-v1-8k</font> 模子 ，当对话的轮次越来越多时，继承调用 <font style="color:rgb(51, 65, 85);">chat</font> 函数会得到一个 <font style="color:rgb(51, 65, 85);">Your request exceeded model token limit</font> 错误。此时，如果我们想继承刚才的上下文接着与 Kimi 大模子对话，需要切换一个更大上下文的模子，比方 <font style="color:rgb(51, 65, 85);">moonshot-v1-32k</font>。
但是，选择合适的模子非常麻烦，我们直接利用kimi官方的moonshot-v1-auto 模子，它可以根据对话次数内部调用合适的模子，yyds！

利用Stream流式输出

现在，我们已经根本实现AI的连续问答功能了，但是美中不敷，它的反应很慢。这是由于kimi后台后等问题全部生成后，才返回前端，如许显得就非常慢！那么，我们怎样像ChatGpt一样，实时按字符返回结果呢？
非常简朴，我们利用 Kimi API 的流式输出功能 —— Streaming 即可！

服务端的代码更改非常容易

1. // WebSocket 路由
2. app.ws.use((ctx) => {
3.   // 初始化上下文消息
4.   let messages = [];
6.   // 监听前端发送的消息
7.   ctx.websocket.on("message", async (message) => {
8.     const { content } = JSON.parse(message); // 获取用户输入
10.     // 添加用户输入到上下文消息中
11.     messages.push({ role: "user", content });
13.     try {
14.       // 开启流式输出
15.       const stream = await client.chat.completions.create({
16.         model: "moonshot-v1-8k",
17.         messages,
18.         temperature: 0.3,
19.         stream: true,
20.       });
22.       ctx.websocket.send(JSON.stringify({ reply: "", isStreaming: true }));
24.       let fullReply = ""; // 用于记录完整回复
25.       for await (const chunk of stream) {
26.         const delta = chunk.choices[0]?.delta;
27.         if (delta?.content) {
28.           ctx.websocket.send(JSON.stringify({ reply: delta.content }));
29.           fullReply += delta.content;
30.         }
31.       }
33.       // 将 AI 回复添加到上下文消息中
34.       messages.push({ role: "assistant", content: fullReply });
35.     } catch (error) {
36.       ctx.websocket.send(
37.         JSON.stringify({ reply: "Kimi 暂时无法回答您的问题，请稍后再试。" })
38.       );
39.     }
40.   });
41. });
43. // 启动服务器
44. app.listen(3000, () => {
45.   console.log("服务已启动，监听 ws://localhost:3000");
46. });

复制代码

  上述代码通过启用 stream: true 设置，实时接收 AI 的部门回复数据流 (chunk.choices[0]?.delta)。每次接收到新内容时，立即通过 WebSocket 发送给客户端，确保用户可以逐字看到 AI 的回复。
  相应的，为了兼容流数据，我们前端代码也需要简朴的调整一下

1. <script setup>
2. import { ref } from "vue";
4. // WebSocket 初始化
5. const socket = new WebSocket("ws://localhost:3000");
6. const messages = ref([]); // 聊天记录
7. const userInput = ref(""); // 用户输入内容
9. let isStreaming = false; // 是否正在流式接收数据
10. let streamingMessage = ""; // 当前正在接收的消息
12. // 监听后端发送的消息
13. socket.onmessage = (event) => {
14.   const data = JSON.parse(event.data);
16.   // 如果是流式输出，逐步更新
17.   if (data.isStreaming) {
18.     isStreaming = true;
19.     streamingMessage = "";
20.     messages.value.push({ role: "assistant", content: "" });
21.   } else if (isStreaming && data.reply) {
22.     streamingMessage += data.reply;
23.     messages.value[messages.value.length - 1].content = streamingMessage;
24.   } else {
25.     isStreaming = false;
26.   }
27. };
29. // 发送消息给后端
30. const sendMessage = () => {
31.   if (!userInput.value.trim()) return;
33.   // 添加用户消息到消息列表
34.   messages.value.push({ role: "user", content: userInput.value });
36.   // 将消息通过 WebSocket 发送到后端
37.   socket.send(
38.     JSON.stringify({
39.       content: userInput.value,
40.     })
41.   );
43.   userInput.value = ""; // 清空输入框
44. };
45. </script>

复制代码

  前端通过监听 WebSocket 的 onmessage 变乱接收流数据。若消息标志为流式 (data.isStreaming)，初始化流式状态并在消息列表中添加占位符。后续每段流数据 (data.reply) 会渐渐追加到 streamingMessage 并实时更新末了一条消息的内容，模仿逐字显示效果。完成后重置流式状态。
  现在，我们看看效果：

显示代码块

现在我们已经实现了AI的实时问答功能，但是如上图，它不能显示代码块，看起来比较难受。
我们可以安装 markdown-it 和 highlight.js来实当代码块的展示。
安装依赖
安装 markdown-it 和 highlight.js：

1. npm install markdown-it highlight.js

复制代码

改造代码显示逻辑
在前端利用 markdown-it 解析 Markdown 内容，并团结 highlight.js 实当代码块高亮。

1. <template>
2.   <div class="chat-container">
3.   <div class="chat-box">
4.   <div class="messages">
5.   <div
6. v-for="(message, index) in messages"
7. :key="index"
8. class="message-wrapper"
9. :class="message.role === 'user' ? 'user-message' : 'ai-message'"
10.   >
11.   <div
12.   class="message"
13.   v-html="renderMessageContent(message.content)"
14.   ></div>
15.   </div>
16.   </div>
17.   </div>
18.   <div class="input-box">
19.   <textarea
20. v-model="userInput"
21. placeholder="请输入您的问题..."
22. @keyup.enter="sendMessage"
23.   ></textarea>
24.   <button @click="sendMessage">发送</button>
25.   </div>
26.   </div>
27.   </template>
29.   <script setup>
30.   import { ref } from "vue";
31. import MarkdownIt from "markdown-it";
32. import hljs from "highlight.js";
33. import "highlight.js/styles/github.css"; // 引入代码高亮样式
35. // 初始化 Markdown-it，并配置代码高亮
36. const md = new MarkdownIt({
37.   highlight: (code, lang) => {
38.     if (lang && hljs.getLanguage(lang)) {
39.       return hljs.highlight(code, { language: lang }).value;
40.     }
41.     return ""; // 如果未指定语言，则返回原始代码
42.   },
43. });
45. // WebSocket 初始化
46. const socket = new WebSocket("ws://localhost:3000");
47. const messages = ref([]); // 聊天记录
48. const userInput = ref(""); // 用户输入内容
50. let isStreaming = false; // 是否正在流式接收数据
51. let streamingMessage = ""; // 当前正在接收的消息
53. // 渲染消息内容（支持 Markdown 和普通文本）
54. const renderMessageContent = (content) => {
55.   return md.render(content);
56. };
58. // 监听后端发送的消息
59. socket.onmessage = (event) => {
60.   const data = JSON.parse(event.data);
62.   if (data.isStreaming) {
63.     isStreaming = true;
64.     streamingMessage = "";
65.     messages.value.push({ role: "assistant", content: "" });
66.   } else if (isStreaming && data.reply) {
67.     streamingMessage += data.reply;
68.     messages.value[messages.value.length - 1].content = streamingMessage;
69.   } else {
70.     isStreaming = false;
71.   }
72. };
74. // 发送消息给后端
75. const sendMessage = () => {
76.   if (!userInput.value.trim()) return;
78.   messages.value.push({ role: "user", content: userInput.value });
80.   socket.send(
81.     JSON.stringify({
82.       content: userInput.value,
83.     })
84.   );
86.   userInput.value = "";
87. };
88. </script>

复制代码

我们在试试效果：

个性化定制

我们也可以给我们的AI在每次发送信息前，携带一些固定的预设值，实现AI的定制话化！我们只需要在后端服务的messages中增加一些预设值即可。

1.   let messages = [
2.     {
3.       role: "system",
4.       content:
5.         "你是一个AI助手,请你模拟一个阴阳怪气的人,用户无论问什么,你都要阴阳怪气的回答!",
6.     },
7.   ];

复制代码

我们试试效果：

我们在换种风格玩玩

1.   let messages = [
2.     {
3.       role: "system",
4.       content:
5.         "请模拟我的女朋友,我问什么都要一副不耐烦,对我爱答不理的样子.",
6.     },
7.   ];

复制代码

兄弟们，真实啊，这语气像不像你的女朋友？
前后端完整代码

前端

1. <template>
2.   <div class="chat-container">
3.     <div class="chat-box">
4.       <div class="messages">
5.         <div
6.           v-for="(message, index) in messages"
7.           :key="index"
8.           class="message-wrapper"
9.           :class="message.role === 'user' ? 'user-message' : 'ai-message'"
10.         >
11.           <div
12.             class="message"
13.             v-html="renderMessageContent(message.content)"
14.           ></div>
15.         </div>
16.       </div>
17.     </div>
18.     <div class="input-box">
19.       <textarea
20.         v-model="userInput"
21.         placeholder="请输入您的问题..."
22.         @keyup.enter="sendMessage"
23.       ></textarea>
24.       <button @click="sendMessage">发送</button>
25.     </div>
26.   </div>
27. </template>
29. <script setup>
30. import { ref } from "vue";
31. import MarkdownIt from "markdown-it";
32. import hljs from "highlight.js";
33. import "highlight.js/styles/github.css"; // 引入代码高亮样式
35. // 初始化 Markdown-it，并配置代码高亮
36. const md = new MarkdownIt({
37.   highlight: (code, lang) => {
38.     if (lang && hljs.getLanguage(lang)) {
39.       return hljs.highlight(code, { language: lang }).value;
40.     }
41.     return ""; // 如果未指定语言，则返回原始代码
42.   },
43. });
45. // WebSocket 初始化
46. const socket = new WebSocket("ws://localhost:3000");
47. const messages = ref([]); // 聊天记录
48. const userInput = ref(""); // 用户输入内容
50. let isStreaming = false; // 是否正在流式接收数据
51. let streamingMessage = ""; // 当前正在接收的消息
53. // 渲染消息内容（支持 Markdown 和普通文本）
54. const renderMessageContent = (content) => {
55.   return md.render(content);
56. };
58. // 监听后端发送的消息
59. socket.onmessage = (event) => {
60.   const data = JSON.parse(event.data);
62.   if (data.isStreaming) {
63.     isStreaming = true;
64.     streamingMessage = "";
65.     messages.value.push({ role: "assistant", content: "" });
66.   } else if (isStreaming && data.reply) {
67.     streamingMessage += data.reply;
68.     messages.value[messages.value.length - 1].content = streamingMessage;
69.   } else {
70.     isStreaming = false;
71.   }
72. };
74. // 发送消息给后端
75. const sendMessage = () => {
76.   if (!userInput.value.trim()) return;
78.   messages.value.push({ role: "user", content: userInput.value });
80.   socket.send(
81.     JSON.stringify({
82.       content: userInput.value,
83.     })
84.   );
86.   userInput.value = "";
87. };
88. </script>
90. <style scoped lang="less">
91. .chat-container {
92.   height: 100vh;
93.   background-color: #f6f7f9;
94.   overflow: hidden;
96.   .chat-box {
97.     height: calc(100% - 60px);
98.     box-sizing: border-box;
99.     padding: 16px;
100.     overflow-y: auto;
101.     background-color: #ffffff;
103.     .messages {
104.       display: flex;
105.       flex-direction: column;
106.       gap: 12px;
107.     }
109.     .message-wrapper {
110.       display: flex;
112.       .message {
113.         max-width: 70%;
114.         padding: 5px 16px;
115.         border-radius: 18px;
116.         font-size: 14px;
117.         line-height: 1.5;
118.         white-space: pre-wrap;
119.         word-wrap: break-word;
120.         box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
121.       }
122.     }
124.     .user-message {
125.       justify-content: flex-end;
127.       .message {
128.         background-color: #0084ff;
129.         color: #ffffff;
130.         text-align: right;
131.         border-bottom-right-radius: 4px;
132.       }
133.     }
135.     .ai-message {
136.       justify-content: flex-start;
138.       .message {
139.         background-color: #f1f0f0;
140.         color: #333333;
141.         text-align: left;
142.         border-bottom-left-radius: 4px;
144.         pre {
145.           background-color: #f6f8fa;
146.           padding: 10px;
147.           border-radius: 6px;
148.           overflow-x: auto;
149.         }
150.       }
151.     }
152.   }
154.   .input-box {
155.     height: 60px;
156.     display: flex;
157.     align-items: center;
158.     gap: 8px;
159.     background-color: #e5e5e5;
160.     border-top: 1px solid #e5e5e5;
161.     padding: 0 10px;
163.     button {
164.       padding: 5px 20px;
165.       background-color: #0084ff;
166.       color: #ffffff;
167.       border: none;
168.       border-radius: 10px;
169.       font-size: 14px;
170.       cursor: pointer;
171.       box-shadow: 0 2px 4px rgba(0, 132, 255, 0.3);
172.       transition: background-color 0.3s ease;
173.     }
175.     button:hover {
176.       background-color: #006bbf;
177.     }
179.     button:active {
180.       background-color: #0056a3;
181.     }
183.     textarea {
184.       flex: 1;
185.       padding: 10px;
186.       border: 1px solid #d5d5d5;
187.       border-radius: 15px;
188.       resize: none;
189.       font-size: 14px;
190.       background-color: #ffffff;
191.       box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
192.       outline: none;
193.       height: 20px;
194.     }
196.     textarea:focus {
197.       border-color: #0084ff;
198.       box-shadow: inset 0 1px 4px rgba(0, 132, 255, 0.2);
199.     }
200.   }
201. }
202. </style>

复制代码

服务端

1. const Koa = require("koa");
2. const websocket = require("koa-websocket");
3. const OpenAI = require("openai");
4. require("dotenv").config();
6. const app = websocket(new Koa());
8. // 配置 Moonshot AI 客户端
9. const client = new OpenAI({
10.   apiKey: "sk-I0a8XUeEavnJ381o0IQKiIXpAYrUttliu", // 替换为你的 Moonshot API Key
11.   baseURL: "https://api.moonshot.cn/v1", // Moonshot API 基础路径
12. });
14. // WebSocket 路由
15. app.ws.use((ctx) => {
16.   console.log("WebSocket connected");
18.   // 初始化上下文消息
19.   let messages = [
20.     {
21.       role: "system",
22.       content:
23.         "你是 Kimi，由 Moonshot AI 提供的人工智能助手，你更擅长中文和英文的对话。用户问什么问题,你都阴阳怪气他!",
24.     },
25.   ];
27.   // 监听前端发送的消息
28.   ctx.websocket.on("message", async (message) => {
29.     const { content } = JSON.parse(message); // 获取用户输入
31.     // 添加用户输入到上下文消息中
32.     messages.push({ role: "user", content });
34.     try {
35.       // 开启流式输出
36.       const stream = await client.chat.completions.create({
37.         model: "moonshot-v1-8k",
38.         messages,
39.         temperature: 0.3,
40.         stream: true,
41.       });
43.       ctx.websocket.send(JSON.stringify({ reply: "", isStreaming: true }));
45.       let fullReply = ""; // 用于记录完整回复
46.       for await (const chunk of stream) {
47.         const delta = chunk.choices[0]?.delta;
48.         if (delta?.content) {
49.           ctx.websocket.send(JSON.stringify({ reply: delta.content }));
50.           fullReply += delta.content;
51.         }
52.       }
54.       // 将 AI 回复添加到上下文消息中
55.       messages.push({ role: "assistant", content: fullReply });
56.     } catch (error) {
57.       console.error("调用 Moonshot API 出错:", error.message);
58.       ctx.websocket.send(
59.         JSON.stringify({ reply: "Kimi 暂时无法回答您的问题，请稍后再试。" })
60.       );
61.     }
62.   });
63. });
65. // 启动服务器
66. app.listen(3000, () => {
67.   console.log("服务已启动，监听 ws://localhost:3000");
68. });

复制代码

总结

本文带各人实现了一个简易的AI工具，具备实时通信、Markdown 支持和流式输出等特点，根本席卷了AI 的一些核心功能，相信各人基于此demo肯定能实现属于自己的套壳gpt了。
末了，我简朴做下技术总结吧：
前后端通过 WebSocket 通信，后端集成了 Moonshot AI 的 Kimi 模子处置处罚用户输入并生成回复。
前端功能

• 利用 Vue 3 构建聊天界面，包括消息显示和输入框两部门。
  
• 支持区分用户与 AI 消息，采用差别样式展示。
  
• 利用 markdown-it 渲染消息内容，支持 Markdown 格式和代码块显示。
  
• 集成 highlight.js 实当代码高亮。
  
• 支持实时流式更新，逐字展示 AI 回复，模仿思索过程。
  

后端功能

• 利用 koa-websocket 实现 WebSocket 服务，处置处罚前端消息并返回 AI 回复。
  
• 调用 Moonshot AI 的 Kimi 模子生成回复，并基于上下文提供连贯对话。
  
• 启用流式传输，将 AI 回复逐块发送至前端，提拔用户体验。
  

关注我，我是石小石！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4