added demo

demo/extension-websocket/archive/archive_files.json

@@ -0,0 +1 @@
+{"content":[{"name":"game.projectc","size":3195,"pieces":[{"name":"game.projectc0","offset":0}]},{"name":"game.arci","size":1488,"pieces":[{"name":"game.arci0","offset":0}]},{"name":"game.arcd","size":19614,"pieces":[{"name":"game.arcd0","offset":0}]},{"name":"game.dmanifest","size":2532,"pieces":[{"name":"game.dmanifest0","offset":0}]},{"name":"game.public.der","size":162,"pieces":[{"name":"game.public.der0","offset":0}]}]}

demo/extension-websocket/archive/game.projectc0

@@ -0,0 +1,182 @@
+[project]
+title = extension-websocket
+version = 1.0
+write_log = 0
+compress_archive = 1
+publisher = unnamed
+developer = unnamed
+_dependencies = https://github.com/GameAnalytics/defold-openssl/archive/1.0.0.zip
+
+[display]
+width = 640
+height = 960
+high_dpi = 0
+samples = 0
+fullscreen = 0
+update_frequency = 0
+vsync = 1
+display_profiles = /builtins/render/default.display_profilesc
+dynamic_orientation = 0
+
+[render]
+clear_color_red = 0
+clear_color_green = 0
+clear_color_blue = 0
+clear_color_alpha = 0
+
+[physics]
+type = 2D
+gravity_y = -10
+debug = 0
+debug_alpha = 0.9
+world_count = 4
+gravity_x = 0
+gravity_z = 0
+scale = 1
+allow_dynamic_transforms = 0
+debug_scale = 30
+max_collisions = 64
+max_contacts = 128
+contact_impulse_limit = 0
+ray_cast_limit_2d = 64
+ray_cast_limit_3d = 128
+trigger_overlap_capacity = 16
+
+[bootstrap]
+main_collection = /examples/websocket.collectionc
+render = /builtins/render/default.renderc
+
+[graphics]
+default_texture_min_filter = linear
+default_texture_mag_filter = linear
+max_draw_calls = 1024
+max_characters = 8192
+max_debug_vertices = 10000
+texture_profiles = /builtins/graphics/default.texture_profiles
+verify_graphics_calls = 1
+memory_size = 512
+
+[shader]
+output_spirv = 0
+
+[sound]
+gain = 1
+max_sound_data = 128
+max_sound_buffers = 32
+max_sound_sources = 16
+max_sound_instances = 256
+max_component_count = 32
+
+[resource]
+http_cache = 0
+max_resources = 1024
+
+[input]
+repeat_delay = 0.5
+repeat_interval = 0.2
+gamepads = /builtins/input/default.gamepadsc
+game_binding = /input/game.input_bindingc
+use_accelerometer = 1
+
+[sprite]
+max_count = 128
+subpixels = 1
+
+[spine]
+max_count = 128
+
+[model]
+max_count = 128
+
+[gui]
+max_count = 64
+max_particlefx_count = 64
+max_particle_count = 1024
+
+[collection]
+max_instances = 1024
+max_input_stack_entries = 16
+
+[collection_proxy]
+max_count = 8
+
+[collectionfactory]
+max_count = 128
+
+[factory]
+max_count = 128
+
+[ios]
+launch_screen = /builtins/manifests/ios/LaunchScreen.storyboardc
+pre_renderered_icons = 0
+bundle_identifier = example.unnamed
+infoplist = /builtins/manifests/ios/Info.plist
+default_language = en
+localizations = en
+
+[android]
+version_code = 1
+minimum_sdk_version = 16
+target_sdk_version = 29
+package = com.example.todo
+manifest = /builtins/manifests/android/AndroidManifest.xml
+iap_provider = GooglePlay
+input_method = KeyEvent
+immersive_mode = 0
+display_cutout = 1
+debuggable = 0
+
+[osx]
+infoplist = /builtins/manifests/osx/Info.plist
+bundle_identifier = example.unnamed
+default_language = en
+localizations = en
+
+[windows]
+
+[html5]
+custom_heap_size = 0
+heap_size = 256
+htmlfile = /builtins/manifests/web/engine_template.html
+cssfile = /builtins/manifests/web/light_theme.css
+archive_location_prefix = archive
+show_fullscreen_button = 1
+show_made_with_defold = 1
+scale_mode = downscale_fit
+
+[particle_fx]
+max_count = 64
+max_particle_count = 1024
+
+[iap]
+auto_finish_transactions = 1
+
+[network]
+http_timeout = 0
+http_thread_count = 4
+http_cache_enabled = 1
+
+[library]
+include_dirs = websocket
+
+[script]
+shared_state = 1
+
+[label]
+max_count = 64
+subpixels = 1
+
+[profiler]
+track_cpu = 0
+
+[liveupdate]
+settings = /liveupdate.settings
+enabled = 1
+
+[tilemap]
+max_count = 16
+max_tile_count = 2048
+
+[engine]
+run_while_iconified = 0
+

demo/extension-websocket/dmloader.js

