Merge pull request #2046 from xinnan-tech/xiaozhi-sercer-testPage

修复测试页面 打断对话多次可能导致无法发出声音的bug

main/xiaozhi-server/test/js/document.js

@@ -0,0 +1,49 @@
+// DOM元素
+const connectButton = document.getElementById('connectButton');
+const serverUrlInput = document.getElementById('serverUrl');
+const connectionStatus = document.getElementById('connectionStatus');
+const messageInput = document.getElementById('messageInput');
+const sendTextButton = document.getElementById('sendTextButton');
+const recordButton = document.getElementById('recordButton');
+const stopButton = document.getElementById('stopButton');
+// 会话记录
+const conversationDiv = document.getElementById('conversation');
+const logContainer = document.getElementById('logContainer');
+let visualizerCanvas = document.getElementById('audioVisualizer');
+
+// ota 是否连接成功，修改成对应的样式
+export function otaStatusStyle (flan) {
+    if(flan){
+        document.getElementById('otaStatus').textContent = 'ota已连接';
+        document.getElementById('otaStatus').style.color = 'green';
+    }else{
+        document.getElementById('otaStatus').textContent = 'ota未连接';
+        document.getElementById('otaStatus').style.color = 'red';
+    }
+}
+
+// ota 是否连接成功，修改成对应的样式
+export function getLogContainer (flan) {
+    return  logContainer;
+}
+
+// 更新Opus库状态显示
+export function updateScriptStatus(message, type) {
+    const statusElement = document.getElementById('scriptStatus');
+    if (statusElement) {
+        statusElement.textContent = message;
+        statusElement.className = `script-status ${type}`;
+        statusElement.style.display = 'block';
+        statusElement.style.width = 'auto';
+    }
+}
+
+// 添加消息到会话记录
+export function addMessage(text, isUser = false) {
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${isUser ? 'user' : 'server'}`;
+    messageDiv.textContent = text;
+    conversationDiv.appendChild(messageDiv);
+    conversationDiv.scrollTop = conversationDiv.scrollHeight;
+}
+

main/xiaozhi-server/test/js/opus.js

@@ -0,0 +1,186 @@
+import { log } from './utils/logger.js';
+import { updateScriptStatus } from './document.js'
+
+
+// 检查Opus库是否已加载
+export function checkOpusLoaded() {
+    try {
+        // 检查Module是否存在（本地库导出的全局变量）
+        if (typeof Module === 'undefined') {
+            throw new Error('Opus库未加载，Module对象不存在');
+        }
+
+        // 尝试先使用Module.instance（libopus.js最后一行导出方式）
+        if (typeof Module.instance !== 'undefined' && typeof Module.instance._opus_decoder_get_size === 'function') {
+            // 使用Module.instance对象替换全局Module对象
+            window.ModuleInstance = Module.instance;
+            log('Opus库加载成功（使用Module.instance）', 'success');
+            updateScriptStatus('Opus库加载成功', 'success');
+
+            // 3秒后隐藏状态
+            const statusElement = document.getElementById('scriptStatus');
+            if (statusElement) statusElement.style.display = 'none';
+            return;
+        }
+
+        // 如果没有Module.instance，检查全局Module函数
+        if (typeof Module._opus_decoder_get_size === 'function') {
+            window.ModuleInstance = Module;
+            log('Opus库加载成功（使用全局Module）', 'success');
+            updateScriptStatus('Opus库加载成功', 'success');
+
+            // 3秒后隐藏状态
+            const statusElement = document.getElementById('scriptStatus');
+            if (statusElement) statusElement.style.display = 'none';
+            return;
+        }
+
+        throw new Error('Opus解码函数未找到，可能Module结构不正确');
+    } catch (err) {
+        log(`Opus库加载失败，请检查libopus.js文件是否存在且正确: ${err.message}`, 'error');
+        updateScriptStatus('Opus库加载失败，请检查libopus.js文件是否存在且正确', 'error');
+    }
+}
+
+
+// 创建一个Opus编码器
+let opusEncoder = null;
+export function initOpusEncoder() {
+    try {
+        if (opusEncoder) {
+            return opusEncoder; // 已经初始化过
+        }
+
+        if (!window.ModuleInstance) {
+            log('无法创建Opus编码器：ModuleInstance不可用', 'error');
+            return;
+        }
+
+        // 初始化一个Opus编码器
+        const mod = window.ModuleInstance;
+        const sampleRate = 16000; // 16kHz采样率
+        const channels = 1;       // 单声道
+        const application = 2048; // OPUS_APPLICATION_VOIP = 2048
+
+        // 创建编码器
+        opusEncoder = {
+            channels: channels,
+            sampleRate: sampleRate,
+            frameSize: 960, // 60ms @ 16kHz = 60 * 16 = 960 samples
+            maxPacketSize: 4000, // 最大包大小
+            module: mod,
+
+            // 初始化编码器
+            init: function () {
+                try {
+                    // 获取编码器大小
+                    const encoderSize = mod._opus_encoder_get_size(this.channels);
+                    log(`Opus编码器大小: ${encoderSize}字节`, 'info');
+
+                    // 分配内存
+                    this.encoderPtr = mod._malloc(encoderSize);
+                    if (!this.encoderPtr) {
+                        throw new Error("无法分配编码器内存");
+                    }
+
+                    // 初始化编码器
+                    const err = mod._opus_encoder_init(
+                        this.encoderPtr,
+                        this.sampleRate,
+                        this.channels,
+                        application
+                    );
+
+                    if (err < 0) {
+                        throw new Error(`Opus编码器初始化失败: ${err}`);
+                    }
+
+                    // 设置位率 (16kbps)
+                    mod._opus_encoder_ctl(this.encoderPtr, 4002, 16000); // OPUS_SET_BITRATE
+
+                    // 设置复杂度 (0-10, 越高质量越好但CPU使用越多)
+                    mod._opus_encoder_ctl(this.encoderPtr, 4010, 5);     // OPUS_SET_COMPLEXITY
+
+                    // 设置使用DTX (不传输静音帧)
+                    mod._opus_encoder_ctl(this.encoderPtr, 4016, 1);     // OPUS_SET_DTX
+
+                    log("Opus编码器初始化成功", 'success');
+                    return true;
+                } catch (error) {
+                    if (this.encoderPtr) {
+                        mod._free(this.encoderPtr);
+                        this.encoderPtr = null;
+                    }
+                    log(`Opus编码器初始化失败: ${error.message}`, 'error');
+                    return false;
+                }
+            },
+
+            // 编码PCM数据为Opus
+            encode: function (pcmData) {
+                if (!this.encoderPtr) {
+                    if (!this.init()) {
+                        return null;
+                    }
+                }
+
+                try {
+                    const mod = this.module;
+
+                    // 为PCM数据分配内存
+                    const pcmPtr = mod._malloc(pcmData.length * 2); // 2字节/int16
+
+                    // 将PCM数据复制到HEAP
+                    for (let i = 0; i < pcmData.length; i++) {
+                        mod.HEAP16[(pcmPtr >> 1) + i] = pcmData[i];
+                    }
+
+                    // 为输出分配内存
+                    const outPtr = mod._malloc(this.maxPacketSize);
+
+                    // 进行编码
+                    const encodedLen = mod._opus_encode(
+                        this.encoderPtr,
+                        pcmPtr,
+                        this.frameSize,
+                        outPtr,
+                        this.maxPacketSize
+                    );
+
+                    if (encodedLen < 0) {
+                        throw new Error(`Opus编码失败: ${encodedLen}`);
+                    }
+
+                    // 复制编码后的数据
+                    const opusData = new Uint8Array(encodedLen);
+                    for (let i = 0; i < encodedLen; i++) {
+                        opusData[i] = mod.HEAPU8[outPtr + i];
+                    }
+
+                    // 释放内存
+                    mod._free(pcmPtr);
+                    mod._free(outPtr);
+
+                    return opusData;
+                } catch (error) {
+                    log(`Opus编码出错: ${error.message}`, 'error');
+                    return null;
+                }
+            },
+
+            // 销毁编码器
+            destroy: function () {
+                if (this.encoderPtr) {
+                    this.module._free(this.encoderPtr);
+                    this.encoderPtr = null;
+                }
+            }
+        };
+
+        opusEncoder.init();
+        return opusEncoder;
+    } catch (error) {
+        log(`创建Opus编码器失败: ${error.message}`, 'error');
+        return false;
+    }
+}

main/xiaozhi-server/test/js/utils/BlockingQueue.js

@@ -0,0 +1,98 @@
+export default class BlockingQueue {
+    #items   = [];
+    #waiters = [];          // {resolve, reject, min, timer, onTimeout}
+
+    /* 空队列一次性闸门 */
+    #emptyPromise = null;
+    #emptyResolve = null;
+
+    /* 生产者：把数据塞进去 */
+    enqueue(item, ...restItems) {
+        if (restItems.length === 0) {
+            this.#items.push(item);
+        }
+        // 如果有额外参数，批量处理所有项
+        else {
+            const items = [item, ...restItems].filter(i => i);
+            if (items.length === 0) return;
+            this.#items.push(...items);
+        }
+        // 若有空队列闸门，一次性放行所有等待者
+        if (this.#emptyResolve) {
+            this.#emptyResolve();
+            this.#emptyResolve = null;
+            this.#emptyPromise = null;
+        }
+
+        // 唤醒所有正在等的 waiter
+        this.#wakeWaiters();
+    }
+
+    /* 消费者：min 条或 timeout ms 先到谁 */
+    async dequeue(min = 1, timeout = Infinity, onTimeout = null) {
+        // 1. 若空，等第一次数据到达（所有调用共享同一个 promise）
+        if (this.#items.length === 0) {
+            await this.#waitForFirstItem();
+        }
+
+        // 立即满足
+        if (this.#items.length >= min) {
+            return this.#flush();
+        }
+
+        // 需要等待
+        return new Promise((resolve, reject) => {
+            let timer = null;
+            const waiter = { resolve, reject, min, onTimeout, timer };
+
+            // 超时逻辑
+            if (Number.isFinite(timeout)) {
+                waiter.timer = setTimeout(() => {
+                    this.#removeWaiter(waiter);
+                    if (onTimeout) onTimeout(this.#items.length);
+                    resolve(this.#flush());
+                }, timeout);
+            }
+
+            this.#waiters.push(waiter);
+        });
+    }
+
+    /* 空队列闸门生成器 */
+    #waitForFirstItem() {
+        if (!this.#emptyPromise) {
+            this.#emptyPromise = new Promise(r => (this.#emptyResolve = r));
+        }
+        return this.#emptyPromise;
+    }
+
+    /* 内部：每次数据变动后，检查哪些 waiter 已满足 */
+    #wakeWaiters() {
+        for (let i = this.#waiters.length - 1; i >= 0; i--) {
+            const w = this.#waiters[i];
+            if (this.#items.length >= w.min) {
+                this.#removeWaiter(w);
+                w.resolve(this.#flush());
+            }
+        }
+    }
+
+    #removeWaiter(waiter) {
+        const idx = this.#waiters.indexOf(waiter);
+        if (idx !== -1) {
+            this.#waiters.splice(idx, 1);
+            if (waiter.timer) clearTimeout(waiter.timer);
+        }
+    }
+
+    #flush() {
+        const snapshot = [...this.#items];
+        this.#items.length = 0;
+        return snapshot;
+    }
+
+    /* 当前缓存长度（不含等待者） */
+    get length() {
+        return this.#items.length;
+    }
+}

main/xiaozhi-server/test/js/utils/logger.js

@@ -0,0 +1,37 @@
+import { getLogContainer } from '../document.js'
+
+const logContainer = getLogContainer();
+// 日志记录函数
+export function log(message, type = 'info') {
+    // 将消息按换行符分割成多行
+    const lines = message.split('\n');
+    const now = new Date();
+    // const timestamp = `[${now.toLocaleTimeString()}] `;
+    const timestamp = `[${now.toLocaleTimeString()}.${now.getMilliseconds().toString().padStart(3, '0')}] `;
+    // 为每一行创建日志条目
+    lines.forEach((line, index) => {
+        const logEntry = document.createElement('div');
+        logEntry.className = `log-entry log-${type}`;
+        // 如果是第一条日志，显示时间戳
+        const prefix = index === 0 ? timestamp : ' '.repeat(timestamp.length);
+        logEntry.textContent = `${prefix}${line}`;
+        // logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
+        // logEntry.style 保留起始的空格
+        logEntry.style.whiteSpace = 'pre';
+        if (type === 'error') {
+            logEntry.style.color = 'red';
+        } else if (type === 'debug') {
+            logEntry.style.color = 'gray';
+            return;
+        } else if (type === 'warning') {
+            logEntry.style.color = 'orange';
+        } else if (type === 'success') {
+            logEntry.style.color = 'green';
+        } else {
+            logEntry.style.color = 'black';
+        }
+        logContainer.appendChild(logEntry);
+    });
+
+    logContainer.scrollTop = logContainer.scrollHeight;
+}

main/xiaozhi-server/test/js/xiaoZhiConnect.js

@@ -0,0 +1,103 @@
+import { log } from './utils/logger.js';
+import { otaStatusStyle } from './document.js'
+
+// WebSocket 连接
+export async function webSocketConnect(otaUrl,wsUrl,config){
+    if (!validateWsUrl(wsUrl)) {
+        return;          // 直接返回，不再往下执行
+    }
+
+    if (!validateConfig(config)) {
+        return;
+    }
+    const ok = await sendOTA(otaUrl, config);
+    if (!ok) return;
+
+    // 使用自定义WebSocket实现以添加认证头信息
+    let connUrl = new URL(wsUrl);
+    // 添加认证参数
+    connUrl.searchParams.append('device-id', config.deviceId);
+    connUrl.searchParams.append('client-id', config.clientId);
+    log(`正在连接: ${connUrl.toString()}`, 'info');
+
+    return new WebSocket(connUrl.toString());
+}
+
+// 验证配置
+function validateConfig(config) {
+    if (!config.deviceMac) {
+        log('设备MAC地址不能为空', 'error');
+        return false;
+    }
+    if (!config.clientId) {
+        log('客户端ID不能为空', 'error');
+        return false;
+    }
+    return true;
+}
+
+// 判断wsUrl路径是否存在错误
+function validateWsUrl(wsUrl){
+    if (wsUrl === '') return false;
+    // 检查URL格式
+    if (!wsUrl.startsWith('ws://') && !wsUrl.startsWith('wss://')) {
+        log('URL格式错误，必须以ws://或wss://开头', 'error');
+        return false;
+    }
+    return true
+}
+
+
+// OTA发送请求，验证状态
+async function sendOTA(otaUrl, config) {
+    try {
+        const res = await fetch(otaUrl, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Device-Id': config.deviceId,
+                'Client-Id': config.clientId
+            },
+            body: JSON.stringify({
+                version: 0,
+                uuid: '',
+                application: {
+                    name: 'xiaozhi-web-test',
+                    version: '1.0.0',
+                    compile_time: '2025-04-16 10:00:00',
+                    idf_version: '4.4.3',
+                    elf_sha256: '1234567890abcdef1234567890abcdef1234567890abcdef'
+                },
+                ota: { label: 'xiaozhi-web-test' },
+                board: {
+                    type: 'xiaozhi-web-test',
+                    ssid: 'xiaozhi-web-test',
+                    rssi: 0,
+                    channel: 0,
+                    ip: '192.168.1.1',
+                    mac: config.deviceMac
+                },
+                flash_size: 0,
+                minimum_free_heap_size: 0,
+                mac_address: config.deviceMac,
+                chip_model_name: '',
+                chip_info: { model: 0, cores: 0, revision: 0, features: 0 },
+                partition_table: [{ label: '', type: 0, subtype: 0, address: 0, size: 0 }]
+            })
+        });
+
+        if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+
+        const result = await res.json();
+        otaStatusStyle(true)
+        return true; // 成功
+    } catch (err) {
+        otaStatusStyle(false)
+        return false; // 失败
+    }
+}
+
+
+
+
+

main/xiaozhi-server/test/test_page.css

@@ -0,0 +1,425 @@
+body {
+    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    margin: 0;
+    padding: 20px;
+    background-color: #f5f5f5;
+}
+
+.container {
+    max-width: 1000px;
+    margin: 0 auto;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 10px 20px 10px 20px;
+}
+
+h1 {
+    color: #333;
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.section {
+    margin-bottom: 20px;
+    padding: 15px;
+    border-radius: 8px;
+    background-color: #f9f9f9;
+}
+
+.section h2 {
+    margin-top: 0;
+    color: #444;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 0;
+}
+
+.section h2 .toggle-button {
+    margin-left: auto;
+    padding: 4px 12px;
+    font-size: 12px;
+    border-radius: 4px;
+    cursor: pointer;
+    height: 28px;
+    line-height: 20px;
+}
+
+.device-info {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    margin-left: 20px;
+    padding: 0 15px;
+    background-color: #f9f9f9;
+    border-radius: 4px;
+    height: 28px;
+    line-height: 28px;
+}
+
+.device-info span {
+    color: #666;
+    font-size: 13px;
+}
+
+.device-info strong {
+    color: #333;
+    font-weight: 500;
+}
+
+.config-panel {
+    display: none;
+    transition: all 0.3s ease;
+    margin-top: 5px;
+    padding: 5px 0;
+}
+
+.config-panel.expanded {
+    display: block;
+}
+
+.control-panel {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 10px;
+}
+
+button {
+    padding: 8px 15px;
+    border: none;
+    border-radius: 5px;
+    background-color: #4285f4;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+button:hover {
+    background-color: #3367d6;
+}
+
+button:disabled {
+    background-color: #cccccc;
+    cursor: not-allowed;
+}
+
+#serverUrl,
+#otaUrl {
+    flex-grow: 1;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+.message-input {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+#messageInput {
+    flex-grow: 1;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+#nfcCardId {
+    flex-grow: 1;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+.conversation {
+    max-height: 300px;
+    overflow-y: auto;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 10px;
+    background-color: white;
+    flex: 1;
+    margin-right: 10px;
+}
+
+.message {
+    margin-bottom: 10px;
+    padding: 8px 12px;
+    border-radius: 8px;
+    max-width: 80%;
+}
+
+.user {
+    background-color: #e2f2ff;
+    margin-left: auto;
+    margin-right: 10px;
+    text-align: right;
+}
+
+.server {
+    background-color: #f0f0f0;
+    margin-right: auto;
+    margin-left: 10px;
+}
+
+.status {
+    color: #666;
+    font-style: italic;
+    font-size: 14px;
+    margin: 0;
+    padding: 0;
+}
+
+.audio-controls {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.audio-visualizer {
+    height: 60px;
+    width: 100%;
+    margin-top: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    background-color: #fafafa;
+}
+
+.record-button {
+    background-color: #db4437;
+}
+
+.record-button:hover {
+    background-color: #c53929;
+}
+
+.record-button.recording {
+    animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        background-color: #db4437;
+    }
+
+    50% {
+        background-color: #ff6659;
+    }
+
+    100% {
+        background-color: #db4437;
+    }
+}
+
+#logContainer {
+    margin-top: 0;
+    padding: 10px;
+    background-color: #f0f0f0;
+    border-radius: 5px;
+    font-family: monospace;
+    height: 300px;
+    overflow-y: auto;
+    flex: 1;
+    margin-left: 10px;
+}
+
+.log-entry {
+    margin: 5px 0;
+    font-size: 12px;
+}
+
+.log-info {
+    color: #333;
+}
+
+.log-error {
+    color: #db4437;
+}
+
+.log-success {
+    color: #0f9d58;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -60%);
+    }
+
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%);
+    }
+}
+
+.script-status {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-right: 5px;
+}
+
+.script-loaded {
+    background-color: #0f9d58;
+}
+
+.script-loading {
+    background-color: #f4b400;
+}
+
+.script-error {
+    background-color: #db4437;
+}
+
+.script-list {
+    margin: 10px 0;
+    padding: 10px;
+    background-color: #f9f9f9;
+    border-radius: 5px;
+    font-family: monospace;
+    font-size: 11px;
+}
+
+#scriptStatus.success {
+    background-color: #e6f4ea;
+    color: #0f9d58;
+    border-left: 4px solid #0f9d58;
+}
+
+#scriptStatus.error {
+    background-color: #fce8e6;
+    color: #db4437;
+    border-left: 4px solid #db4437;
+}
+
+#scriptStatus.warning {
+    background-color: #fef7e0;
+    color: #f4b400;
+    border-left: 4px solid #f4b400;
+}
+
+/* 标签页样式 */
+.tabs {
+    display: flex;
+    margin-bottom: 20px;
+    border-bottom: 2px solid #e0e0e0;
+}
+
+.tab {
+    padding: 10px 20px;
+    cursor: pointer;
+    border: none;
+    background: none;
+    font-size: 16px;
+    color: #666;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.tab:hover {
+    color: #4285f4;
+}
+
+.tab.active {
+    color: #4285f4;
+    font-weight: bold;
+}
+
+.tab.active::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: #4285f4;
+}
+
+.tab-content {
+    display: none;
+}
+
+.tab-content.active {
+    display: block;
+}
+
+.flex-container {
+    display: flex;
+    gap: 20px;
+    margin-top: 10px;
+}
+
+.config-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+    width: 100%;
+}
+
+.config-item label {
+    width: 100px;
+    text-align: right;
+    margin-right: 10px;
+    color: #666;
+}
+
+.config-item input {
+    flex-grow: 1;
+    padding: 6px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+.control-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 10px;
+}
+
+.connection-controls {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    width: 100%;
+}
+
+.connection-controls input {
+    flex: 1;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    min-width: 200px;
+}
+
+.connection-controls button {
+    white-space: nowrap;
+    padding: 8px 15px;
+}
+
+.connection-status {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    margin-left: 20px;
+    padding: 0 15px;
+    background-color: #f9f9f9;
+    border-radius: 4px;
+    height: 28px;
+    line-height: 28px;
+}
+
+.connection-status span {
+    color: #666;
+    font-size: 13px;
+}
+
+.connection-status .status {
+    color: #333;
+    font-weight: 500;
+}