@yangyongtao/gaea 1.0.3 → 1.1.0

package/public/static/js/env.js

@@ -0,0 +1,74 @@
+const env = (() => {
+    const getOS = () => {
+        // linux? ios?
+        let OSName = 'unknown';
+        if (navigator.appVersion.indexOf('Win') !== -1) OSName = 'win';
+        else if (navigator.appVersion.indexOf('Mac') !== -1) OSName = 'mac';
+        else if (navigator.userAgent.indexOf('Linux') !== -1) OSName = 'linux';
+        else if (navigator.userAgent.indexOf('Android') !== -1) OSName = 'android';
+        return OSName;
+    };
+
+    const getBrowser = () => {
+        let browserName = 'unknown';
+        if (navigator.userAgent.indexOf('Firefox') !== -1) browserName = 'firefox';
+        if (navigator.userAgent.indexOf('Chrome') !== -1) browserName = 'chrome';
+        if (navigator.userAgent.indexOf('Edge') !== -1) browserName = 'edge';
+        if (navigator.userAgent.indexOf('Version/') !== -1) browserName = 'safari';
+        if (navigator.userAgent.indexOf('UCBrowser') !== -1) browserName = 'uc';
+        return browserName;
+    };
+
+    // !to use more sophisticated approach / lib
+    const isPortrait = () => {
+        // ios / mobile app
+        switch (window.orientation) {
+            case 0:
+            case 180:
+                return true;
+        }
+
+        // desktop
+        const orientation = screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type;
+        return orientation === 'portrait-primary';
+    };
+
+    const toggleFullscreen = (enable, element) => {
+        const el = enable ? element : document;
+
+        if (enable) {
+            if (el.requestFullscreen) {
+                el.requestFullscreen();
+            } else if (el.mozRequestFullScreen) { /* Firefox */
+                el.mozRequestFullScreen();
+            } else if (el.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
+                el.webkitRequestFullscreen();
+            } else if (el.msRequestFullscreen) { /* IE/Edge */
+                el.msRequestFullscreen();
+            }
+        } else {
+            if (el.exitFullscreen) {
+                el.exitFullscreen();
+            } else if (el.mozCancelFullScreen) { /* Firefox */
+                el.mozCancelFullScreen();
+            } else if (el.webkitExitFullscreen) { /* Chrome, Safari and Opera */
+                el.webkitExitFullscreen();
+            } else if (el.msExitFullscreen) { /* IE/Edge */
+                el.msExitFullscreen();
+            }
+        }
+    };
+
+    // window.addEventListener('resize', fixScreenLayout);
+    // window.addEventListener('orientationchange', fixScreenLayout);
+    // document.addEventListener('DOMContentLoaded', () => fixScreenLayout(), false);
+
+    return {
+        getOs: getOS,
+        getBrowser: getBrowser,
+        display: () => ({
+            isPortrait: isPortrait,
+            toggleFullscreen: toggleFullscreen,
+        })
+    }
+})(document, log, navigator, screen, window);

package/public/static/js/event/event.js

