ChatGPT 的输出是一个文本流,服务器会将文本流分成多个小块,每次只发送一部分数据给客户端。因此,客户端需要逐步接收和处理这些数据,以避免一次性输出过多数据导致浏览器崩溃或性能问题。
在实现时,你可以通过监听 WebSocket 的 `onmessage` 事件来获取服务器发送的消息,并将消息拼接起来,直到接收完整个文本流。然后,你可以将文本流输出到页面上,可以使用 DOM 操作或者前端框架来实现。
下面是一个简单的示例代码:
```javascript
const socket = new WebSocket('ws://localhost:3000');
let textBuffer = '';
socket.addEventListener('open', () => {
console.log('WebSocket connected');
});
socket.addEventListener('message', (event) => {
const message = JSON.parse(event.data);
textBuffer += message.text;
if (message.complete) {
// 输出完整的文本流到页面上
document.getElementById('output').textContent = textBuffer;
// 清空缓存
textBuffer = '';
}
});
```
在上述代码中,我们定义了一个 `textBuffer` 变量来缓存接收到的文本流。当收到新的消息时,我们将消息的文本内容拼接到缓存中,并检查消息是否为完整的文本流。如果是完整的文本流,则将缓存中的文本输出到页面上,并清空缓存。
需要注意的是,在实际应用中,你可能需要更复杂的逻辑来处理 ChatGPT 的输出,例如对输出进行分段、格式化或者过滤等操作。因此,你可以根据具体需求来扩展和优化代码。