在实时语音交互项目中，常遇到用户说完话后系统响应延迟高的问题。传统 HTTP 轮询方案延迟高且资源消耗大，不适合高实时性场景。
经过调研和实战，基于 ChatTTS Web 技术栈，搭建了一套相对高效、低延迟的系统。以下是核心思路和具体实现。
1. 技术选型：为什么是 WebSocket？
在实时语音场景下，数据传输通道的选择至关重要。主要对比了三种常见技术：
- WebSocket：全双工通信，建立一次连接后即可持续双向传输数据，非常适合音频流这种需要持续、低延迟推送的场景。它是我们最终的选择。
- WebRTC：虽然是为实时音视频通信设计的，P2P 传输延迟极低，但它的架构更复杂，涉及信令服务器、STUN/TURN 服务器等，对于'文本/指令 -> 服务器生成语音 -> 返回播放'这种单向流式输出场景，有点杀鸡用牛刀。
- Server-Sent Events (SSE)：只能服务器向客户端单向推送，虽然也能用于流式数据，但不如 WebSocket 灵活，且在某些浏览器中存在连接数限制。
综合来看，WebSocket 在实现复杂度、浏览器兼容性和满足需求程度上取得了最佳平衡。
2. 核心架构与实现
我们的目标是：用户文本/指令到达服务器后，服务器端 ChatTTS 模型开始生成语音，并立即将编码后的音频数据分块，通过 WebSocket 实时推送到前端，前端收到数据后几乎无延迟地播放。
2.1 WebSocket 连接管理与音频流处理
一个健壮的连接管理是基础。我们实现了一个 WebSocketManager 类，负责连接建立、维护、消息收发和错误处理。
class WebSocketManager {
constructor(url) {
this.url = url;
this.ws = null;
this.reconnectAttempts = 0;
this.maxReconnectAttempts = 5;
this.reconnectDelay = 1000; // 初始重连延迟 1 秒
this.heartbeatInterval = 30000; // 30 秒心跳
this.heartbeatTimer = null;
}
connect() {
try {
this. = (.);
.();
} (error) {
.(, error);
.();
}
}
() {
.. = {
.();
. = ;
.();
(.) .();
};
.. = {
.();
(event. ) {
(.) .(event.);
} ( event. === ) {
{
msg = .(event.);
(.) .(msg);
} (e) {
.(, event.);
}
}
};
.. = {
.();
.();
(event. !== && . < .) {
.();
}
};
.. = {
.(, error);
..();
};
}
() {
. = ( {
(. && .. === .) {
..(.({ : }));
. = ( {
.();
..();
}, );
}
}, .);
}
() {
(.) (.);
}
() {
(.) {
(.);
. = ;
}
.();
}
() {
.++;
delay = . * .(, . - );
.();
( .(), delay);
}
() {
(. && .. === .) {
..(data);
} {
.();
}
}
() {
.();
(.) {
..(, );
}
}
}