@@ -0,0 +1,107 @@
+/**
+ * Event publishing / subscribe module.
+ * Just a simple observer pattern.
+ * @version 1
+ */
+const event = (() => {
+  const topics = {};
+
+  return {
+    /**
+     * Subscribes onto some event.
+     *
+     * @param topic The name of the event.
+     * @param listener A callback function to call during the event.
+     * @param order A number in a queue of event handlers to run callback in ordered manner.
+     * @returns {{unsub: unsub}} The function to remove this subscription.
+     * @example
+     * const sub01 = event.sub('rapture', () => {a}, 1)
+     * ...
+     * sub01.unsub()
+     */
+    sub: (topic, listener, order) => {
+      if (!topics[topic]) topics[topic] = [];
+
+      // order handling stuff
+      const value = { order: order || 0, listener: listener };
+      topics[topic].push(value);
+      topics[topic].sort((a, b) => a.order - b.order);
+      const index = topics[topic].indexOf(value);
+
+      return {
+        unsub: () => {
+          topics[topic].splice(index, 1);
+        },
+      };
+    },
+
+    /**
+     * Publishes some event for handling.
+     *
+     * @param topic The name of the event.
+     * @param data Additional data for the event handling.
+     * Because of compatibility we have to use a dumb obj wrapper {a: a, b: b} for params instead of (topic, ...data).
+     * @example
+     * event.pub('rapture', {time: now()})
+     */
+    pub: (topic, data) => {
+      if (!topics[topic] || topics[topic].length < 1) return;
+
+      topics[topic].forEach((listener) => {
+        listener.listener(data !== undefined ? data : {});
+      });
+    },
+  };
+})();
+
+// events
+const LATENCY_CHECK_REQUESTED = "latencyCheckRequested";
+const PING_REQUEST = "pingRequest";
+const PING_RESPONSE = "pingResponse";
+
+const GAME_ROOM_AVAILABLE = "gameRoomAvailable";
+const GAME_SAVED = "gameSaved";
+const GAME_LOADED = "gameLoaded";
+const GAME_PLAYER_IDX = "gamePlayerIndex";
+
+const CONNECTION_READY = "connectionReady";
+const CONNECTION_CLOSED = "connectionClosed";
+
+const CHAT = "chat";
+const NUM_PLAYER = "num_player";
+
+const MEDIA_STREAM_INITIALIZED = "mediaStreamInitialized";
+const MEDIA_STREAM_SDP_AVAILABLE = "mediaStreamSdpAvailable";
+const MEDIA_STREAM_CANDIDATE_ADD = "mediaStreamCandidateAdd";
+const MEDIA_STREAM_CANDIDATE_FLUSH = "mediaStreamCandidateFlush";
+const MEDIA_STREAM_READY = "mediaStreamReady";
+
+const GAMEPAD_CONNECTED = "gamepadConnected";
+const GAMEPAD_DISCONNECTED = "gamepadDisconnected";
+
+const MENU_HANDLER_ATTACHED = "menuHandlerAttached";
+const MENU_PRESSED = "menuPressed";
+const MENU_RELEASED = "menuReleased";
+
+const KEY_PRESSED = "keyPressed";
+const KEY_RELEASED = "keyReleased";
+const KEY_STATE_UPDATED = "keyStateUpdated";
+const KEYBOARD_TOGGLE_FILTER_MODE = "keyboardToggleFilterMode";
+const KEYBOARD_KEY_PRESSED = "keyboardKeyPressed";
+const AXIS_CHANGED = "axisChanged";
+const CONTROLLER_UPDATED = "controllerUpdated";
+
+const MOUSE_DOWN = "mouseDown";
+const MOUSE_UP = "mouseUp";
+const MOUSE_MOVE = "mouseMove";
+const MOUSE_WHEEL = "mouseWheel";
+
+const DPAD_TOGGLE = "dpadToggle";
+const STATS_TOGGLE = "statsToggle";
+const HELP_OVERLAY_TOGGLED = "helpOverlayToggled";
+
+const SETTINGS_CHANGED = "settingsChanged";
+const SETTINGS_CLOSED = "settingsClosed";
+
+const UPDATE_APP_LIST = "updateapplist";
+const CLIENT_INIT = "clientInit";

package/public/static/js/init.js

@@ -0,0 +1,8 @@
+document.getElementById('connectButton').addEventListener('click', function() {
+    const serverAddress = document.getElementById('serverAddress').value;
+    // if (!serverAddress) {
+    //     alert('请输入服务器地址');
+    //     return;
+    // }
+    socket.connect(location.protocol, serverAddress);
+});

package/public/static/js/initcloudmorph.js

@@ -0,0 +1 @@
+socket.connect(location.protocol, `${location.host}/wscloudmorph`);

package/public/static/js/log.js

@@ -0,0 +1,35 @@
+/**
+ * Logging module.
+ *
+ * @version 2
+ */
+const log = (() => {
+    const noop = () => ({})
+
+    const _log = {
+        ASSERT: 1,
+        ERROR: 2,
+        WARN: 3,
+        INFO: 4,
+        DEBUG: 5,
+        TRACE: 6,
+
+        DEFAULT: 5,
+
+        set level(level) {
+            this.assert = level >= this.ASSERT ? console.assert.bind(window.console) : noop;
+            this.error = level >= this.ERROR ? console.error.bind(window.console) : noop;
+            this.warn = level >= this.WARN ? console.warn.bind(window.console) : noop;
+            this.info = level >= this.INFO ? console.info.bind(window.console) : noop;
+            this.debug = level >= this.DEBUG ? console.debug.bind(window.console) : noop;
+            this.trace = level >= this.TRACE ? console.log.bind(window.console) : noop;
+            this._level = level;
+        },
+        get level() {
+            return this._level;
+        }
+    }
+    _log.level = _log.DEFAULT;
+
+    return _log
+})(console, window);

package/public/static/js/network/ajax.js

@@ -0,0 +1,29 @@
+/**
+ * AJAX request module.
+ * @version 1
+ */
+const ajax = (() => {
+    const defaultTimeout = 10000;
+
+    return {
+        fetch: (url, options, timeout = defaultTimeout) => new Promise((resolve, reject) => {
+            const controller = new AbortController();
+            const signal = controller.signal;
+            const allOptions = Object.assign({}, options, signal);
+
+            // fetch(url, {...options, signal})
+            fetch(url, allOptions)
+                .then(resolve, () => {
+                    controller.abort();
+                    return reject
+                });
+
+            // auto abort when a timeout reached
+            setTimeout(() => {
+                controller.abort();
+                reject();
+            }, timeout);
+        }),
+        defaultTimeoutMs: () => defaultTimeout
+    }
+})();