@@ -0,0 +1,702 @@
+/* ********************************************************************* */
+/* Load and combine data that is split into archives                     */
+/* ********************************************************************* */
+
+var Combine = {
+    _targets: [],
+    _targetIndex: 0,
+    // target: build target
+    //  name: intended filepath of built object
+    //  size: expected size of built object.
+    //  data: combined data
+    //  downloaded: total amount of data downloaded
+    //  pieces: array of name, offset and data objects
+    //  numExpectedFiles: total number of files expected in description
+    //  lastRequestedPiece: index of last data file requested (strictly ascending)
+    //  totalLoadedPieces: counts the number of data files received
+
+    //MAX_CONCURRENT_XHR: 6,    // remove comment if throttling of XHR is desired.
+
+    isCompleted: false,       // status of process
+
+    _onCombineCompleted: [],    // signature: name, data.
+    _onAllTargetsBuilt:[],      // signature: void
+    _onDownloadProgress: [],    // signature: downloaded, total
+
+    _currentDownloadBytes: 0,
+    _totalDownloadBytes: 0,
+
+    _retry_time: 0,             // pause before retry file loading after error
+    _max_retry_count: 0,        // how many attempts we do when trying to download a file.
+    _can_not_download_file_callback: undefined, //Function that is called if you can't download file after 'retry_count' attempts.
+
+    _archiveLocationFilter: function(path) { return "split" + path; },
+
+    can_not_download_file: function(file) {
+        if (typeof Combine._can_not_download_file_callback === 'function') {
+            Combine._can_not_download_file_callback(file);
+        }
+    },
+
+    addProgressListener: function(callback) {
+        if (typeof callback !== 'function') {
+            throw "Invalid callback registration";
+        }
+        this._onDownloadProgress.push(callback);
+    },
+
+    addCombineCompletedListener: function(callback) {
+        if (typeof callback !== 'function') {
+            throw "Invalid callback registration";
+        }
+        this._onCombineCompleted.push(callback);
+    },
+
+    addAllTargetsBuiltListener: function(callback) {
+        if (typeof callback !== 'function') {
+            throw "Invalid callback registration";
+        }
+        this._onAllTargetsBuilt.push(callback);
+    },
+
+    // descriptUrl: location of text file describing files to be preloaded
+    process: function(descriptUrl, attempt_count) {
+        if (!attempt_count) {
+            attempt_count = 0;
+        }
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', descriptUrl);
+        xhr.responseType = 'text';
+        xhr.onload = function(evt) {
+            Combine.onReceiveDescription(xhr);
+        };
+        xhr.onerror = function(evt) {
+            attempt_count += 1;
+            if (attempt_count < Combine._max_retry_count) {
+                console.warn("Can't download file '" + descriptUrl + "' . Next try in " + Combine._retry_time + " sec.");
+                setTimeout(function() {
+                    Combine.process(descriptUrl, attempt_count);
+                }, Combine._retry_time * 1000);
+             } else {
+                    Combine.can_not_download_file(descriptUrl);
+            }
+        };
+        xhr.send(null);
+    },
+
+    cleanUp: function() {
+        this._targets =  [];
+        this._targetIndex = 0;
+        this.isCompleted = false;
+        this._onCombineCompleted = [];
+        this._onAllTargetsBuilt = [];
+        this._onDownloadProgress = [];
+
+        this._currentDownloadBytes = 0;
+        this._totalDownloadBytes = 0;
+    },
+
+    onReceiveDescription: function(xhr) {
+        var json = JSON.parse(xhr.responseText);
+        this._targets = json.content;
+        this._totalDownloadBytes = 0;
+        this._currentDownloadBytes = 0;
+
+        var targets = this._targets;
+        for(var i=0; i<targets.length; ++i) {
+            this._totalDownloadBytes += targets[i].size;
+        }
+        this.requestContent();
+    },
+
+    requestContent: function() {
+        var target = this._targets[this._targetIndex];
+        if (1 < target.pieces.length) {
+            target.data = new Uint8Array(target.size);
+        }
+        var limit = target.pieces.length;
+        if (typeof this.MAX_CONCURRENT_XHR !== 'undefined') {
+            limit = Math.min(limit, this.MAX_CONCURRENT_XHR);
+        }
+        for (var i=0; i<limit; ++i) {
+            this.requestPiece(target, i);
+        }
+    },
+
+    requestPiece: function(target, index, attempt_count) {
+        if (!attempt_count) {
+            attempt_count = 0;
+        }
+
+        if (index <  target.lastRequestedPiece) {
+            throw "Request out of order";
+        }
+
+        var item = target.pieces[index];
+        target.lastRequestedPiece = index;
+
+        var total = 0;
+        var downloaded = 0;
+        var xhr = new XMLHttpRequest();
+        var url = this._archiveLocationFilter('/' + item.name);
+        xhr.open('GET', url, true);
+        xhr.responseType = 'arraybuffer';
+        // called periodically with information about the transaction
+        xhr.onprogress = function(evt) {
+            if (evt.total && evt.lengthComputable) {
+                total = evt.total;
+            }
+            if (evt.loaded && evt.lengthComputable) {
+                var delta = evt.loaded - downloaded;
+                downloaded = evt.loaded;
+                Combine._currentDownloadBytes += delta;
+                Combine.updateProgress(target);
+            }
+        };
+        // called when the transaction completes successfully
+        xhr.onload = function(evt) {
+            item.data = new Uint8Array(xhr.response);
+            item.dataLength = item.data.length;
+            total = item.dataLength;
+            downloaded = item.dataLength;
+            Combine.copyData(target, item);
+            Combine.onPieceLoaded(target, item);
+            Combine.updateProgress(target);
+            item.data = undefined;
+        };
+        // called when the transaction fails
+        xhr.onerror = function(evt) {
+            downloaded = 0;
+            Combine.updateProgress(target);
+            attempt_count += 1;
+            if (attempt_count < Combine._max_retry_count) {
+                console.warn("Can't download file '" + item.name + "' . Next try in " + Combine._retry_time + " sec.");
+                setTimeout(function() {
+                    Combine.requestPiece(target, index, attempt_count);
+                }, Combine._retry_time * 1000);
+            } else {
+                Combine.can_not_download_file(item.name);
+            }
+        };
+        xhr.send(null);
+    },
+
+    updateProgress: function(target) {
+        for(i = 0; i<this._onDownloadProgress.length; ++i) {
+            this._onDownloadProgress[i](this._currentDownloadBytes, this._totalDownloadBytes);
+        }
+    },
+
+    copyData: function(target, item) {
+        if (1 == target.pieces.length) {
+            target.data = item.data;
+        } else {
+            var start = item.offset;
+            var end = start + item.data.length;
+            if (0 > start) {
+                throw "Buffer underflow";
+            }
+            if (end > target.data.length) {
+                throw "Buffer overflow";
+            }
+            target.data.set(item.data, item.offset);
+        }
+    },
+
+    onPieceLoaded: function(target, item) {
+        if (typeof target.totalLoadedPieces === 'undefined') {
+            target.totalLoadedPieces = 0;
+        }
+        ++target.totalLoadedPieces;
+        if (target.totalLoadedPieces == target.pieces.length) {
+            this.finalizeTarget(target);
+            ++this._targetIndex;
+            for (var i=0; i<this._onCombineCompleted.length; ++i) {
+                this._onCombineCompleted[i](target.name, target.data);
+            }
+            if (this._targetIndex < this._targets.length) {
+                this.requestContent();
+            } else {
+                this.isCompleted = true;
+                for (i=0; i<this._onAllTargetsBuilt.length; ++i) {
+                    this._onAllTargetsBuilt[i]();
+                }
+            }
+        } else {
+            var next = target.lastRequestedPiece + 1;
+            if (next < target.pieces.length) {
+                this.requestPiece(target, next);
+            }
+        }
+    },
+
+    finalizeTarget: function(target) {
+        var actualSize = 0;
+        for (var i=0;i<target.pieces.length; ++i) {
+            actualSize += target.pieces[i].dataLength;
+        }
+        if (actualSize != target.size) {
+            throw "Unexpected data size";
+        }
+
+        if (1 < target.pieces.length) {
+            var output = target.data;
+            var pieces = target.pieces;
+            for (i=0; i<pieces.length; ++i) {
+                var item = pieces[i];
+                // Bounds check
+                var start = item.offset;
+                var end = start + item.dataLength;
+                if (0 < i) {
+                    var previous = pieces[i - 1];
+                    if (previous.offset + previous.dataLength > start) {
+                        throw "Segment underflow";
+                    }
+                }
+                if (pieces.length - 2 > i) {
+                    var next = pieces[i + 1];
+                    if (end > next.offset) {
+                        throw "Segment overflow";
+                    }
+                }
+            }
+        }
+    }
+};
+
+/* ********************************************************************* */
+/* Default splash and progress visualisation                             */
+/* ********************************************************************* */
+
+var Progress = {
+    progress_id: "defold-progress",
+    bar_id: "defold-progress-bar",
+
+    addProgress : function (canvas) {
+        /* Insert default progress bar below canvas */
+        canvas.insertAdjacentHTML('afterend', '<div id="' + Progress.progress_id + '" class="canvas-app-progress"><div id="' + Progress.bar_id + '" class="canvas-app-progress-bar" style="width: 0%;"></div></div>');
+        Progress.bar = document.getElementById(Progress.bar_id);
+        Progress.progress = document.getElementById(Progress.progress_id);
+    },
+
+    updateProgress: function (percentage, text) {
+        Progress.bar.style.width = percentage + "%";
+    },
+
+    removeProgress: function () {
+        if (Progress.progress.parentElement !== null) {
+            Progress.progress.parentElement.removeChild(Progress.progress);
+
+            // Remove any background/splash image that was set in runApp().
+            // Workaround for Safari bug DEF-3061.
+            Module.canvas.style.background = "";
+        }
+    }
+};
+
+/* ********************************************************************* */
+/* Default input override                                                */
+/* ********************************************************************* */
+
+var CanvasInput = {
+    arrowKeysHandler : function(e) {
+        switch(e.keyCode) {
+            case 37: case 38: case 39:  case 40: // Arrow keys
+            case 32: e.preventDefault(); e.stopPropagation(); // Space
+            default: break; // do not block other keys
+        }
+    },
+
+    onFocusIn : function(e) {
+        window.addEventListener("keydown", CanvasInput.arrowKeysHandler, false);
+    },
+
+    onFocusOut: function(e) {
+        window.removeEventListener("keydown", CanvasInput.arrowKeysHandler, false);
+    },
+
+    addToCanvas : function(canvas) {
+        canvas.addEventListener("focus", CanvasInput.onFocusIn, false);
+        canvas.addEventListener("blur", CanvasInput.onFocusOut, false);
+        canvas.focus();
+        CanvasInput.onFocusIn();
+    }
+};
+
+/* ********************************************************************* */
+/* Module is Emscripten namespace                                        */
+/* ********************************************************************* */
+
+var Module = {
+    noInitialRun: true,
+
+    _filesToPreload: [],
+    _archiveLoaded: false,
+    _preLoadDone: false,
+    _waitingForArchive: false,
+
+    // Persistent storage
+    persistentStorage: true,
+    _syncInProgress: false,
+    _syncNeeded: false,
+    _syncInitial: false,
+    _syncMaxTries: 3,
+    _syncTries: 0,
+
+    print: function(text) { console.log(text); },
+    printErr: function(text) { console.error(text); },
+
+    setStatus: function(text) { console.log(text); },
+
+    isWASMSupported: (function() {
+        try {
+            if (typeof WebAssembly === "object"
+                && typeof WebAssembly.instantiate === "function") {
+                const module = new WebAssembly.Module(Uint8Array.of(0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00));
+                if (module instanceof WebAssembly.Module)
+                    return new WebAssembly.Instance(module) instanceof WebAssembly.Instance;
+            }
+        } catch (e) {
+        }
+        return false;
+    })(),
+
+    prepareErrorObject: function (err, url, line, column, errObj) {
+        line = typeof line == "undefined" ? 0 : line;
+        column = typeof column == "undefined" ? 0 : column;
+        url = typeof url == "undefined" ? "" : url;
+        var errorLine = url + ":" + line + ":" + column;
+
+        var error = errObj || (typeof window.event != "undefined" ? window.event.error : "" ) || err || "Undefined Error";
+        var message = "";
+        var stack = "";
+        var backtrace = "";
+
+        if (typeof error == "object" && typeof error.stack != "undefined" && typeof error.message != "undefined") {
+            stack = String(error.stack);
+            message = String(error.message);
+        } else {
+            stack = String(error).split("\n");
+            message = stack.shift();
+            stack = stack.join("\n");
+        }
+        stack = stack || errorLine;
+
+        var callLine = /at (\S+:\d*$)/.exec(message);
+        if (callLine) {
+            message = message.replace(/(at \S+:\d*$)/, "");
+            stack = callLine[1] + "\n" + stack;
+        }
+
+        message = message.replace(/(abort\(.+\)) at .+/, "$1");
+        stack = stack.replace(/\?{1}\S+(:\d+:\d+)/g, "$1");
+        stack = stack.replace(/ *at (\S+)$/gm, "@$1");
+        stack = stack.replace(/ *at (\S+)(?: \[as \S+\])? +\((.+)\)/g, "$1@$2");
+        stack = stack.replace(/^((?:Object|Array)\.)/gm, "");
+        stack = stack.split("\n");
+
+        return { stack:stack, message:message };
+    },
+
+    hasWebGLSupport: function() {
+        var webgl_support = false;
+        try {
+            var canvas = document.createElement("canvas");
+            var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+            if (gl && gl instanceof WebGLRenderingContext) {
+                webgl_support = true;
+            }
+        } catch (error) {
+            console.log("An error occurred while detecting WebGL support: " + error);
+            webgl_support = false;
+        }
+
+        return webgl_support;
+    },
+
+    handleVisibilityChange: function () {
+        GLFW.onFocusChanged(document[Module.hiddenProperty] ? 0 : 1);
+    },
+
+    getHiddenProperty: function () {
+        if ('hidden' in document) return 'hidden';
+        var prefixes = ['webkit','moz','ms','o'];
+        for (var i = 0; i < prefixes.length; i++) {
+            if ((prefixes[i] + 'Hidden') in document)
+                return prefixes[i] + 'Hidden';
+        }
+        return null;
+    },
+
+    setupVisibilityChangeListener: function() {
+        Module.hiddenProperty = Module.getHiddenProperty();
+        if( Module.hiddenProperty ) {
+            var eventName = Module.hiddenProperty.replace(/[H|h]idden/,'') + 'visibilitychange';
+            document.addEventListener(eventName, Module.handleVisibilityChange, false);
+        } else {
+            console.log("No document.hidden property found. The focus events won't be enabled.")
+        }
+    },
+
+    /**
+    * Module.runApp - Starts the application given a canvas element id
+    *
+    * 'extra_params' is an optional object that can have the following fields:
+    *
+    *     'archive_location_filter':
+    *         Filter function that will run for each archive path.
+    *
+    *     'unsupported_webgl_callback':
+    *         Function that is called if WebGL is not supported.
+    *
+    *     'engine_arguments':
+    *         List of arguments (strings) that will be passed to the engine.
+    *
+    *     'persistent_storage':
+    *         Boolean toggling the usage of persistent storage.
+    *
+    *     'custom_heap_size':
+    *         Number of bytes specifying the memory heap size.
+    *
+    *     'disable_context_menu':
+    *         Disables the right-click context menu on the canvas element if true.
+    *
+    *     'retry_time':
+    *         Pause before retry file loading after error.
+    *
+    *     'retry_count':
+    *         How many attempts we do when trying to download a file.
+    *
+    *     'can_not_download_file_callback':
+    *         Function that is called if you can't download file after 'retry_count' attempts.
+    **/
+    runApp: function(app_canvas_id, extra_params) {
+        app_canvas_id = (typeof app_canvas_id === 'undefined') ?  'canvas' : app_canvas_id;
+
+        var params = {
+            archive_location_filter: function(path) { return 'split' + path; },
+            unsupported_webgl_callback: undefined,
+            engine_arguments: [],
+            persistent_storage: true,
+            custom_heap_size: undefined,
+            disable_context_menu: true,
+            retry_time: 1,
+            retry_count: 10,
+            can_not_download_file_callback: undefined,
+        };
+
+        for (var k in extra_params) {
+            if (extra_params.hasOwnProperty(k)) {
+                params[k] = extra_params[k];
+            }
+        }
+
+        Module.canvas = document.getElementById(app_canvas_id);
+        Module.arguments = params["engine_arguments"];
+        Module.persistentStorage = params["persistent_storage"];
+        Module["TOTAL_MEMORY"] = params["custom_heap_size"];
+
+        if (Module.hasWebGLSupport()) {
+            // Override game keys
+            CanvasInput.addToCanvas(Module.canvas);
+
+            Module.setupVisibilityChangeListener();
+
+            // Add progress visuals
+            Progress.addProgress(Module.canvas);
+
+            // Add context menu hide-handler if requested
+            if (params["disable_context_menu"])
+            {
+                Module.canvas.oncontextmenu = function(e) {
+                    e.preventDefault();
+                };
+            }
+
+            Combine._retry_time = params["retry_time"];
+            Combine._max_retry_count = params["retry_count"];
+            if (typeof params["can_not_download_file_callback"] === "function") {
+                Combine._can_not_download_file_callback = params["can_not_download_file_callback"];
+            }
+            // Load and assemble archive
+            Combine.addCombineCompletedListener(Module.onArchiveFileLoaded);
+            Combine.addAllTargetsBuiltListener(Module.onArchiveLoaded);
+            Combine.addProgressListener(Module.onArchiveLoadProgress);
+            Combine._archiveLocationFilter = params["archive_location_filter"];
+            Combine.process(Combine._archiveLocationFilter('/archive_files.json'));
+        } else {
+            Progress.addProgress(Module.canvas);
+            Progress.updateProgress(100, "Unable to start game, WebGL not supported");
+            Module.setStatus = function(text) {
+                if (text) Module.printErr('[missing WebGL] ' + text);
+            };
+
+            if (typeof params["unsupported_webgl_callback"] === "function") {
+                params["unsupported_webgl_callback"]();
+            }
+        }
+    },
+
+    onArchiveLoadProgress: function(downloaded, total) {
+        Progress.updateProgress(downloaded / total * 100);
+    },
+
+    onArchiveFileLoaded: function(name, data) {
+        Module._filesToPreload.push({path: name, data: data});
+    },
+
+    onArchiveLoaded: function() {
+        Combine.cleanUp();
+        Module._archiveLoaded = true;
+        Progress.updateProgress(100, "Starting...");
+
+        if (Module._waitingForArchive) {
+            Module._preloadAndCallMain();
+        }
+    },
+
+    toggleFullscreen: function() {
+        if (GLFW.isFullscreen) {
+            GLFW.cancelFullScreen();
+        } else {
+            GLFW.requestFullScreen();
+        }
+    },
+
+    preSync: function(done) {
+        // Initial persistent sync before main is called
+        FS.syncfs(true, function(err) {
+            if(err) {
+                Module._syncTries += 1;
+                console.error("FS syncfs error: " + err);
+                if (Module._syncMaxTries > Module._syncTries) {
+                    Module.preSync(done);
+                } else {
+                    Module._syncInitial = true;
+                    done();
+                }
+            } else {
+                Module._syncInitial = true;
+                if (done !== undefined) {
+                    done();
+                }
+            }
+        });
+    },
+
+    preloadAll: function() {
+        if (Module._preLoadDone) {
+            return;
+        }
+        Module._preLoadDone = true;
+        for (var i = 0; i < Module._filesToPreload.length; ++i) {
+            var item = Module._filesToPreload[i];
+            FS.createPreloadedFile("", item.path, item.data, true, true);
+        }
+    },
+
+    // Tries to do a MEM->IDB sync
+    // It will flag that another one is needed if there is already one sync running.
+    persistentSync: function() {
+
+        // Need to wait for the initial sync to finish since it
+        // will call close on all its file streams which will trigger
+        // new persistentSync for each.
+        if (Module._syncInitial) {
+            if (Module._syncInProgress) {
+                Module._syncNeeded = true;
+            } else {
+                Module._startSyncFS();
+            }
+        }
+    },
+
+    preInit: [function() {
+        /* Mount filesystem on preinit */
+        var dir = DMSYS.GetUserPersistentDataRoot();
+        FS.mkdir(dir);
+
+        // If IndexedDB is supported we mount the persistent data root as IDBFS,
+        // then try to do a IDB->MEM sync before we start the engine to get
+        // previously saved data before boot.
+        window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+        if (Module.persistentStorage && window.indexedDB) {
+            FS.mount(IDBFS, {}, dir);
+
+            // Patch FS.close so it will try to sync MEM->IDB
+            var _close = FS.close; FS.close = function(stream) { var r = _close(stream); Module.persistentSync(); return r; }
+
+            // Sync IDB->MEM before calling main()
+            Module.preSync(function() {
+                Module._preloadAndCallMain();
+            });
+        } else {
+            Module._preloadAndCallMain();
+        }
+    }],
+
+    preRun: [function() {
+        /* If archive is loaded, preload all its files */
+        if(Module._archiveLoaded) {
+            Module.preloadAll();
+        }
+    }],
+
+    postRun: [function() {
+        if(Module._archiveLoaded) {
+            Progress.removeProgress();
+        }
+    }],
+
+    _preloadAndCallMain: function() {
+        // If the archive isn't loaded,
+        // we will have to wait with calling main.
+        if (!Module._archiveLoaded) {
+            Module._waitingForArchive = true;
+        } else {
+
+            // Need to set heap size before calling main
+            TOTAL_MEMORY = Module["TOTAL_MEMORY"] || TOTAL_MEMORY;
+
+            Module.preloadAll();
+            Progress.removeProgress();
+            if (Module.callMain === undefined) {
+                Module.noInitialRun = false;
+            } else {
+                Module.callMain(Module.arguments);
+            }
+        }
+    },
+
+    // Wrap IDBFS syncfs call with logic to avoid multiple syncs
+    // running at the same time.
+    _startSyncFS: function() {
+        Module._syncInProgress = true;
+
+        if (Module._syncMaxTries > Module._syncTries) {
+            FS.syncfs(false, function(err) {
+                Module._syncInProgress = false;
+
+                if (err) {
+                    console.error("Module._startSyncFS error: " + err);
+                    Module._syncTries += 1;
+                }
+
+                if (Module._syncNeeded) {
+                    Module._syncNeeded = false;
+                    Module._startSyncFS();
+                }
+
+            });
+        }
+    },
+};
+
+window.onerror = function(err, url, line, column, errObj) {
+    var errorObject = Module.prepareErrorObject(err, url, line, column, errObj);
+    Module.ccall('JSWriteDump', 'null', ['string'], [JSON.stringify(errorObject.stack)]);
+    Module.setStatus('Exception thrown, see JavaScript console');
+    Module.setStatus = function(text) {
+        if (text) Module.printErr('[post-exception status] ' + text);
+    };
+};

