From f727bb775da8ea1609e362250f31363367efa14d Mon Sep 17 00:00:00 2001 From: James Allen Date: Tue, 24 Jun 2014 16:33:36 +0100 Subject: [PATCH] Show and preform auto-reconnect --- services/web/app/views/project/editor.jade | 16 ++- .../ide/connection/ConnectionManager.coffee | 101 +++++++++++++++--- .../ide/editor/directives/aceEditor.coffee | 3 +- .../web/public/stylesheets/app/editor.less | 25 +++-- 4 files changed, 116 insertions(+), 29 deletions(-) diff --git a/services/web/app/views/project/editor.jade b/services/web/app/views/project/editor.jade index 3889223a38..3713f1fe7e 100644 --- a/services/web/app/views/project/editor.jade +++ b/services/web/app/views/project/editor.jade @@ -13,7 +13,6 @@ block scripts script(src=jsPath+'libs/jquery.storage.js') block content - .editor(ng-controller="IdeController") .loading-screen(ng-show="state.loading") .container @@ -21,6 +20,19 @@ block content .progress .progress-bar(ng-style="{'width': state.load_progress + '%'}") + .global-alerts(ng-cloak) + .alert.alert-danger.small(ng-if="connection.forced_disconnect") + strong Disconnected + | Please refresh the page to continue. + + .alert.alert-warning.small(ng-if="connection.reconnection_countdown") + strong Lost Connection. + | Reconnecting in {{ connection.reconnection_countdown }} secs. + a.pull-right(href, ng-click="tryReconnectNow()") Try Now + + .alert.alert-warning.small(ng-if="connection.reconnecting") + strong Reconnecting... + header.toolbar.toolbar-header(ng-cloak, ng-hide="state.loading") a.btn.btn-full-height(href='#', tooltip="Menu", tooltip-placement="bottom") i.fa.fa-bars @@ -38,7 +50,7 @@ block content a.btn.btn-full-height(href='#', tooltip="Chat", tooltip-placement="bottom") i.fa.fa-comment - #editor-content(ng-cloak, layout="main", ng-hide="state.loading") + #ide-body(ng-cloak, layout="main", ng-hide="state.loading") include ./editor/file-tree .ui-layout-center diff --git a/services/web/public/coffee/app/ide/connection/ConnectionManager.coffee b/services/web/public/coffee/app/ide/connection/ConnectionManager.coffee index 436e194643..cd37b1ecb3 100644 --- a/services/web/public/coffee/app/ide/connection/ConnectionManager.coffee +++ b/services/web/public/coffee/app/ide/connection/ConnectionManager.coffee @@ -1,35 +1,102 @@ define [], () -> class ConnectionManager constructor: (@ide, @$scope) -> + @connected = false + + @$scope.connection = + reconnecting: false + # If we need to force everyone to reload the editor + forced_disconnect: false + + @$scope.tryReconnectNow = () => + @tryReconnect() + @ide.socket = io.connect null, reconnect: false "force new connection": true @ide.socket.on "connect", () => + @connected = true + @ide.pushEvent("connected") + @$scope.$apply () => - @$scope.state.load_progress = 80 + @$scope.connection.reconnecting = false + if @$scope.state.loading + @$scope.state.load_progress = 80 - joinProject = () => - @ide.socket.emit 'joinProject', { - project_id: @ide.project_id - }, (err, project, permissionsLevel, protocolVersion) => - if @$scope.protocolVersion? and @$scope.protocolVersion != protocolVersion - location.reload(true) + setTimeout(() => + @joinProject() + , 100) - @$scope.$apply () => - @$scope.protocolVersion = protocolVersion - @$scope.project = project - @$scope.state.load_progress = 100 - @$scope.state.loading = false + @ide.socket.on 'disconnect', () => + @connected = false + @ide.pushEvent("disconnected") - @$scope.$emit "project:joined" + @$scope.$apply () => + @$scope.connection.reconnecting = false - setTimeout(joinProject, 100) + setTimeout(=> + ga('send', 'event', 'editor-interaction', 'disconnect') + , 2000) + + if !$scope.connection.forced_disconnect + @startAutoReconnectCountdown() + + @ide.socket.on 'forceDisconnect', (message) => + @$scope.$apply () => + @$scope.connection.forced_disconnect = true + @socket.disconnect() + + joinProject: () -> + @ide.socket.emit 'joinProject', { + project_id: @ide.project_id + }, (err, project, permissionsLevel, protocolVersion) => + if @$scope.protocolVersion? and @$scope.protocolVersion != protocolVersion + location.reload(true) + + @$scope.$apply () => + @$scope.protocolVersion = protocolVersion + @$scope.project = project + @$scope.state.load_progress = 100 + @$scope.state.loading = false + @$scope.$emit "project:joined" reconnectImmediately: () -> - console.log "RECONNECT IMMEDIATELY STUB" @disconnect() - #@tryReconnect() + @tryReconnect() disconnect: () -> - @socket.disconnect() \ No newline at end of file + @ide.socket.disconnect() + + startAutoReconnectCountdown: () -> + # TODO: Reconnect slowly if no recent updates + @$scope.$apply () => + @$scope.connection.reconnection_countdown = 3 + Math.floor(Math.random() * 7) + + setTimeout(=> + if !@connected + @timeoutId = setTimeout (=> @decreaseCountdown()), 1000 + , 200) + + cancelReconnect: () -> + clearTimeout @timeoutId if @timeoutId? + + decreaseCountdown: () -> + console.log "Decreasing countdown" + @$scope.$apply () => + @$scope.connection.reconnection_countdown-- + + if @$scope.connection.reconnection_countdown <= 0 + @$scope.$apply () => + @tryReconnect() + else + @timeoutId = setTimeout (=> @decreaseCountdown()), 1000 + + tryReconnect: () -> + console.log "Trying reconnect" + @cancelReconnect() + @$scope.connection.reconnecting = true + delete @$scope.connection.reconnection_countdown + @ide.socket.socket.reconnect() + setTimeout (=> @startAutoReconnectCountdown() if !@connected), 1000 + diff --git a/services/web/public/coffee/app/ide/editor/directives/aceEditor.coffee b/services/web/public/coffee/app/ide/editor/directives/aceEditor.coffee index 32711910c3..84a23b2570 100644 --- a/services/web/public/coffee/app/ide/editor/directives/aceEditor.coffee +++ b/services/web/public/coffee/app/ide/editor/directives/aceEditor.coffee @@ -21,7 +21,7 @@ define [ link: (scope, element, attrs) -> editor = Ace.edit(element.find(".ace-editor-body")[0]) scope.undo = - show_remote_warning: true + show_remote_warning: false # Prevert Ctrl|Cmd-S from triggering save dialog editor.commands.addCommand @@ -71,7 +71,6 @@ define [ session.setUndoManager(undoManager) sharejs_doc.on "remoteop.recordForUndo", () => - console.log "Remote OP!" undoManager.nextUpdateIsRemote = true sharejs_doc.attachToAce(editor) diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index fb68bd140d..e75ff0d807 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -1,3 +1,12 @@ +.global-alerts { + position: absolute; + z-index: 20; + top: (@line-height-computed / 4); + width: 400px; + left: 50%; + margin-left: -200px; +} + .toolbar { height: 40px; border-bottom: 1px solid @toolbar-border-color; @@ -57,14 +66,6 @@ } } -#editor-content { - position: absolute; - top: 40px; - bottom: 0; - left: 0; - right: 0; -} - #file-tree { background-color: #fafafa; @@ -152,6 +153,14 @@ } } +#ide-body { + position: absolute; + top: 40px; + bottom: 0; + left: 0; + right: 0; +} + #editor { position: absolute; top: 0;