package/public/static/js/network/rtcp.js

@@ -0,0 +1,172 @@
+/**
+ * RTCP connection module.
+ * @version 1
+ */
+const rtcp = (() => {
+    let connection;
+    let inputChannel;
+    let mediaStream;
+    let candidates = Array();
+    let isAnswered = false;
+    let isFlushing = false;
+
+    let connected = false;
+    let inputReady = false;
+
+    const start = (iceservers) => {
+        log.info("[rtcp] <- received STUN/TURN config from the worker", iceservers);
+
+        let conf
+        if (iceservers !== "") {
+            conf = {
+                iceservers: {urls: iceservers}
+            }
+        }
+
+        connection = conf ? new RTCPeerConnection(conf) : new RTCPeerConnection();
+
+        mediaStream = new MediaStream();
+
+        connection.ondatachannel = (e) => {
+            log.debug(`[rtcp] ondatachannel: ${e.channel.label}`);
+            inputChannel = e.channel;
+            inputChannel.onopen = () => {
+                log.debug("[rtcp] the input channel has opened");
+                inputReady = true;
+                event.pub(CONNECTION_READY);
+            };
+            inputChannel.onclose = () => {
+                inputReady = false;
+                log.debug("[rtcp] the input channel has closed");
+            }
+        };
+
+        connection.oniceconnectionstatechange = ice.onIceConnectionStateChange;
+        connection.onicegatheringstatechange = ice.onIceStateChange;
+        connection.onicecandidate = ice.onIcecandidate;
+        connection.ontrack = (event) => {
+            mediaStream.addTrack(event.track);
+        };
+
+        socket.send({type: "initwebrtc"});
+    };
+
+    const ice = (() => {
+        let timeForIceGathering;
+        const ICE_TIMEOUT = 2000;
+
+        return {
+            onIcecandidate: (event) => {
+                // this trigger when setRemoteDesc success
+                // send any candidate to worker
+                if (event.candidate != null) {
+                    const candidate = JSON.stringify(event.candidate);
+                    log.info('[rtcp] got ice candidate', candidate);
+                    socket.send({type: "candidate", data: btoa(candidate)});
+                }
+            },
+            onIceStateChange: (event) => {
+                switch (event.target.iceGatheringState) {
+                    case "gathering":
+                        log.info("[rtcp] ice gathering");
+                        timeForIceGathering = setTimeout(() => {
+                            log.info(`[rtcp] ice gathering was aborted due to timeout ${ICE_TIMEOUT}ms`);
+                        }, ICE_TIMEOUT);
+                        break;
+                    case "complete":
+                        log.info("[rtcp] ice gathering completed");
+                        if (timeForIceGathering) {
+                            clearTimeout(timeForIceGathering);
+                        }
+                }
+            },
+            onIceConnectionStateChange: () => {
+                log.info(`[rtcp] <- iceConnectionState: ${connection.iceConnectionState}`);
+                switch (connection.iceConnectionState) {
+                    case "connected": {
+                        log.info("[rtcp] connected...");
+                        connected = true;
+                        break;
+                    }
+                    case "disconnected": {
+                        log.info("[rtcp] disconnected...");
+                        connected = false;
+                        event.pub(CONNECTION_CLOSED);
+                        break;
+                    }
+                    case "failed": {
+                        log.error("[rtcp] connection failed, retry...");
+                        connected = false;
+                        connection
+                            .createOffer({iceRestart: true})
+                            .then((description) =>
+                                connection.setLocalDescription(description).catch(log.error)
+                            )
+                            .catch(log.error);
+                        break;
+                    }
+                }
+            },
+        };
+    })();
+
+    return {
+        start: start,
+        setRemoteDescription: async (data, media) => {
+            try {
+                if (isAnswered) {
+                    log.warn("[rtcp] Already answered, ignoring duplicate offer");
+                    return;
+                }
+
+                const offer = new RTCSessionDescription(JSON.parse(atob(data)));
+                
+                if (connection.signalingState === "stable" || connection.signalingState === "have-remote-offer") {
+                    await connection.setRemoteDescription(offer);
+                    log.info("[rtcp] Remote description set successfully");
+
+                    const answer = await connection.createAnswer();
+                    answer.sdp = answer.sdp.replace(/(a=fmtp:111 .*)/g, "$1;stereo=1;sprop-stereo=1");
+                    
+                    await connection.setLocalDescription(answer);
+                    isAnswered = true;
+                    log.info("[rtcp] Local description set successfully");
+                    
+                    event.pub(MEDIA_STREAM_CANDIDATE_FLUSH);
+                    socket.send({type: "answer", data: btoa(JSON.stringify(answer))});
+                    media.srcObject = mediaStream;
+                } else {
+                    log.warn(`[rtcp] Invalid signaling state for setting remote description: ${connection.signalingState}`);
+                    return;
+                }
+            } catch (error) {
+                log.error("[rtcp] Error in setRemoteDescription:", error);
+                isAnswered = false;
+                throw error;
+            }
+        },
+        addCandidate: (data) => {
+            if (data === "") {
+                event.pub(MEDIA_STREAM_CANDIDATE_FLUSH);
+            } else {
+                candidates.push(data);
+            }
+        },
+        flushCandidate: () => {
+            if (isFlushing || !isAnswered) return;
+            isFlushing = true;
+            candidates.forEach((data) => {
+                const d = atob(data);
+                const candidate = new RTCIceCandidate(JSON.parse(d));
+                log.debug("[rtcp] add candidate", d);
+                connection.addIceCandidate(candidate).catch(log.error);
+            });
+            isFlushing = false;
+        },
+        input: (data) => {
+            if (inputChannel) inputChannel.send(data);
+        },
+        isConnected: () => connected,
+        isInputReady: () => inputReady,
+    };
+})(event, socket, log);

