disconnect fixes

client/packages/core/src/Reactor.js

@@ -77,6 +77,7 @@ export default class Reactor {
   /** @type BroadcastChannel | undefined */
   _broadcastChannel;
 
+  /** @type {Record<string, {isConnected: boolean; error: any}>} */
   _rooms = {};
   _presence = {};
   _broadcastQueue = [];
@@ -300,6 +301,10 @@ export default class Reactor {
         // (EPH): set session-id, so we know
         // which item is us
         this._sessionId = msg["session-id"];
+
+        for (const roomId of Object.keys(this._rooms)) {
+          this._tryJoinRoom(roomId);
+        }
         break;
       case "add-query-ok":
         const { q, result, "processed-tx-id": addQueryTxId } = msg;
@@ -393,13 +398,13 @@ export default class Reactor {
           break;
         }
 
-        joinedRoom.isLoading = false;
+        joinedRoom.isConnected = true;
         this._notifyPresenceSubs(loadingRoomId);
         this._flushEnqueuedRoomData(loadingRoomId);
         break;
       case "join-room-error":
         const errorRoomId = msg["room-id"];
-        const errorRoom = this._presence[errorRoomId];
+        const errorRoom = this._rooms[errorRoomId];
         if (errorRoom) {
           errorRoom.error = msg["error"];
         }
@@ -812,10 +817,6 @@ export default class Reactor {
         this._sendMutation(eventId, mut);
       }
     });
-    const roomIds = Object.keys(this._presence);
-    roomIds.forEach((roomId) => {
-      this._trySendAuthed(uuid(), { op: "join-room", "room-id": roomId });
-    });
   }
 
   _trySendAuthed(eventId, msg) {
@@ -861,6 +862,10 @@ export default class Reactor {
   _wsOnClose = () => {
     this._setStatus(STATUS.CLOSED);
 
+    for (const room of Object.values(this._rooms)) {
+      room.isConnected = false;
+    }
+
     if (this._isShutdown) {
       log.info(
         "[socket-close] socket has been shut down and will not reconnect",
@@ -1238,14 +1243,14 @@ export default class Reactor {
   // Rooms
 
   joinRoom(roomId) {
-    this._rooms[roomId] = {
-      isLoading: true,
-    };
+    if (!this._rooms[roomId]) {
+      this._rooms[roomId] = {
+        isConnected: false,
+        error: undefined,
+      };
+    }
 
-    this._trySendAuthed(uuid(), {
-      op: "join-room",
-      "room-id": roomId,
-    });
+    this._tryJoinRoom(roomId);
 
     return () => {
       this._cleanupRoom(roomId);
@@ -1276,14 +1281,14 @@ export default class Reactor {
    * @returns {import('./presence').PresenceResponse<RoomSchema[RoomType]['presence'], Keys>}
    */
   getPresence(roomType, roomId, opts = {}) {
-    const presence = this._presence[roomId];
     const room = this._rooms[roomId];
+    const presence = this._presence[roomId];
     if (!room || !presence || !presence.result) return null;
 
     return {
       ...buildPresenceSlice(presence.result, opts),
-      isLoading: room.isLoading,
-      error: presence.error,
+      isLoading: !room.isConnected,
+      error: room.error,
     };
   }
 
@@ -1309,7 +1314,7 @@ export default class Reactor {
 
     presence.result.user = data;
 
-    if (room.isLoading) {
+    if (!room.isConnected) {
       return;
     }
 
@@ -1325,6 +1330,10 @@ export default class Reactor {
     });
   }
 
+  _tryJoinRoom(roomId) {
+    this._trySendAuthed(uuid(), { op: "join-room", "room-id": roomId });
+  }
+
   /**
    * @template {keyof RoomSchema} RoomType
    * @template {keyof RoomSchema[RoomType]['presence']} Keys
@@ -1339,7 +1348,6 @@ export default class Reactor {
 
     const handler = { ...opts, roomId, cb, prev: null };
 
-    this._rooms[roomId].isLoading = true;
     this._presence[roomId] = this._presence[roomId] || {};
     this._presence[roomId].handlers = this._presence[roomId].handlers || [];
     this._presence[roomId].handlers.push(handler);
@@ -1392,13 +1400,13 @@ export default class Reactor {
   // Broadcast
 
   publishTopic({ roomType, roomId, topic, data }) {
-    const room = this._presence[roomId];
+    const room = this._rooms[roomId];
 
     if (!room) {
       return;
     }
 
-    if (room.isLoading) {
+    if (!room.isConnected) {
       this._broadcastQueue[roomId] = this._broadcastQueue[roomId] ?? [];
       this._broadcastQueue[roomId].push({ topic, roomType, data });
 

client/www/pages/docs/presence-and-topics.md

@@ -61,7 +61,7 @@ const db = init<Schema, RoomSchema>({ appId: APP_ID });
 // Specifying a room type and room id gives you the power to
 // restrict sharing to a specific room. However you can also just use
 // `db.room()` to share presence and topics to an Instant generated default room
-const room = db.room('chat', 'main');
+const room = db.room('chat', roomId);
 ```
 
 Types for room schemas are defined as follows:

client/www/pages/examples/4-custom-cursors.tsx

@@ -51,7 +51,15 @@ export default function InstantCursors() {
 
 const userId = Math.random().toString(36).slice(2, 6);
 
-const randomDarkColor = '#' + [0, 0, 0].map(() => Math.floor(Math.random() * 200).toString(16).padStart(2, '0')).join('');
+const randomDarkColor =
+  '#' +
+  [0, 0, 0]
+    .map(() =>
+      Math.floor(Math.random() * 200)
+        .toString(16)
+        .padStart(2, '0')
+    )
+    .join('');
 
 const cursorsClassNames =
   'flex h-screen w-screen items-center justify-center overflow-hidden font-mono text-sm text-gray-800';