@yangyongtao/gaea 1.0.3 → 1.1.0

package/public/static/js/app.js

@@ -0,0 +1,359 @@
+const pingIntervalMs = 2000; // 2 secs
+const MOUSE_DOWN = 0;
+const MOUSE_UP = 1;
+const MOUSE_LEFT = 0;
+const MOUSE_RIGHT = 1;
+var isFullscreen = false;
+
+// TODO: move to chat.js // Non core logic
+const chatoutput = document.getElementById("chatoutput");
+const chatsubmit = document.getElementById("chatsubmit");
+const username = document.getElementById("chatusername");
+const message = document.getElementById("chatmessage");
+const fullscreen = document.getElementById("fullscreen");
+const appd = document.getElementById("app");
+const chatd = document.getElementById("chat");
+const numplayers = document.getElementById("numplayers");
+const discoverydropdown = document.getElementById("discoverydropdown");
+const appTitle = document.getElementById("appTitle");
+
+var offerst;
+// const offer = new RTCSessionDescription(JSON.parse(atob(data)));
+// await pc.setRemoteDescription(offer);
+var appList = [];
+
+let isWebRTCInitialized = false;
+
+function init() {
+  const serverAddress = document.getElementById("serverAddress").value || "192.168.3.58:8080";
+  socket.connect(location.protocol, serverAddress).then(() => {
+    if (!isWebRTCInitialized) {
+      initWebrtc();
+      isWebRTCInitialized = true;
+    }
+    const timeoutMs = 1111;
+    const address = `apps`;
+    ajax
+      .fetch(address, { method: "GET", redirect: "follow" }, timeoutMs)
+      .then((data) => {
+        data.json().then((body) => {
+          updateAppList(body);
+        });
+      });
+  });
+}
+
+function send(data) {
+  if (conn && conn.readyState === WebSocket.OPEN) {
+    conn.send(JSON.stringify(data));
+  } else {
+    console.error("WebSocket is not open. Current state:", conn ? conn.readyState : "not initialized");
+  }
+}
+
+// 初始化移至init.js中的按钮点击事件处理
+function initWebrtc() {
+  pc = new RTCPeerConnection({
+    iceServers: [
+      {
+        urls: "stun:stun.l.google.com:19302",
+      },
+    ],
+  });
+  
+  // 监控信令状态变化
+  pc.onsignalingstatechange = () => {
+    console.log(`[RTC] Signaling State: ${pc.signalingState}`);
+  };
+
+  // 监控连接状态变化
+  pc.onconnectionstatechange = () => {
+    console.log(`[RTC] Connection State: ${pc.connectionState}`);
+  };
+
+  // 增强ICE连接状态监控
+  pc.oniceconnectionstatechange = () => {
+    console.log(`[RTC] ICE Connection State: ${pc.iceConnectionState}`);
+    if (pc.iceConnectionState === 'failed') {
+      console.log('[RTC] ICE连接失败，尝试重新协商...');
+      pc.restartIce();
+    }
+  };
+
+  // 监控ICE收集状态
+  pc.onicegatheringstatechange = () => {
+    console.log(`[RTC] ICE Gathering State: ${pc.iceGatheringState}`);
+  };
+
+  pc.onicecandidate = (event) => {
+    if (event.candidate) {
+      console.log('[RTC] 发送新的ICE candidate');
+      send({
+        type: "CANDIDATE",
+        data: JSON.stringify(event.candidate)
+      });
+    } else {
+      console.log('[RTC] ICE candidate收集完成');
+    }
+  };
+
+  pc.ontrack = function (event) {
+    console.log('[RTC] 收到远程媒体流');
+    var el = document.getElementById("app-screen");
+    el.srcObject = event.streams[0];
+  };
+
+  pc.addTransceiver("video", {
+    direction: "recvonly",
+  });
+}
+
+function handleOffer(offerData) {
+  console.log('[RTC] 处理远程offer');
+  const offer = JSON.parse(atob(offerData));
+  console.log('[RTC] 当前信令状态:', pc.signalingState);
+  
+  pc.setRemoteDescription(new RTCSessionDescription(offer))
+    .then(() => {
+      console.log('[RTC] 成功设置远程描述，创建answer');
+      return pc.createAnswer();
+    })
+    .then(answer => {
+      console.log('[RTC] 创建answer成功，设置本地描述');
+      return pc.setLocalDescription(answer);
+    })
+    .then(() => {
+      console.log('[RTC] 成功设置本地描述，发送answer');
+      send({
+        type: "ANSWER",
+        data: btoa(JSON.stringify(pc.localDescription))
+      });
+    })
+    .catch(err => {
+      console.error('[RTC] 处理offer过程出错:', err);
+      console.error('[RTC] 错误时的信令状态:', pc.signalingState);
+    });
+}
+
+// 处理ICE candidate
+function handleCandidate(candidateData) {
+  console.log('[RTC] 收到新的ICE candidate');
+  try {
+    const candidate = JSON.parse(candidateData);
+    console.log('[RTC] 解析ICE candidate:', candidate);
+    
+    if (!pc || pc.signalingState === 'closed') {
+      console.error('[RTC] 无法添加ICE candidate: RTCPeerConnection未初始化或已关闭');
+      return;
+    }
+
+    pc.addIceCandidate(new RTCIceCandidate(candidate))
+      .then(() => {
+        console.log('[RTC] 成功添加ICE candidate');
+        console.log('[RTC] 当前ICE连接状态:', pc.iceConnectionState);
+        console.log('[RTC] 当前ICE收集状态:', pc.iceGatheringState);
+      })
+      .catch(err => {
+        console.error('[RTC] 添加ICE candidate失败:', err);
+        console.error('[RTC] 失败时的信令状态:', pc.signalingState);
+        console.error('[RTC] 失败时的ICE连接状态:', pc.iceConnectionState);
+      });
+  } catch (err) {
+    console.error('[RTC] 解析ICE candidate数据失败:', err);
+  }
+}
+const appscreen = document.getElementById("app-screen");
+
+// log key
+document.addEventListener("keydown", (e) => {
+  if (
+    document.activeElement === username ||
+    document.activeElement === chatmessage
+  ) {
+    return;
+  }
+  send({
+    type: "KEYDOWN",
+    data: JSON.stringify({
+      keyCode: e.keyCode,
+    }),
+  });
+});
+
+document.addEventListener("keyup", (e) => {
+  if (
+    document.activeElement === username ||
+    document.activeElement === chatmessage
+  ) {
+    return;
+  }
+  send({
+    type: "KEYUP",
+    data: JSON.stringify({
+      keyCode: e.keyCode,
+    }),
+  });
+});
+
+discoverydropdown.addEventListener("change", () => {
+  app = appList[discoverydropdown.selectedIndex];
+  socket.connect("http", app.addr).then(() => {
+    if (!isWebRTCInitialized) {
+      initWebrtc();
+      isWebRTCInitialized = true;
+    }
+    updatePage(app);
+  });
+});
+
+// Add the event listeners for mousedown, mousemove, and mouseup
+appscreen.addEventListener("mousedown", (e) => {
+  x = e.offsetX;
+  y = e.offsetY;
+  boundRect = appscreen.getBoundingClientRect();
+  console.log(e.offsetX, e.offsetY);
+  send({
+    type: "MOUSEDOWN",
+    data: JSON.stringify({
+      isLeft: e.button == 0 ? 1 : 0, // 1 is right button
+      x: e.offsetX,
+      y: e.offsetY,
+      width: boundRect.width,
+      height: boundRect.height,
+    }),
+  });
+});
+
+appscreen.addEventListener("mouseup", (e) => {
+  x = e.offsetX;
+  y = e.offsetY;
+  boundRect = appscreen.getBoundingClientRect();
+  console.log(e.offsetX, e.offsetY);
+  send({
+    type: "MOUSEUP",
+    data: JSON.stringify({
+      isLeft: e.button == 0 ? 1 : 0, // 1 is right button
+      x: e.offsetX,
+      y: e.offsetY,
+      width: boundRect.width,
+      height: boundRect.height,
+    }),
+  });
+});
+
+appscreen.addEventListener("mousemove", function (e) {
+  x = e.offsetX;
+  y = e.offsetY;
+  boundRect = appscreen.getBoundingClientRect();
+  send({
+    type: "MOUSEMOVE",
+    data: JSON.stringify({
+      isLeft: e.button == 0 ? 1 : 0, // 1 is right button
+      x: e.offsetX,
+      y: e.offsetY,
+      width: boundRect.width,
+      height: boundRect.height,
+    }),
+  });
+});
+
+appscreen.addEventListener("click", (e) => {
+  e.preventDefault();
+  return false;
+});
+
+chatsubmit.addEventListener("click", (e) => {
+  send({
+    type: "CHAT",
+    data: JSON.stringify({
+      user: username.value,
+      message: chatmessage.value,
+    }),
+  });
+});
+
+fullscreen.addEventListener("click", (e) => {
+  isFullscreen = !isFullscreen;
+  if (isFullscreen) {
+    chatd.style.display = "none";
+    appd.style.display = "flex";
+    appd.style.flexDirection = "row";
+    appscreen.style.height = "100vh";
+    appscreen.style.width = "133.33vh"; // maintain 800x600
+  } else {
+    chatd.style.display = "block";
+    appd.style.display = "block";
+    appscreen.style.height = "85vh";
+    appscreen.style.width = `${(85 * 8) / 6}vh`; // maintain 800x600
+  }
+});
+
+function appendChatMessage(data) {
+  chatrow = JSON.parse(data.data);
+
+  var divNode = document.createElement("div");
+  var userSpanNode = document.createElement("span");
+  var boldNode = document.createElement("strong");
+  var messageSpanNode = document.createElement("span");
+  userSpanNode.setAttribute("class", "output-user-label");
+  messageSpanNode.setAttribute("class", "output-message-label");
+  divNode.setAttribute("class", "output-row");
+  var userTextnode = document.createTextNode(chatrow.user);
+  var messageTextnode = document.createTextNode(chatrow.message);
+  boldNode.appendChild(userTextnode);
+  userSpanNode.appendChild(boldNode);
+  messageSpanNode.appendChild(messageTextnode);
+  divNode.appendChild(userSpanNode);
+  divNode.appendChild(messageSpanNode);
+  chatoutput.appendChild(divNode);
+  chatoutput.scrollTop = chatoutput.scrollHeight;
+}
+
+function updateNumPlayers(data) {
+  sNumPlayers = JSON.parse(data.data);
+  numplayers.innerText = "Number of players: " + sNumPlayers;
+}
+
+// function isConnectable(addr) {
+//   const timeoutMs = 1111;
+//   const latency = await ajax.fetch(`${app.addr}/echo`, {method: "GET", redirect: "follow"}, timeoutMs);
+// }
+
+function updateAppList(data) {
+  console.log(data);
+  appList = JSON.parse(data.data);
+  discoverydropdown.innerHTML = "";
+  const timeoutMs = 1111;
+
+  Promise.all(
+    appList.map((app) => {
+      const start = Date.now();
+      return ajax
+        .fetch(`echo`, { method: "GET", redirect: "follow" }, timeoutMs)
+        .then(() => ({ [app.addr]: Date.now() - start }))
+        .catch(() => ({ [app.addr]: 9999 }));
+    })
+  ).then((servers) => {
+    const latencies = Object.assign({}, ...servers);
+    console.log("[ping] <->", latencies);
+
+    for (app of appList) {
+      appEntry = document.createElement("option");
+      appEntry.innerText = app.app_name + "-" + latencies[app.addr] + "ms";
+      discoverydropdown.appendChild(appEntry);
+    }
+  });
+}
+
+function updatePage(app) {
+  chatd.style.visibility = app.has_chat;
+  appTitle.innerText = app.page_title;
+  numplayers.style.visibility = app.collaborative;
+}
+
+function updateAnswer(data) {
+  console.log(`answer ${data.data}`);
+  pc.setRemoteDescription(
+    new RTCSessionDescription(JSON.parse(atob(data.data)))
+  );
+}