package/public/static/js/network/socket.js

@@ -0,0 +1,106 @@
+/**
+ * WebSocket connection module.
+ *
+ *  Needs init() call.
+ *
+ * @version 1
+ */
+const socket = (() => {
+  const pingIntervalMs = 2000; // 2 secs
+  let conn;
+  let curPacketId = "";
+
+  const connect = (protocol, addr) => {
+    const address = `${protocol !== "https:" ? "ws" : "wss"}://${addr}/ws`;
+    console.info(`[ws] connecting to ${address}`);
+    conn = new WebSocket(address);
+
+    let pingInterval;
+    conn.onerror = (error) => log.error(`[ws] ${error}`);
+    conn.onclose = () => log.info("[ws] closed");
+    
+    conn.onmessage = (response) => {
+      const data = JSON.parse(response.data);
+      const message = data.type;
+
+      if (message !== "heartbeat")
+        log.debug(`[ws] <- message '${message}' `, data);
+
+      switch (message) {
+        case "init":
+          event.pub(MEDIA_STREAM_INITIALIZED, { stunturn: data.data });
+          break;
+        case "offer":
+          event.pub(MEDIA_STREAM_SDP_AVAILABLE, { sdp: data.data });
+          break;
+        case "candidate":
+          event.pub(MEDIA_STREAM_CANDIDATE_ADD, { candidate: data.data });
+          break;
+        case "heartbeat":
+          event.pub(PING_RESPONSE);
+          break;
+        case "checkLatency":
+          curPacketId = data.packet_id;
+          const addresses = data.data.split(",");
+          event.pub(LATENCY_CHECK_REQUESTED, {
+            packetId: curPacketId,
+            addresses: addresses,
+          });
+          break;
+        case "CHAT":
+          event.pub(CHAT, { chatrow: data.data });
+          break;
+        case "NUMPLAYER":
+          event.pub(NUM_PLAYER, { numplayers: data.data });
+          break;
+        case "INIT":
+          event.pub(CLIENT_INIT, { data: data.data });
+          break;
+        case "UPDATEAPPLIST":
+          event.pub(UPDATE_APP_LIST, { data: data.data });
+          break;
+      }
+    };
+
+    return new Promise((resolve, reject) => {
+      conn.onopen = () => {
+        log.info("[ws] <- open connection");
+        log.info(`[ws] -> setting ping interval to ${pingIntervalMs}ms`);
+        pingInterval = setInterval(ping, pingIntervalMs);
+        resolve(conn);
+      };
+      conn.onerror = (error) => {
+        log.error(`[ws] ${error}`);
+        reject(error);
+      };
+    });
+  };
+
+  const ping = () => {
+    const time = Date.now();
+    send({ id: "heartbeat", data: time.toString() });
+    event.pub(PING_REQUEST, { time: time });
+  };
+
+  const send = (data) => {
+    if (conn && conn.readyState === WebSocket.OPEN) {
+      conn.send(JSON.stringify(data));
+    } else {
+      log.error("WebSocket is not open. Current state:", conn ? conn.readyState : "not initialized");
+    }
+  };
+
+  const latency = (workers, packetId) =>
+    send({
+      id: "checkLatency",
+      data: JSON.stringify(workers),
+      packet_id: packetId,
+    });
+
+  return {
+    send: send,
+    latency: latency,
+    connect: connect,
+  };
+})(event, log);
+window.socketInstance = socket