好的,你可以使用 JavaScript 的定时器(`setInterval`)来逐步输出文本。具体实现方法如下:
1. 定义一个变量 `currentIndex` 来记录当前已经输出的字符位置,初始值为 0。
2. 使用 `setInterval` 函数每隔一段时间执行一次输出操作,例如每隔 100 毫秒输出一个字符。
3. 在输出操作中,从文本流中获取下一个字符,并将其添加到页面上。
4. 如果已经输出完整个文本流,则清除定时器。
下面是一个示例代码:
```javascript
const socket = new WebSocket('ws://localhost:3000');
let textBuffer = '';
let currentIndex = 0;
let timerId = null;
socket.addEventListener('open', () => {
console.log('WebSocket connected');
});
socket.addEventListener('message', (event) => {
const message = JSON.parse(event.data);
textBuffer += message.text;
if (message.complete) {
// 开始输出文本流
timerId = setInterval(() => {
const char = textBuffer[currentIndex];
if (char) {
document.getElementById('output').textContent += char;
currentIndex++;
} else {
// 清除定时器
clearInterval(timerId);
timerId = null;
}
}, 100); // 每隔 100 毫秒输出一个字符
}
});
```
在上述代码中,我们定义了一个 `currentIndex` 变量来记录当前已经输出的字符位置,初始值为 0。当收到完整的文本流后,我们使用 `setInterval` 函数每隔 100 毫秒执行一次输出操作,从文本流中获取下一个字符,并将其添加到页面上。如果已经输出完整个文本流,则清除定时器。
需要注意的是,在实际应用中,你可能需要更复杂的逻辑来处理 ChatGPT 的输出,例如对输出进行分段、格式化或者过滤等操作。因此,你可以根据具体需求来扩展和优化代码。