package/public/static/js/appcontroller.js

@@ -0,0 +1,207 @@
+/**
+ * App controller module.
+ * @version 1
+ */
+(() => {
+  const pingIntervalMs = 2000; // 2 secs
+  var isFullscreen = false;
+
+  // TODO: move to chat.js // Non core logic
+  const appBody = document.getElementById("app-body");
+  const appd = document.getElementById("app");
+  const appTitle = document.getElementById("app-title");
+  const appScreen = document.getElementById("app-screen");
+
+  var offerst;
+
+  const onConnectionReady = () => {
+    start();
+  };
+
+  const start = () => {
+    if (!rtcp.isConnected()) {
+      log.error("App cannot load. Please refresh");
+      return;
+    }
+
+    if (!rtcp.isInputReady()) {
+      log.error("App is not ready yet. Please wait");
+      return;
+    }
+
+    log.info("[control] app start");
+
+    // TODO: Remove
+    // socket.start(gameList.getCurrentGame(), env.isMobileDevice(), room.getId());
+
+    // // end clear
+    // input.poll().enable();
+  };
+
+  const onKeyPress = (data) => {
+    rtcp.input(
+      JSON.stringify({
+        type: "KEYDOWN",
+        data: JSON.stringify({
+          keyCode: data.key,
+        }),
+      })
+    );
+  };
+
+  const onKeyRelease = (data) => {
+    rtcp.input(
+      JSON.stringify({
+        type: "KEYUP",
+        data: JSON.stringify({
+          keyCode: data.key,
+        }),
+      })
+    );
+  };
+
+  const onMouseDown = (data) => {
+    appScreen.muted = false;
+    rtcp.input(
+      JSON.stringify({
+        type: "MOUSEDOWN",
+        data: JSON.stringify(data),
+      })
+    );
+  };
+
+  const onMouseWheel = (data) => {
+    appScreen.muted = false;
+    rtcp.input(
+      JSON.stringify({
+        type: "MOUSEWHEEL",
+        data: JSON.stringify(data),
+      })
+    );
+  };
+
+  const onMouseUp = (data) => {
+    rtcp.input(
+      JSON.stringify({
+        type: "MOUSEUP",
+        data: JSON.stringify(data),
+      })
+    );
+  };
+  window.onMouseUp = onMouseUp
+
+  const onMouseMove = (data) => {
+    rtcp.input(
+      JSON.stringify({
+        type: "MOUSEMOVE",
+        data: JSON.stringify(data),
+      })
+    );
+  };
+
+  document.addEventListener("keydown", (e) => {
+    //if (
+      //document.activeElement === username ||
+      //document.activeElement === chatmessage
+    //) {
+      //return;
+    //}
+    event.pub(KEY_PRESSED, { key: e.keyCode });
+  });
+
+  document.addEventListener("keyup", (e) => {
+    //if (
+      //document.activeElement === username ||
+      //document.activeElement === chatmessage
+    //) {
+      //return;
+    //}
+    event.pub(KEY_RELEASED, { key: e.keyCode });
+  });
+
+  appScreen.addEventListener("wheel", (e) => {
+    boundRect = appScreen.getBoundingClientRect();
+    event.pub(MOUSE_WHEEL, {
+      isLeft: e.button == 0 ? 1 : 0, // 1 is right button
+      x: e.clientX - boundRect.left,
+      y: e.clientY - boundRect.top,
+      width: boundRect.width,
+      height: boundRect.height,
+      delta: -e.deltaY
+    });
+  })
+
+  appScreen.addEventListener("mousedown", (e) => {
+    boundRect = appScreen.getBoundingClientRect();
+    event.pub(MOUSE_DOWN, {
+      isLeft: e.button == 0 ? 1 : 0, // 1 is right button
+      x: e.offsetX,
+      y: e.offsetY,
+      width: boundRect.width,
+      height: boundRect.height,
+      delta: 0
+    });
+  });
+
+  appScreen.addEventListener("mouseup", (e) => {
+    boundRect = appScreen.getBoundingClientRect();
+    event.pub(MOUSE_UP, {
+      isLeft: e.button == 0 ? 1 : 0, // 1 is right button
+      x: e.offsetX,
+      y: e.offsetY,
+      width: boundRect.width,
+      height: boundRect.height,
+      delta: 0
+    });
+  });
+
+  appScreen.addEventListener("mousemove", function (e) {
+    boundRect = appScreen.getBoundingClientRect();
+    event.pub(MOUSE_MOVE, {
+      isLeft: e.button == 0 ? 1 : 0, // 1 is right button
+      x: e.clientX - boundRect.left,
+      y: e.clientY - boundRect.top,
+      width: boundRect.width,
+      height: boundRect.height,
+      delta: 0
+    });
+  });
+
+  document.addEventListener(
+    "contextmenu",
+    function (e) {
+      if (isFullscreen) {
+        e.preventDefault();
+      }
+    },
+    false
+  );
+
+  event.sub(MEDIA_STREAM_INITIALIZED, (data) => {
+    rtcp.start(data.stunturn);
+  });
+  event.sub(MEDIA_STREAM_SDP_AVAILABLE, (data) =>
+    rtcp.setRemoteDescription(data.sdp, appScreen)
+  );
+  event.sub(MEDIA_STREAM_CANDIDATE_ADD, (data) =>
+    rtcp.addCandidate(data.candidate)
+  );
+  event.sub(MEDIA_STREAM_CANDIDATE_FLUSH, () => rtcp.flushCandidate());
+  event.sub(MEDIA_STREAM_READY, () => rtcp.start());
+  event.sub(CONNECTION_READY, onConnectionReady);
+  //event.sub(NUM_PLAYER, ({ data }) => updateNumPlayers(data));
+  //event.sub(CLIENT_INIT, ({ data }) => {
+  //initApps(JSON.parse(data));
+  //});
+  //event.sub(UPDATE_APP_LIST, ({ data }) => {
+  //updateAppList(JSON.parse(data));
+  //});
+  // event.sub(CONNECTION_CLOSED, () => input.poll().disable());
+  event.sub(KEY_PRESSED, onKeyPress);
+  event.sub(KEY_RELEASED, onKeyRelease);
+  event.sub(MOUSE_MOVE, onMouseMove);
+  event.sub(MOUSE_DOWN, onMouseDown);
+  event.sub(MOUSE_WHEEL, onMouseWheel);
+  event.sub(MOUSE_UP, onMouseUp);
+  event.sub(KEY_STATE_UPDATED, (data) => rtcp.input(data));
+})(document, event, env);

