github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-08 05:43:48 +00:00
Code Issues Projects Releases Packages Wiki Activity

Show and preform auto-reconnect

Browse source
This commit is contained in:
James Allen 2014-06-24 16:33:36 +01:00
parent a1b715d1e9
commit f727bb775d
4 changed files with 116 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
services/web/app/views/project/editor.jade
View file

@ -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

101
services/web/public/coffee/app/ide/connection/ConnectionManager.coffee
View file

@ -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()
@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

3
services/web/public/coffee/app/ide/editor/directives/aceEditor.coffee
View file

@ -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)

25
services/web/public/stylesheets/app/editor.less
View file

@ -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;