demo/extension-websocket/index.html

@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui, shrink-to-fit=no">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+
+	<title>extension-websocket 1.0</title>
+	<style type='text/css'>
+	/* Disable user selection to avoid strange bug in Chrome on Windows:
+	* Selecting a text outside the canvas, then clicking+draging would
+	* drag the selected text but block mouse down/up events to the engine.
+	*/
+	body {
+	
+		position: fixed; /* Prevent overscroll */
+	
+		margin:0;
+		padding:0;
+	}
+
+	.canvas-app-container {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+	}
+
+	.canvas-app-container:-webkit-full-screen {
+		/* Auto width and height in Safari/Chrome fullscreen. */
+		width: auto;
+		height: auto;
+	}
+
+	#canvas {
+		outline: none;
+		border: 0;
+		width: 100%;
+		vertical-align: bottom;
+	}
+
+	canvas:focus, canvas:active {
+		outline: none;
+		border: 0;
+		ie-dummy: expression(this.hideFocus=true);
+		-moz-outline-style: none;
+	}
+
+	div {
+		-webkit-tap-highlight-color: rgba(0,0,0,0);
+		-webkit-touch-callout: none;
+		-webkit-user-select: none;
+		-khtml-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+	}
+
+		.canvas-app-progress {
+		position: absolute;
+		background-color: #d1dbeb;
+		height: 6px;
+		margin-top: -6px;
+		width: 100%;
+	}
+
+	.canvas-app-progress-bar {
+		font-size: 12px;
+		height: 6px;
+		color: rgb(255, 255, 255);
+		background-color: #1a72eb;
+		text-align: center;
+		line-height: 20px;
+	}
+	
+	.button {
+		background-image: url("data:image/svg+xml,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' baseProfile='full' width='16' height='16' viewBox='0 0 16 16' version='1.1' xml:space='preserve'%3E%3Ctitle%3Eic-16-fullscreen%3C/title%3E%3Cg id='ic-16-fullscreen' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M3,11.5 C3,11.776 3.224,12 3.5,12 L12.5,12 C12.776,12 13,11.776 13,11.5 L13,4.5 C13,4.224 12.776,4 12.5,4 L3.5,4 C3.224,4 3,4.224 3,4.5 L3,11.5 Z M14,11 L14,13 L12,13 C11.724,13 11.5,13.224 11.5,13.5 C11.5,13.776 11.724,14 12,14 L14.5,14 C14.776,14 15,13.776 15,13.5 L15,11 C15,10.724 14.776,10.5 14.5,10.5 C14.224,10.5 14,10.724 14,11 Z M12,2 C11.724,2 11.5,2.224 11.5,2.5 C11.5,2.776 11.724,3 12,3 L14,3 L14,5 C14,5.276 14.224,5.5 14.5,5.5 C14.776,5.5 15,5.276 15,5 L15,2.5 C15,2.224 14.776,2 14.5,2 L12,2 Z M2,13 L2,11 C2,10.724 1.776,10.5 1.5,10.5 C1.224,10.5 1,10.724 1,11 L1,13.5 C1,13.776 1.224,14 1.5,14 L4,14 C4.276,14 4.5,13.776 4.5,13.5 C4.5,13.224 4.276,13 4,13 L2,13 Z M1,2.5 C1,2.224 1.224,2 1.5,2 L4,2 C4.276,2 4.5,2.224 4.5,2.5 C4.5,2.776 4.276,3 4,3 L2,3 L2,5 C2,5.276 1.776,5.5 1.5,5.5 C1.224,5.5 1,5.276 1,5 L1,2.5 Z ' id='fill_1' fill='%23006fff'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+		background-repeat: no-repeat;
+		border-color: transparent;
+		float: left;
+		color: #006fff;
+		padding-left: 50%;
+		padding: 0px 0px 0px 20px;
+		cursor:pointer;
+		background-position: left bottom;
+		margin-left: 2px;
+	}
+	.link {
+		text-align: right;
+		color: #4e5258;
+		margin-right: 2px;
+	}
+	a {
+		font-weight: 600;
+		color: #006fff;
+		text-decoration: none;
+	}
+	.link, .button {
+		font-family: sans-serif;
+		font-size: 14px;
+		font-weight: normal;
+		font-style: normal;
+		font-stretch: normal;
+		line-height: normal;
+		letter-spacing: 0px;
+		padding-top: 12px;
+	}
+
+	.buttons-background {
+		background-color: #ffffff;
+		width: 100%;
+		height: 42px;
+	}
+
+	body {
+		background-color: #ffffff;
+	}
+
+	.canvas-app-container {
+		background: rgba(250,252,255,1);
+		background: -moz-linear-gradient(-45deg, rgba(250,252,255,1) 0%, rgba(250,252,255,1) 50%, rgba(245,249,255,1) 50%, rgba(245,249,255,1) 100%);
+		background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(250,252,255,1)), color-stop(50%, rgba(250,252,255,1)), color-stop(50%, rgba(245,249,255,1)), color-stop(100%, rgba(245,249,255,1)));
+		background: -webkit-linear-gradient(-45deg, rgba(250,252,255,1) 0%, rgba(250,252,255,1) 50%, rgba(245,249,255,1) 50%, rgba(245,249,255,1) 100%);
+		background: -o-linear-gradient(-45deg, rgba(250,252,255,1) 0%, rgba(250,252,255,1) 50%, rgba(245,249,255,1) 50%, rgba(245,249,255,1) 100%);
+		background: -ms-linear-gradient(-45deg, rgba(250,252,255,1) 0%, rgba(250,252,255,1) 50%, rgba(245,249,255,1) 50%, rgba(245,249,255,1) 100%);
+		background: linear-gradient(135deg, rgba(250,252,255,1) 0%, rgba(250,252,255,1) 50%, rgba(245,249,255,1) 50%, rgba(245,249,255,1) 100%);
+		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafcff', endColorstr='#f5f9ff', GradientType=1 );
+	}
+
+	.canvas-app-canvas {
+		background-repeat:no-repeat;
+		background-position: center center;
+		background-size: 70%;
+		background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='300px' height='64px' viewBox='-2467.5 2469 300 64' style='enable-background:new -2467.5 2469 300 64;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%2315244A;%7D .st1%7Bfill:url(%23SVGID_1_);%7D .st2%7Bfill:url(%23SVGID_2_);%7D%0A%3C/style%3E%3Ctitle%3Edefold-logo-html5-splash%3C/title%3E%3Cpolygon class='st0' points='-2177,2482.9 -2175.5,2482.9 -2175.5,2486.7 -2174.4,2486.7 -2174.4,2482.9 -2173.2,2482.9 -2173.2,2481.9 -2177,2481.9 '/%3E%3Cpolygon class='st0' points='-2169.8,2484.1 -2171,2482.1 -2172.1,2482.1 -2172.1,2486.7 -2171,2486.7 -2171,2483.5 -2169.7,2485.6 -2169.7,2485.6 -2168.5,2483.5 -2168.5,2486.7 -2167.5,2486.7 -2167.5,2482.1 -2168.6,2482.1 '/%3E%3Cpath class='st0' d='M-2376,2482h-13.8v38h13.6c6.6,0,12.2-1.9,16.1-5.5c3.8-3.5,5.8-8.5,5.7-13.7v-0.1 C-2354.5,2489.3-2362.9,2482-2376,2482z M-2364,2501.2c0,6.7-4.5,10.9-11.8,10.9h-4.7v-22h4.7c7.3,0,11.8,4.2,11.8,10.9 L-2364,2501.2z'/%3E%3Cpolygon class='st0' points='-2340.9,2505 -2325.1,2505 -2325.1,2497.4 -2340.9,2497.4 -2340.9,2489.6 -2322.4,2489.6 -2322.4,2481.9 -2350.1,2481.9 -2350.1,2520 -2322.2,2520 -2322.2,2512.4 -2340.9,2512.4 '/%3E%3Cpolygon class='st0' points='-2317.1,2481.9 -2317.1,2520 -2307.9,2520 -2307.9,2505.9 -2293,2505.9 -2293,2498.4 -2307.9,2498.4 -2307.9,2489.9 -2289.6,2489.9 -2289.6,2481.9 '/%3E%3Cpolygon class='st0' points='-2233,2482.1 -2242.2,2482.1 -2242.2,2520 -2216.3,2520 -2216.3,2512.2 -2233,2512.2 '/%3E%3Cpath class='st0' d='M-2197.1,2482h-13.7v38h13.5c6.7,0,12.2-1.9,16.1-5.5c3.8-3.5,5.8-8.5,5.7-13.7v-0.1 C-2175.5,2489.3-2184,2482-2197.1,2482z M-2185.1,2501.2c0,6.7-4.5,10.9-11.8,10.9h-4.7v-22h4.7c7.3,0,11.8,4.2,11.8,10.9V2501.2z' /%3E%3Cpath class='st0' d='M-2267.5,2481.7c-10.8,0-19.6,8.8-19.6,19.7c0,10.8,8.8,19.6,19.7,19.6c10.8,0,19.6-8.8,19.6-19.6l0,0 C-2247.8,2490.5-2256.6,2481.7-2267.5,2481.7C-2267.5,2481.7-2267.5,2481.7-2267.5,2481.7z M-2258,2507.9l-8.8,5.1 c-0.5,0.3-1.2,0.3-1.8,0l-8.8-5.1c-0.5-0.3-0.9-0.9-0.9-1.5v-10.2c0-0.6,0.3-1.2,0.9-1.5l8.8-5.1c0.5-0.3,1.2-0.3,1.8,0l8.8,5.1 c0.5,0.3,0.9,0.9,0.9,1.5v10.2C-2257.1,2507-2257.4,2507.6-2258,2507.9z'/%3E%3Cpath class='st0' d='M-2423.2,2494.6l-11.1,6.4l-11.1-6.4l11.1-6.4L-2423.2,2494.6z M-2412.1,2501v12.8l11.1-6.4L-2412.1,2501z M-2467.5,2507.4l11.1,6.4V2501L-2467.5,2507.4z M-2434.3,2526.6l11.1,6.4l11.1-6.4l-11.1-6.4l11.1-6.4l-11.1-6.4l-11.1,6.4 l-11.1-6.4l-11.1,6.4l11.1,6.4l-11.1,6.4l11.1,6.4L-2434.3,2526.6z'/%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='-2451.2178' y1='2525.4604' x2='-2406.2178' y2='2499.6304' gradientTransform='matrix(1 0 0 -1 0 5004)'%3E%3Cstop offset='0' style='stop-color:%231C68EC'/%3E%3Cstop offset='1' style='stop-color:%2300E9DF'/%3E%3C/linearGradient%3E%3Cpath class='st1' d='M-2412.1,2513.8v12.8l-11.1-6.4L-2412.1,2513.8z M-2434.3,2513.8V2501l-11.1-6.4v12.8L-2434.3,2513.8z M-2445.4,2469v12.8l11.1-6.4L-2445.4,2469z M-2412.1,2488.2L-2412.1,2488.2 M-2423.2,2507.4l11.1,6.4V2501l11.1,6.4v-12.8 l-11.1-6.4v-12.8l0,0l-11.1-6.4v12.8l-11.1-6.4v12.8l11.1,6.4V2507.4z'/%3E%3ClinearGradient id='SVGID_2_' gradientUnits='userSpaceOnUse' x1='-2465.9385' y1='2521.2493' x2='-2423.5085' y2='2496.7893' gradientTransform='matrix(1 0 0 -1 0 5004)'%3E%3Cstop offset='0' style='stop-color:%23FF3C2A'/%3E%3Cstop offset='1' style='stop-color:%23FFD215'/%3E%3C/linearGradient%3E%3Cpath class='st2' d='M-2434.3,2513.8V2501l11.1-6.4v12.8L-2434.3,2513.8z M-2434.3,2475.4l11.1,6.4V2469L-2434.3,2475.4z M-2456.5,2488.2L-2456.5,2488.2 M-2445.4,2494.6l11.1-6.4v-12.8l-11.1,6.4V2469l-11.1,6.4l0,0v12.8l-11.1,6.4v12.8l11.1-6.4v12.8 l11.1-6.4V2494.6z M-2456.5,2513.8v12.8l11.1-6.4L-2456.5,2513.8z'/%3E%3C/svg%3E%0A");
+	}
+	</style>
+</head>
+
+<body>
+	<div id="app-container" class="canvas-app-container">
+		<canvas id="canvas" class="canvas-app-canvas" tabindex="1" width="640" height="960"></canvas>
+		<div class="buttons-background">
+			<div class="button" onclick="Module.toggleFullscreen();">Fullscreen</div>
+			<div class="link">Made with <a href="https://defold.com/" target="_blank">Defold</a></div>
+		</div>
+	</div>
+	<!-- -->
+	<script id='engine-loader' type='text/javascript' src="dmloader.js"></script>
+	<!-- -->
+	<script id='engine-setup' type='text/javascript'>
+	var extra_params = {
+		archive_location_filter: function( path ) {
+			return ("archive" + path + "");
+		},
+		engine_arguments: [],
+		custom_heap_size: 268435456,
+		disable_context_menu: true
+	}
+
+	Module['onRuntimeInitialized'] = function() {
+		Module.runApp("canvas", extra_params);
+	};
+
+	Module["locateFile"] = function(path, scriptDirectory)
+	{
+		// dmengine*.wasm is hardcoded in the built JS loader for WASM,
+		// we need to replace it here with the correct project name.
+		if (path == "dmengine.wasm" || path == "dmengine_release.wasm" || path == "dmengine_headless.wasm") {
+			path = "extensionwebsocket.wasm";
+		}
+		return scriptDirectory + path;
+	};
+
+	var is_iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+	var buttonHeight = 0;
+	buttonHeight = 42;
+	buttonHeight = 42;
+	// Resize on init, screen resize and orientation change
+	function resize_game_canvas() {
+		// Hack for iOS when exit from Fullscreen mode
+		if (is_iOS) {
+			window.scrollTo(0, 0);
+		}
+
+		var app_container = document.getElementById('app-container');
+		var game_canvas = document.getElementById('canvas');
+		var innerWidth = window.innerWidth;
+		var innerHeight = window.innerHeight - buttonHeight;
+		var width = 640;
+		var height = 960;
+		var targetRatio = width / height;
+		var actualRatio = innerWidth / innerHeight;
+	
+		//Downscale fit
+		if (innerWidth < width || innerHeight < height) {
+			if (actualRatio > targetRatio) {
+				width = innerHeight * targetRatio;
+				height = innerHeight;
+				app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
+				app_container.style.marginTop = "0px";
+			}
+			else {
+				width = innerWidth;
+				height = innerWidth / targetRatio;
+				app_container.style.marginLeft = "0px";
+				app_container.style.marginTop = ((innerHeight - height) / 2) + "px";
+			}
+		}
+		else {
+			app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
+			app_container.style.marginTop = ((innerHeight - height) / 2) + "px";
+		}
+	
+	
+	
+	
+		app_container.style.width = width + "px";
+		app_container.style.height = height + buttonHeight + "px";
+		game_canvas.width = width;
+		game_canvas.height = height;
+	}
+	resize_game_canvas();
+	window.addEventListener('resize', resize_game_canvas, false);
+	window.addEventListener('orientationchange', resize_game_canvas, false);
+
+	function load_engine() {
+		var engineJS = document.createElement('script');
+		engineJS.type = 'text/javascript';
+		if (Module['isWASMSupported']) {
+			engineJS.src = 'extensionwebsocket_wasm.js';
+		} else {
+			engineJS.src = 'extensionwebsocket_asmjs.js';
+		}
+		document.head.appendChild(engineJS);
+	}
+	</script>
+	<script id='engine-start' type='text/javascript'>
+		load_engine();
+	</script>
+</body>
+</html>