github/crossdesk-web-client
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[fix] resolve issues causing reconnect and initial connection failures

Browse Source
This commit is contained in:
dijunkun
2025-11-06 02:43:15 +08:00
parent 96d05049d5
commit 2399769bc1
3 changed files with 225 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
index.html
View File

@@ -10,38 +10,47 @@
<div class="container"> <div class="container">
<h1>CrossDesk Web Client</h1> <h1>CrossDesk Web Client</h1>
<div class="card"> <!-- Connection settings + status -->
<h2>连接设置</h2> <div class="top-card">
<div class="option"> <div class="connection-card">
<label for="transmission-id">传输ID：</label> <h2>连接设置</h2>
<input id="transmission-id" type="text" value="475319798" /> <div class="option">
<label for="transmission-id">传输ID：</label>
<input id="transmission-id" type="text" value="475319798" />
</div>
<div class="option">
<label for="transmission-pwd">密码：</label>
<input id="transmission-pwd" type="password" value="111111" />
</div>
<div class="actions">
<button id="connect" onclick="connect()" disabled>连接</button>
<button
id="disconnect"
style="display: none"
onclick="disconnect()"
>
断开连接
</button>
</div>
</div> </div>
<div class="option">
<label for="transmission-pwd">密码：</label> <div class="status-card">
<input id="transmission-pwd" type="password" value="111111" /> <h2>状态</h2>
</div> <div class="status-item">
<div class="actions"> ICE 连接状态: <span id="ice-connection-state"></span>
<button id="connect" onclick="connect()" disabled>连接</button> </div>
<button id="disconnect" style="display: none" onclick="disconnect()"> <div class="status-item">
断开连接 信令状态: <span id="signaling-state"></span>
</button> </div>
</div> <div class="status-item">
</div> 数据通道: <span id="datachannel-state"></span>
</div>
<div class="states">
<div class="state-item">
<p>ICE 连接状态: <span id="ice-connection-state"></span></p>
</div>
<div class="state-item">
<p>ICE 收集状态: <span id="ice-gathering-state"></span></p>
</div>
<div class="state-item">
<p>信令状态: <span id="signaling-state"></span></p>
</div> </div>
</div> </div>
<!-- Video display -->
<div id="media" style="display: none"> <div id="media" style="display: none">
<h2>远程画面</h2> <h2>远程画面 <span id="track-id" class="track-id"></span></h2>
<video <video
id="video" id="video"
playsinline playsinline
@@ -51,11 +60,6 @@
muted muted
></video> ></video>
</div> </div>
<div class="card">
<h2>数据通道</h2>
<pre id="data-channel"></pre>
</div>
</div> </div>
<script src="web_client.js"></script> <script src="web_client.js"></script>

93
styles.css
View File

