feat(sync): Display a pannel to the user when disconnected.

umap/static/umap/js/modules/sync/engine.js

@@ -91,6 +91,7 @@ export class SyncEngine {
     this._reconnectTimeout = null;
     this._reconnectDelay = RECONNECT_DELAY;
     this.websocketConnected = true;
+    this.updaters.map.update({ key: 'numberOfConnectedPeers' })
   }
 
   reconnect() {
@@ -102,6 +103,7 @@ export class SyncEngine {
       if (this._reconnectDelay < MAX_RECONNECT_DELAY) {
         this._reconnectDelay = this._reconnectDelay * RECONNECT_DELAY_FACTOR
       }
+      console.log("reconnecting now")
       this.authenticate()
     }, this._reconnectDelay);
   }

umap/static/umap/js/modules/sync/websocket.js

@@ -4,6 +4,7 @@ const PING_INTERVAL = 30000;
 export class WebSocketTransport {
   constructor(webSocketURI, authToken, messagesReceiver) {
     this.receiver = messagesReceiver
+    this.closeRequested = false
 
     this.websocket = new WebSocket(webSocketURI)
 
@@ -14,7 +15,10 @@ export class WebSocketTransport {
     this.websocket.addEventListener('message', this.onMessage.bind(this))
     this.websocket.onclose = () => {
       console.log("websocket closed")
-      this.receiver.reconnect()
+      if (!this.closeRequested) {
+        console.log("Not requested, reconnecting...")
+        this.receiver.reconnect()
+      }
     }
 
     // To ensure the connection is still alive, we send ping and expect pong back.
@@ -50,4 +54,9 @@ export class WebSocketTransport {
     const encoded = JSON.stringify(message)
     this.websocket.send(encoded)
   }
+
+  close() {
+    this.closeRequested = true
+    this.websocket.close()
+  }
 }

umap/static/umap/js/umap.js

@@ -231,6 +231,19 @@ U.Map = L.Map.extend({
   },
 
   render: function (fields) {
+    if (this.options.syncEnabled === true) {
+      if (!this.sync.websocketConnected) {
+        const template = `
+        <h3><i class="icon icon-16"></i><span>${L._('Disconnected')}</span></h3>
+        <p>
+        ${L._('This map has enabled real-time synchronization with other users, but you are currently disconnected. It will automatically reconnect when ready.')}
+        </p>
+        `
+        this.dialog.open({ template: template, className: 'dark', cancel: false, accept: false })
+      } else {
+        this.dialog.close()
+      }
+    }
 
     if (fields.includes('numberOfConnectedPeers')) {
       this.renderEditToolbar()