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,8 +15,11 @@ export class WebSocketTransport {
     this.websocket.addEventListener('message', this.onMessage.bind(this))
     this.websocket.onclose = () => {
       console.log("websocket closed")
+      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.
     // Websocket provides a `ping` method to keep the connection alive, but it's
@@ -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

@@ -13,7 +13,7 @@ L.Map.mergeOptions({
   // we cannot rely on this because of the y is overriden by Leaflet
   // See https://github.com/Leaflet/Leaflet/pull/9201
   // And let's remove this -y when this PR is merged and released.
-  demoTileInfos: { s: 'a', z: 9, x: 265, y: 181, '-y': 181, r: '' },
+  demoTileInfos: { 's': 'a', 'z': 9, 'x': 265, 'y': 181, '-y': 181, 'r': '' },
   licences: [],
   licence: '',
   enableMarkerDraw: true,
@@ -75,7 +75,12 @@ U.Map = L.Map.extend({
     })
     const websocketURI = this.options.websocketURI
 
-    this.sync_engine = new U.SyncEngine(this, websocketTokenURI, websocketURI, this.server)
+    this.sync_engine = new U.SyncEngine(
+      this,
+      websocketTokenURI,
+      websocketURI,
+      this.server
+    )
     this.sync = this.sync_engine.proxy(this)
 
     this.initLoader()
@@ -231,6 +236,25 @@ 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()
       this.propagate()