package/public/static/js/dist/game.dev.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var pingIntervalMs = 2000; // 2 secs
+
+var MOUSE_DOWN = 0;
+var MOUSE_UP = 1;
+var MOUSE_LEFT = 0;
+var MOUSE_RIGHT = 1; // const offer = new RTCSessionDescription(JSON.parse(atob(data)));
+// await pc.setRemoteDescription(offer);
+
+function init() {
+  var address = "".concat(location.protocol !== "https:" ? "ws" : "wss", "://").concat(location.host, "/ws");
+  console.info("[ws] connecting to ".concat(address));
+  conn = new WebSocket(address); // Clear old roomID
+
+  conn.onopen = function () {
+    console.log("[ws] <- open connection");
+    console.log("[ws] -> setting ping interval to ".concat(pingIntervalMs, "ms")); // !to add destructor if SPA
+    // setInterval(ping, pingIntervalMs);
+  };
+
+  conn.onerror = function (error) {
+    return console.log("[ws] ".concat(error));
+  };
+
+  conn.onclose = function () {
+    return console.log("[ws] closed");
+  }; // Message received from server
+
+
+  conn.onmessage = function (response) {
+    var data = JSON.parse(response.data);
+    var message = data.id;
+    if (message !== "heartbeat") console.log("[ws] <- message '".concat(message, "' "), data);
+
+    switch (message) {}
+  };
+}
+
+function send(data) {
+  conn.send(JSON.stringify(data));
+}
+
+var pc = new RTCPeerConnection({
+  iceServers: [{
+    urls: "stun:stun.l.google.com:19302"
+  }]
+});
+
+pc.oniceconnectionstatechange = function (e) {
+  return console.log(pc.iceConnectionState);
+};
+
+pc.onicecandidate = function (event) {
+  console.log(event.candidate);
+};
+
+pc.ontrack = function (event) {
+  var el = document.getElementById("app-screen");
+  el.srcObject = event.streams[0];
+}; // start session
+// window.startSession = () => {
+
+
+pc.addTransceiver("video", {
+  direction: "recvonly"
+});
+pc.createOffer().then(function (offer) {
+  console.log(offer);
+  $.post("http://" + location.host + "/signal", btoa(JSON.stringify(offer)), function (data, status) {
+    console.log("answer ".concat(data, " and status is ").concat(status));
+    pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(atob(data))));
+  });
+  pc.setLocalDescription(offer);
+}); // .catch(log);
+// }
+
+init(); // log key
+
+document.addEventListener("keydown", logKey);
+
+function logKey(e) {
+  console.log(e.keyCode);
+  send({
+    type: "KEYDOWN",
+    data: JSON.stringify({
+      keyCode: e.keyCode
+    })
+  });
+}
+
+document.addEventListener("contextmenu", function (event) {
+  return event.preventDefault();
+});
+var myPics = document.getElementById("app-screen"); // Add the event listeners for mousedown, mousemove, and mouseup
+
+myPics.addEventListener("mouseup", function (e) {
+  x = e.offsetX;
+  y = e.offsetY;
+  b = e.button;
+  boundRect = myPics.getBoundingClientRect();
+  console.log(e.offsetX, e.offsetY);
+  send({
+    type: "MOUSE",
+    data: JSON.stringify({
+      isLeft: e.button == 0 ? 1 : 0,
+      // 1 is right button
+      isDown: 0,
+      x: e.offsetX,
+      y: e.offsetY,
+      width: boundRect.width,
+      height: boundRect.height
+    })
+  });
+});
+myPics.addEventListener("mousedown", function (e) {
+  x = e.offsetX;
+  y = e.offsetY;
+  boundRect = myPics.getBoundingClientRect();
+  console.log(e.offsetX, e.offsetY);
+  send({
+    type: "MOUSE",
+    data: JSON.stringify({
+      isLeft: e.button == 0 ? 1 : 0,
+      // 1 is right button
+      isDown: 1,
+      x: e.offsetX,
+      y: e.offsetY,
+      width: boundRect.width,
+      height: boundRect.height
+    })
+  });
+});
+myPics.addEventListener("click", function (e) {
+  e.preventDefault();
+  return false;
+});