[MOD] Git ignore **.tgz

[FIX] Broadcast channel synchronization [FIX] Bug in example resetting input on fast page refresh
ivan-topp · Oct 27, 2022 · f18f9cc · f18f9cc
1 parent b356c88
commit f18f9cc
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 dist
-package-lock.json
+package-lock.json
+**.tgz
diff --git a/examples/react-example/src/App.tsx b/examples/react-example/src/App.tsx
@@ -5,7 +5,7 @@ import { SocketIOProvider } from 'y-socket.io';
 function App() {
   const [doc, setDoc] = useState<Y.Doc | null>(null);
   const [provider, setProvider] = useState<SocketIOProvider | null>(null);
-  const [connected, setConnected] = useState<boolean>(false);
+  const [connected, setConnected] = useState<boolean>(true);
   const [input, setInput] = useState<string>('');
   const [clients, setClients] = useState<string[]>([]);
 
@@ -15,7 +15,6 @@ function App() {
       const _doc = new Y.Doc();
       const yMap = _doc.getMap('data');
       if (!yMap.has('input')) {
-        yMap.set('input', '');
         yMap.observe((event, transaction) => {
           setInput(yMap.get('input') as string);
         });
@@ -49,6 +48,12 @@ function App() {
 
   if (!provider) return <h1>Initializing provider...</h1>;
 
+  const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    if (!doc) return;
+    const yMap = doc.getMap('data');
+    yMap.set('input', e.target.value ?? '')
+  }
+
   return (
     <div>
       App
@@ -59,13 +64,13 @@ function App() {
             ? <>
               <button onClick={() => provider.connect()}>Connect</button>
             </>
-            : !!doc &&<div style={{ display: 'flex', flexDirection: 'column' }}>
+            : !!doc && <div style={{ display: 'flex', flexDirection: 'column' }}>
               <pre>
-                { JSON.stringify(clients, null, 4) }
+                {JSON.stringify(clients, null, 4)}
               </pre>
               <input
                 value={input}
-                onChange={(e) => doc.getMap('data').set('input', e.target.value ?? '')}
+                onChange={onChange}
               />
               <br />
               <button onClick={() => doc.getMap('data').set('input', `${Math.random()}`)}>Emit random change</button>

diff --git a/src/client/provider.ts b/src/client/provider.ts
@@ -246,6 +246,7 @@ export class SocketIOProvider extends Observable<string> {
     if (!this.socket.connected) {
       this.emit('status', [{ status: 'connecting' }])
       this.socket.connect()
+      if (!this.disableBc) this.connectBc()
       this.synced = false
     }
   }
@@ -266,7 +267,6 @@ export class SocketIOProvider extends Observable<string> {
       Y.applyUpdate(this.doc, new Uint8Array(update), this)
     })
     if (this.awareness.getLocalState() !== null) this.socket.emit('awareness-update', AwarenessProtocol.encodeAwarenessUpdate(this.awareness, [this.doc.clientID]))
-    if (!this.disableBc) this.connectBc()
     if (resyncInterval > 0) {
       this.resyncInterval = setInterval(() => {
         if (this.socket.disconnected) return
@@ -342,7 +342,7 @@ export class SocketIOProvider extends Observable<string> {
         bc.publish(this._broadcastChannel, {
           type: 'sync-update',
           data: update
-        })
+        }, this)
       }
     }
   }
@@ -395,6 +395,7 @@ export class SocketIOProvider extends Observable<string> {
       this.bcconnected = true
     }
     bc.publish(this._broadcastChannel, { type: 'sync-step-1', data: Y.encodeStateVector(this.doc) }, this)
+    bc.publish(this._broadcastChannel, { type: 'sync-step-2', data: Y.encodeStateAsUpdate(this.doc) }, this)
     bc.publish(this._broadcastChannel, { type: 'query-awareness', data: null }, this)
     bc.publish(this._broadcastChannel, { type: 'awareness-update', data: AwarenessProtocol.encodeAwarenessUpdate(this.awareness, [this.doc.clientID]) }, this)
   }