在现代前端开发中，创建流式数据交互效果已成为提升用户体验的重要手段之一。其中，结合打字机效果与实时数据的展示，不仅能吸引用户的注意力，还能增加信息传达的趣味性。本文将探讨如何在前端实现一个对接 fastGPT 的流式数据展示，并加入打字机效果。
1. 流式数据展示
fastGPT 提供了强大的文本生成能力，我们可以利用 WebSocket 或者 HTTP 请求与其接口进行交互，获取实时的文本数据。以下是一个简单的示例，展示如何使用 fetch API 调用 fastGPT 的接口。
async function fetchData() {
const response = await fetch('https://api.fastgpt.com/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
prompt: "请讲一个关于科技的故事",
max_tokens: 150
})
});
const data = await response.json();
return data.text; // 返回生成的文本
}
2. 打字机效果
打字机效果旨在让文字逐字显示，模拟手动输入的感觉。我们可以通过设置定时器来逐字打印文本。以下是实现该效果的代码示例：
function typeWriter(text, element, speed) {
let i = 0;
function type() {
if (i < text.length) {
element.innerHTML += text.charAt(i);
i++;
setTimeout(type, speed);
}
}
type();
}
3. 综合示例
下面的代码示例展示了如何将以上两个部分结合起来，向 fastGPT 请求数据并以打字机的形式展示在网页上。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FastGPT 流式数据打字机效果</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
}
#output {
font-size: 24px;
border: 1px solid #ccc;
padding: 10px;
min-height: 50px;
}
</style>
</head>
<body>
<h1>FastGPT 打字机效果</h1>
<div id="output"></div>
<script>
async function fetchData() {
const response = await fetch('https://api.fastgpt.com/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
prompt: "请讲一个关于科技的故事",
max_tokens: 150
})
});
const data = await response.json();
return data.text;
}
function typeWriter(text, element, speed) {
let i = 0;
function type() {
if (i < text.length) {
element.innerHTML += text.charAt(i);
i++;
setTimeout(type, speed);
}
}
type();
}
async function init() {
const outputElement = document.getElementById('output');
const text = await fetchData();
typeWriter(text, outputElement, 100); // 100ms 打字速度
}
init();
</script>
</body>
</html>
4. 运行效果
以上代码展示了如何从 fastGPT 获取文本并以打字机的形式显示。用户将看到文本逐字出现，极大地提升了页面的互动性和趣味性。在调用 fetchData 函数后，文本内容会在网页上的 #output div 中逐字显示。
5. 结论
通过这种方式，我们不仅实现了动态的流式数据展示，还通过打字机效果提升了用户的阅读体验。这样的组合方式，可以应用于各类前端项目中，尤其是聊天机器人、在线咨询系统或是教育类应用。希望这篇文章能够给您在前端开发中提供一些启发与帮助。
