fix(sync): wait for websocket full connection

Websocket has now a "connect" method, which is a promise,
that yields "onconnect", so the engine can wait for it before
proceding.

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

@@ -75,19 +75,20 @@ export class SyncEngine {
       this.reconnect()
       return
     }
-    this.start(response.token)
+    await this.start(response.token)
   }
 
-  start(authToken) {
+  async start(authToken) {
     const path = this._umap.urls.get('ws_sync', { map_id: this._umap.id })
     const protocol = window.location.protocol === 'http:' ? 'ws:' : 'wss:'
-    this.transport = new WebSocketTransport(
+    this.transport = new WebSocketTransport(this)
+    await this.transport.connect(
       `${protocol}//${window.location.host}${path}`,
       authToken,
-      this,
       this.peerId,
       this._umap.properties.user?.name
     )
+    this.onConnection()
   }
 
   stop() {
@@ -108,11 +109,11 @@ export class SyncEngine {
     this.websocketConnected = false
     this.updaters.map.update({ key: 'numberOfConnectedPeers' })
 
-    this._reconnectTimeout = setTimeout(() => {
+    this._reconnectTimeout = setTimeout(async () => {
       if (this._reconnectDelay < MAX_RECONNECT_DELAY) {
         this._reconnectDelay = this._reconnectDelay * RECONNECT_DELAY_FACTOR
       }
-      this.authenticate()
+      await this.authenticate()
     }, this._reconnectDelay)
   }
   upsert(subject, metadata, value) {

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

@@ -3,14 +3,17 @@ const PING_INTERVAL = 30000
 const FIRST_CONNECTION_TIMEOUT = 2000
 
 export class WebSocketTransport {
-  constructor(webSocketURI, authToken, messagesReceiver, peerId, username) {
+  constructor(messagesReceiver) {
     this.receiver = messagesReceiver
+  }
 
+  async connect(webSocketURI, authToken, peerId, username) {
+    return new Promise((resolve, reject) => {
       this.websocket = new WebSocket(webSocketURI)
 
       this.websocket.onopen = () => {
         this.send('JoinRequest', { token: authToken, peer: peerId, username })
-      this.receiver.onConnection()
+        resolve(this.websocket)
       }
       this.websocket.addEventListener('message', this.onMessage.bind(this))
       this.websocket.onclose = () => {
@@ -50,6 +53,7 @@ export class WebSocketTransport {
           }, PONG_TIMEOUT)
         }
       }, PING_INTERVAL)
+    })
   }
 
   onMessage(wsMessage) {