@@ -1,12 +1,12 @@
:root { :root {
--primary-color: #2196f3; --primary-color: #2196f3;
--danger-color: #f44336;
--background-color: #f5f5f5; --background-color: #f5f5f5;
--border-radius: 8px; --border-radius: 8px;
} }
body { body {
margin: 0; margin: 0;
padding: 20px;
font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif; font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
background-color: var(--background-color); background-color: var(--background-color);
color: #333; color: #333;
@@ -16,55 +16,70 @@ body {
max-width: 1280px; max-width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
} }
h1 { h1 {
color: var(--primary-color);
text-align: center; text-align: center;
margin-bottom: 30px; color: var(--primary-color);
margin-bottom: 10px;
} }
h2 { /* Connection settings + status card */
color: #444; .top-card {
margin-top: 30px; display: flex;
flex-wrap: wrap;
gap: 20px;
} }
.card { .connection-card, .status-card {
background: white; background: white;
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: 20px; padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 6px rgba(0,0,0,0.1);
margin-bottom: 20px; flex: 1 1 300px;
}
.connection-card h2,
.status-card h2 {
margin-top: 0;
color: #444;
} }
.option { .option {
margin-bottom: 15px;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 15px;
} }
.option label { .option label {
min-width: 120px; width: 120px;
color: #666; color: #666;
} }
input[type="text"], .option input {
input[type="password"] { flex: 1;
padding: 8px 12px; padding: 8px 12px;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 4px; border-radius: 4px;
width: 200px;
font-size: 14px; font-size: 14px;
} }
.actions {
display: flex;
gap: 10px;
}
button { button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 10px 20px; padding: 10px 20px;
border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
color: white;
background-color: var(--primary-color);
transition: background-color 0.2s; transition: background-color 0.2s;
} }
@@ -78,31 +93,39 @@ button:disabled {
} }
#disconnect { #disconnect {
background-color: #f44336; background-color: var(--danger-color);
} }
#disconnect:hover { #disconnect:hover {
background-color: #d32f2f; background-color: #d32f2f;
} }
.states { /* Status display */
display: grid; .status-item {
grid-template-columns: repeat(3, 1fr); padding: 10px;
gap: 15px; background: #f8f9fa;
border-radius: 4px;
border: 1px solid #ddd;
margin-bottom: 10px;
transition: background-color 0.5s;
} }
.state-item { /* Status change animation */
background: white; .status-update {
padding: 15px; animation: flash 0.5s;
border-radius: var(--border-radius);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
} }
@keyframes flash {
0% { background-color: #ffeb3b; }
50% { background-color: #f8f9fa; }
100% { background-color: #ffeb3b; }
}
/* Video display */
#media { #media {
background: #222; background: #222;
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: 20px; padding: 20px;
margin-top: 20px;
} }
video { video {
@@ -112,9 +135,17 @@ video {
#data-channel { #data-channel {
background: #f8f9fa; background: #f8f9fa;
border-radius: var(--border-radius); border: 1px solid #ddd;
border-radius: 4px;
padding: 15px; padding: 15px;
font-family: monospace; font-family: monospace;
height: 200px; height: 200px;
border: 1px solid #ddd; overflow-y: auto;
} white-space: pre-wrap;
}
@media (max-width: 768px) {
.top-card {
flex-direction: column;
}
}

256
web_client.js
View File

@@ -1,33 +1,30 @@
const iceConnectionLog = document.getElementById('ice-connection-state'), const iceConnectionLog = document.getElementById('ice-connection-state'),
iceGatheringLog = document.getElementById('ice-gathering-state'),
signalingLog = document.getElementById('signaling-state'), signalingLog = document.getElementById('signaling-state'),
dataChannelLog = document.getElementById('data-channel'); dataChannelLog = document.getElementById('datachannel-state');
clientId = "000000"; clientId = '000000';
const websocket = new WebSocket('wss://api.crossdesk.cn:9090'); const websocket = new WebSocket('wss://api.crossdesk.cn:9090');
let pc = null;
let dc = null;
// ===== WebSocket 心跳机制 =====
let heartbeatInterval = null; let heartbeatInterval = null;
let lastPongTime = Date.now(); let lastPongTime = Date.now();
function startHeartbeat() { function startHeartbeat() {
stopHeartbeat(); // 避免重复定时 stopHeartbeat();
lastPongTime = Date.now(); lastPongTime = Date.now();
// 每30秒发一次心跳
heartbeatInterval = setInterval(() => { heartbeatInterval = setInterval(() => {
if (websocket.readyState === WebSocket.OPEN) { if (websocket.readyState === WebSocket.OPEN) {
websocket.send(JSON.stringify({ type: "ping", ts: Date.now() })); websocket.send(JSON.stringify({ type: 'ping', ts: Date.now() }));
console.log("sent ping");
} }
// 如果90秒内没收到任何消息，认为连接断开
if (Date.now() - lastPongTime > 10000) { if (Date.now() - lastPongTime > 10000) {
console.warn("WebSocket heartbeat timeout, reconnecting..."); console.warn('WebSocket heartbeat timeout, reconnecting...');
stopHeartbeat(); stopHeartbeat();
reconnectWebSocket(); reconnectWebSocket();
} }
}, 5000); }, 3000);
} }
function stopHeartbeat() { function stopHeartbeat() {
@@ -37,183 +34,182 @@ function stopHeartbeat() {
} }
} }
// 监听服务器返回消息时更新时间 websocket.addEventListener('message', (evt) => {
websocket.addEventListener("message", (evt) => { lastPongTime = Date.now();
lastPongTime = Date.now(); // 收到任何消息都视为活跃
}); });
// 自动重连逻辑
function reconnectWebSocket() { function reconnectWebSocket() {
try { try {
websocket.close(); websocket.close();
} catch (e) { } catch (e) {
console.error("Error closing websocket:", e); console.error('Error closing websocket:', e);
} }
console.log("Reconnecting WebSocket..."); console.log('Reconnecting WebSocket...');
setTimeout(() => { setTimeout(() => {
window.location.reload(); // 简单策略：刷新页面重连 window.location.reload();
// 或者重新 new WebSocket('wss://api.crossdesk.cn:9090')，并重新注册事件
}, 2000); }, 2000);
} }
websocket.onopen = () => { websocket.onopen =
document.getElementById('connect').disabled = false; () => {
sendLogin(); document.getElementById('connect').disabled = false;
} sendLogin();
startHeartbeat();
websocket.onmessage = async (evt) => {
if (typeof evt.data !== 'string') {
return;
} }
const message = JSON.parse(evt.data);
if (message.type == "login") {
clientId = message.user_id.split("@")[0];
console.log("logged in as " + clientId);
} else if (message.type == "offer") { websocket.onmessage =
await handleOffer(message) async (evt) => {
} else if (message.type == "new_candidate") { if (typeof evt.data !== 'string') {
if (pc) { return;
const candidate = new RTCIceCandidate({ }
sdpMid: message.mid, const message = JSON.parse(evt.data);
candidate: message.candidate if (message.type == 'login') {
}); clientId = message.user_id.split('@')[0];
pc.addIceCandidate(candidate).catch(e => { console.log('Logged in as: ' + clientId);
console.error("Error adding received ice candidate", e);
}); } else if (message.type == 'offer') {
await handleOffer(message)
} else if (message.type == 'new_candidate_mid') {
if (pc == null) {
console.warn('PeerConnection not exist when adding candidate');
} else {
// console.log('received new candidate: ' + message.candidate);
const candidate = new RTCIceCandidate(
{ sdpMid: message.mid, candidate: message.candidate });
pc.addIceCandidate(candidate).catch(e => {
console.error('Error adding received ice candidate', e);
});
}
} }
} }
}
let pc = null;
let dc = null;
function createPeerConnection() { function createPeerConnection() {
const config = { const config = {};
};
config.iceServers = [ config.iceServers = [
{ urls: ['stun:api.crossdesk.cn:3478'] }, { urls: ['stun:api.crossdesk.cn:3478'] }, {
{
urls: ['turn:api.crossdesk.cn:3478'], urls: ['turn:api.crossdesk.cn:3478'],
username: 'crossdesk', username: 'crossdesk',
credential: 'crossdeskpw' credential: 'crossdeskpw'
} }
]; ];
config.iceTransportPolicy = "all"; config.iceTransportPolicy = 'all';
pc = new RTCPeerConnection(config); pc = new RTCPeerConnection(config);
console.log("Created RTCPeerConnection");
// Register some listeners to help debugging // Register some listeners to help debugging
pc.addEventListener('iceconnectionstatechange', () => pc.addEventListener(
iceConnectionLog.textContent += ' -> ' + pc.iceConnectionState); 'iceconnectionstatechange',
() => iceConnectionLog.textContent += ' -> ' + pc.iceConnectionState);
iceConnectionLog.textContent = pc.iceConnectionState; iceConnectionLog.textContent = pc.iceConnectionState;
pc.addEventListener('icegatheringstatechange', () => pc.addEventListener(
iceGatheringLog.textContent += ' -> ' + pc.iceGatheringState); 'signalingstatechange',
iceGatheringLog.textContent = pc.iceGatheringState; () => signalingLog.textContent += ' -> ' + pc.signalingState);
pc.addEventListener('signalingstatechange', () =>
signalingLog.textContent += ' -> ' + pc.signalingState);
signalingLog.textContent = pc.signalingState; signalingLog.textContent = pc.signalingState;
// onicecandidate // onicecandidate
pc.onicecandidate = function (event) { pc.onicecandidate = function (event) {
var ice_candidate = event.candidate; var ice_candidate = event.candidate;
if(ice_candidate) { if (!ice_candidate) return;
websocket.send(JSON.stringify({
type: "new_candidate_mid", websocket.send(JSON.stringify({
transmission_id: getTransmissionId(), type: 'new_candidate_mid',
user_id: clientId, transmission_id: getTransmissionId(),
remote_user_id: getTransmissionId(), user_id: clientId,
candidate: ice_candidate.candidate, remote_user_id: getTransmissionId(),
mid: ice_candidate.sdpMid candidate: ice_candidate.candidate,
})); mid: ice_candidate.sdpMid
console.log("sent new candidate: " + ice_candidate.candidate); }));
} // console.log('sent new candidate: ' + ice_candidate.candidate);
}; };
// Receive audio/video track // Receive audio/video track
// More robust handling of audio/video track // More robust handling of audio/video track
pc.ontrack = (evt) => { pc.ontrack = (evt) => {
console.log('ontrack event:', evt);
const video = document.getElementById('video'); const video = document.getElementById('video');
const trackIdEl = document.getElementById('track-id');
// Only handle video track // Only handle video track
if (evt.track.kind !== 'video') return; if (evt.track.kind !== 'video') return;
if (!video.srcObject) { // Update track id display
const stream = evt.streams && evt.streams[0] ? evt.streams[0] : new MediaStream([evt.track]); if (trackIdEl) {
trackIdEl.textContent = evt.track.id ? `(${evt.track.id})` : '';
}
// 设置视频属性 if (!video.srcObject) {
video.setAttribute('playsinline', true); // iOS 内联播放 const stream = evt.streams && evt.streams[0] ?
video.setAttribute('webkit-playsinline', true); // 旧版 iOS webkit 内核 evt.streams[0] :
video.setAttribute('x5-video-player-type', 'h5'); // 微信浏览器 new MediaStream([evt.track]);
video.setAttribute('playsinline', true);
video.setAttribute('webkit-playsinline', true);
video.setAttribute('x5-video-player-type', 'h5');
video.setAttribute('x5-video-player-fullscreen', 'true'); video.setAttribute('x5-video-player-fullscreen', 'true');
video.setAttribute('autoplay', true); video.setAttribute('autoplay', true);
video.muted = true; video.muted = true;
video.srcObject = stream; video.srcObject = stream;
// 确保在用户交互后播放
const playVideo = () => { const playVideo = () => {
video.play().catch(err => { video.play().catch(err => {
console.warn('video.play() failed:', err); console.warn('video.play() failed:', err);
// 重试播放
setTimeout(playVideo, 1000); setTimeout(playVideo, 1000);
}); });
}; };
// 延迟执行播放
setTimeout(playVideo, 100);
console.log('attached new video stream:', stream.id); console.log('Attached new video stream:', evt.track.id);
} else { } else {
video.srcObject.addTrack(evt.track); video.srcObject.addTrack(evt.track);
console.log('added track to existing stream:', evt.track.id); console.log('Added track to existing stream:', evt.track.id);
} }
}; };
// Receive data channel // Receive data channel
pc.ondatachannel = (evt) => { pc.ondatachannel =
dc = evt.channel; (evt) => {
dc = evt.channel;
dc.onopen = () => { dc.onopen = () => {
dataChannelLog.textContent += '- open\n';
dataChannelLog.scrollTop = dataChannelLog.scrollHeight;
};
let dcTimeout = null; dataChannelLog.textContent = 'open\n';
dc.onmessage = (evt) => {
if (typeof evt.data !== 'string') {
return;
}
dataChannelLog.textContent += '< ' + evt.data + '\n';
dataChannelLog.scrollTop = dataChannelLog.scrollHeight;
dcTimeout = setTimeout(() => {
if (!dc) {
return;
}
const message = `Pong ${currentTimestamp()}`;
dataChannelLog.textContent += '> ' + message + '\n';
dataChannelLog.scrollTop = dataChannelLog.scrollHeight; dataChannelLog.scrollTop = dataChannelLog.scrollHeight;
dc.send(message); };
}, 1000);
}
dc.onclose = () => { let dcTimeout = null;
clearTimeout(dcTimeout); dc.onmessage =
dcTimeout = null; (evt) => {
dataChannelLog.textContent += '- close\n'; if (typeof evt.data !== 'string') {
dataChannelLog.scrollTop = dataChannelLog.scrollHeight; return;
}; }
}
dataChannelLog.textContent += '< ' + evt.data + '\n';
dataChannelLog.scrollTop = dataChannelLog.scrollHeight;
dcTimeout = setTimeout(() => {
if (!dc) {
return;
}
const message = `Pong ${currentTimestamp()}`;
dataChannelLog.textContent += '> ' + message + '\n';
dataChannelLog.scrollTop = dataChannelLog.scrollHeight;
dc.send(message);
}, 1000);
}
dc.onclose = () => {
clearTimeout(dcTimeout);
dcTimeout = null;
dataChannelLog.textContent = '';
dataChannelLog.scrollTop = dataChannelLog.scrollHeight;
};
}
return pc; return pc;
} }
@@ -239,7 +235,7 @@ async function sendAnswer(pc) {
const answer = pc.localDescription; const answer = pc.localDescription;
msg = JSON.stringify({ msg = JSON.stringify({
type: "answer", type: 'answer',
transmission_id: getTransmissionId(), transmission_id: getTransmissionId(),
user_id: clientId, user_id: clientId,
remote_user_id: getTransmissionId(), remote_user_id: getTransmissionId(),
@@ -258,18 +254,19 @@ async function handleOffer(offer) {
function sendLogin() { function sendLogin() {
websocket.send(JSON.stringify({ websocket.send(JSON.stringify({
type: "login", type: 'login',
user_id: "", user_id: 'web',
})); }));
console.log("send login"); console.log('Send login');
} }
function leaveTransmission() { function leaveTransmission() {
websocket.send(JSON.stringify({ websocket.send(JSON.stringify({
type: "leave_transmission", type: 'leave_transmission',
user_id: clientId, user_id: clientId,
transmission_id: getTransmissionId(), transmission_id: getTransmissionId(),
})); }));
console.log('Leave transmission: ' + getTransmissionId());
} }
function getTransmissionId() { function getTransmissionId() {
@@ -284,11 +281,11 @@ function getTransmissionPwd() {
// Modify sendRequest function to use dynamic password // Modify sendRequest function to use dynamic password
function sendRequest() { function sendRequest() {
websocket.send(JSON.stringify({ websocket.send(JSON.stringify({
type: "join_transmission", type: 'join_transmission',
user_id: clientId, user_id: clientId,
transmission_id: getTransmissionId() + '@' + getTransmissionPwd(), transmission_id: getTransmissionId() + '@' + getTransmissionPwd(),
})); }));
console.log("sent join_transmission"); console.log('Join transmission: ' + getTransmissionId());
} }
function connect() { function connect() {
@@ -332,16 +329,19 @@ function disconnect() {
pc.close(); pc.close();
pc = null; pc = null;
// 清空 video
const video = document.getElementById('video'); const video = document.getElementById('video');
if (video.srcObject) { if (video.srcObject) {
video.srcObject.getTracks().forEach(track => track.stop()); video.srcObject.getTracks().forEach(track => track.stop());
video.srcObject = null; video.srcObject = null;
} }
// 清空日志 const trackIdEl = document.getElementById('track-id');
if (trackIdEl) {
trackIdEl.textContent = '';
}
iceConnectionLog.textContent = ''; iceConnectionLog.textContent = '';
iceGatheringLog.textContent = '';
signalingLog.textContent = ''; signalingLog.textContent = '';
dataChannelLog.textContent += '- disconnected\n'; dataChannelLog.textContent += '- disconnected\n';
} }
@@ -357,5 +357,3 @@ function currentTimestamp() {
return Date.now() - startTime; return Date.now() - startTime;
} }
} }