[fix] resolve issues causing reconnect and initial connection failures

index.html

@@ -10,38 +10,47 @@
     <div class="container">
       <h1>CrossDesk Web Client</h1>
 
-      <div class="card">
-        <h2>连接设置</h2>
-        <div class="option">
-          <label for="transmission-id">传输ID：</label>
-          <input id="transmission-id" type="text" value="475319798" />
+      <!-- Connection settings + status -->
+      <div class="top-card">
+        <div class="connection-card">
+          <h2>连接设置</h2>
+          <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 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 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 class="status-card">
+          <h2>状态</h2>
+          <div class="status-item">
+            ICE 连接状态: <span id="ice-connection-state"></span>
+          </div>
+          <div class="status-item">
+            信令状态: <span id="signaling-state"></span>
+          </div>
+          <div class="status-item">
+            数据通道: <span id="datachannel-state"></span>
+          </div>
         </div>
       </div>
 
+      <!-- Video display -->
       <div id="media" style="display: none">
-        <h2>远程画面</h2>
+        <h2>远程画面 <span id="track-id" class="track-id"></span></h2>
         <video
           id="video"
           playsinline
@@ -51,11 +60,6 @@
           muted
         ></video>
       </div>
-
-      <div class="card">
-        <h2>数据通道</h2>
-        <pre id="data-channel"></pre>
-      </div>
     </div>
 
     <script src="web_client.js"></script>

styles.css

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

web_client.js

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