前言
现在随着AI的发展，市面出现了很多AI对话的工具，正好这段时间也在做AI对话。其实功能不复杂，主要需要考虑的是细节、体验，跟我一起剖析AI对话是如何实现的。
功能
- 获取流式数据
- 内容渲染并且实现打字机效果
实现
准备流式接口
为了更加逼真，这里使用Node简单实现一个流式接口，方便后面使用。
const express = require("express");
const cors = require("cors");
const app = express();
app.use(cors());
const PORT = 5000;
const markdownText = `
# npm
## 常用指令
\`\`\`bash
# 修改仓库地址
git remote set-url origin 新仓库地址
# 查看仓库地址
git remote -v
# 更新远程分支
git remote update origin --prune
# 发布
npm publish
# 继续 rebase
git rebase --continue
# 放弃 rebase
git rebase --abort
# 修改最近一次提交的消息
git commit --amend
# 如果你想直接指定新的提交消息，可以使用 -m 参数，此时不会打开编辑器，来修改信息：
git commit --amend -m "New commit message"
\`\`\`
`;
const contentStr = markdownText.split('')
app.get("/sse", function (req, res) {
res.writeHead(200, {
Connection: "keep-alive",
"Content-Type": "text/event-stream",
"Cache-Control": "no-cache",
});
// 正常的 sse 结束，需要从客户端触发 close 事件，如果从服务端触发，客户端会收到 error
req.on('close', function () {
console.log('close')
clearInterval(interval)
})
let count = 0
// 此处用计时器来模拟大模型的查询结果
const interval = setInterval(() => {
// 如果前端没有正确触发 SSE 的 close 事件，服务端判断如果数据已发送完成，也会主动关闭事件
if (count > contentStr.length) {
res.end()
clearInterval(interval)
return
} else if (count === 0) {
res.write(contentStr[count]);
} else if (count === contentStr.length) {
res.write('');
}
else {
res.write(contentStr[count]);
}
count++
}, 100);
});
app.listen(PORT, function () {
console.log(`Server is running on port ${PORT}`);
});
流式数据获取
这里获取流式数据需要通过原生Fetch API请求。
// 使用fetch函数从http://127.0.0.1:5000/sse获取数据
let resp = await fetch("http://127.0.0.1:5000/sse");
// 获取响应体的读取器
let reader = resp.body.getReader();
// 循环读取数据
while (true) {
// 读取数据
let { done, value } = await reader.read();
// 如果读取完毕，则跳出循环
if (done) break;
// 将读取到的数据解码为字符串
let str = new TextDecoder().decode(value);
// 将解码后的字符串添加到markdownText中
this.markdownText += str;
}
页面展示
考虑到数据会是markdown格式，那么就需要解析md格式，可以使用marked这个库进行解析，这个库是整体一块解析的，要实现打字机效果就不适合，需要实时解析，这种组件有很多，这里使用vue-markdown组件。
npm i vue-markdown
<template>
<VueMarkdown :source="markdownText" />
</template>
<script>
import VueMarkdown from "vue-markdown";
export default{
components: { VueMarkdown },
data() {
return {
markdownText: "",
};
},
}
</script>
1.gif
现在基本功能已经实现，开始细节优化，页面美化中。。。
细节优化
- 禁止发送多次，可暂停
AbortController是fetch API提供的一种机制，允许你取消一个fetch请求。虽然这不是真正的暂停，但是你可以重新发起请求 。
const controller = new AbortController();
let resp = await fetch("http://127.0.0.1:5000/sse",{
signal:controller.signal
});
// 在需要暂停请求时
controller.abort();
2.gif
- 对话框定位到页面底部
每次对话为对话框添加一个ID，然后通过scrollIntoView定位
this.$nextTick(() => {
document.querySelector('#ai1').scrollIntoView({
behavior: "smooth",
block: "end",
});
});
- 页面跟随文字自动定位页面底部，手动滚动取消自动定位
思路： 新建滚动开关，在while循环中根据滚动开关决定是否使用scrollIntoView定位到底部同时开启滚动监听，判断滚动条是否在页面底部，去修改滚动开关，修改后直接移除滚动事件。
let abortCtrl = null
async submit() {
//每次先定位到底部以防滚动监听不准确
this.$nextTick(() => {
document.querySelector('#ai1').scrollIntoView({
behavior: "smooth",
block: "end",
});
});
//滚动开关
let shouldAutoScroll = true;
//获取外层容器添加监听事件
let contentDom = document.querySelector(".box");
contentDom.addEventListener("scroll", function onScroll(e) {
//判断滚动条是否在页面底部
let flag = contentDom.scrollHeight - contentDom.clientHeight <= contentDom.scrollTop + 1;
//不在底部修改状态并且移除监听
shouldAutoScroll = flag;
if (!flag) {
contentDom.removeEventListener("scroll", onScroll);
}
});
abortCtrl = new AbortController();
// 使用fetch函数从http://127.0.0.1:5000/sse获取数据
let resp = await fetch("http://127.0.0.1:5000/sse");
// 获取响应体的读取器
let reader = resp.body.getReader();
// 循环读取数据
while (true) {
// 读取数据
let { done, value } = await reader.read();
// 如果读取完毕，则跳出循环
if (done) break;
// 将读取到的数据解码为字符串
let str = new TextDecoder().decode(value);
// 将解码后的字符串添加到markdownText中
this.markdownText += str;
if (shouldAutoScroll) {
requestAnimationFrame(() => {
document.querySelector('#ai1').scrollIntoView({
behavior: "smooth",
block: "end",
});
});
}
}
},
3.gif
这里就大致实现了AI对话的主要交互功能。主要有流式数据的读取、数据内容的渲染、页面跟随滚动。技术不难，主要是提供一个思路，欢迎大家交流提供其它的实现方式。
