更新test测试页面,使用ota返回的连接信息和认证信息

This commit is contained in:
Chingfeng Li
2025-10-17 17:51:56 +08:00
parent 13ce67e4c7
commit 49e1bbbf15
2 changed files with 41 additions and 28 deletions
+37 -19
View File
@@ -2,23 +2,46 @@ import { log } from './utils/logger.js';
import { otaStatusStyle } from './document.js'
// WebSocket 连接
export async function webSocketConnect(otaUrl,wsUrl,config){
if (!validateWsUrl(wsUrl)) {
return; // 直接返回,不再往下执行
}
export async function webSocketConnect(otaUrl, config){
if (!validateConfig(config)) {
return;
}
const ok = await sendOTA(otaUrl, config);
if (!ok) return;
// 使用自定义WebSocket实现以添加认证头信息
let connUrl = new URL(wsUrl);
// 添加认证参数
// 发送OTA请求并获取返回的websocket信息
const otaResult = await sendOTA(otaUrl, config);
if (!otaResult) return;
// 从OTA响应中提取websocket信息
const { websocket } = otaResult;
if (!websocket || !websocket.url || !websocket.token) {
log('OTA响应中缺少websocket信息', 'error');
return;
}
// 使用OTA返回的websocket URL
let connUrl = new URL(websocket.url);
// 添加token参数(从OTA响应中获取)
if (websocket.token) {
if(websocket.token.startsWith("Bearer ")){
connUrl.searchParams.append('authorization', websocket.token);
} else {
connUrl.searchParams.append('authorization','Bearer ' + websocket.token);
}
}
// 添加认证参数(保持原有逻辑)
connUrl.searchParams.append('device-id', config.deviceId);
connUrl.searchParams.append('client-id', config.clientId);
log(`正在连接: ${connUrl.toString()}`, 'info');
const wsurl = connUrl.toString()
log(`正在连接: ${wsurl}`, 'info');
if (wsurl) {
document.getElementById('serverUrl').value = wsurl;
}
return new WebSocket(connUrl.toString());
}
@@ -48,7 +71,7 @@ function validateWsUrl(wsUrl){
}
// OTA发送请求,验证状态
// OTA发送请求,验证状态,并返回响应数据
async function sendOTA(otaUrl, config) {
try {
const res = await fetch(otaUrl, {
@@ -90,14 +113,9 @@ async function sendOTA(otaUrl, config) {
const result = await res.json();
otaStatusStyle(true)
return true; // 成功
return result; // 返回完整的响应数据
} catch (err) {
otaStatusStyle(false)
return false; // 失败
return null; // 失败返回null
}
}
}
+4 -9
View File
@@ -133,8 +133,8 @@
<div class="connection-controls">
<input type="text" id="otaUrl" value="http://127.0.0.1:8002/xiaozhi/ota/"
placeholder="OTA服务器地址,如:http://127.0.0.1:8002/xiaozhi/ota/" />
<input type="text" id="serverUrl" value="ws://127.0.0.1:8000/xiaozhi/v1/"
placeholder="WebSocket服务器地址,如:ws://127.0.0.1:8000/xiaozhi/v1/" />
<input type="text" id="serverUrl" value="" readonly disabled
placeholder="自动从OTA接口获取" />
<button id="connectButton">连接</button>
<button id="authTestButton">测试认证</button>
</div>
@@ -714,7 +714,7 @@
localStorage.setItem('wsUrl', url);
try {
const ws = await webSocketConnect(otaUrl, url, config)
const ws = await webSocketConnect(otaUrl, config)
if (ws === undefined) {
return
}
@@ -756,7 +756,7 @@
messageInput.disabled = true;
sendTextButton.disabled = true;
recordButton.disabled = true;
stopButton.disabled = true;
// stopButton.disabled = true;
};
websocket.onerror = (error) => {
@@ -1049,11 +1049,6 @@
document.getElementById('otaUrl').value = savedOtaUrl;
}
const savedWsUrl = localStorage.getItem('wsUrl');
if (savedWsUrl) {
document.getElementById('serverUrl').value = savedWsUrl;
}
// 切换面板显示
toggleButton.addEventListener('click', () => {
const isExpanded = configPanel.classList.contains('expanded');