fix: websocket message handling, Buffer, onConnect (#107)

* Push

* Buffer.from

* Format

* Add changeset

Author: PuruVJ

.changeset/dull-mangos-appear.md

@@ -0,0 +1,5 @@
+---
+'@clockworklabs/spacetimedb-sdk': patch
+---
+
+fix: websocket message handling, Buffer, onConnect

packages/sdk/src/db_connection_impl.ts

@@ -31,6 +31,7 @@ import { TableCache, type Operation, type TableUpdate } from './table_cache.ts';
 import { deepEqual, toPascalCase } from './utils.ts';
 import { WebsocketDecompressAdapter } from './websocket_decompress_adapter.ts';
 import type { WebsocketTestAdapter } from './websocket_test_adapter.ts';
+import { Buffer } from 'buffer';
 
 export {
   AlgebraicType,
@@ -146,7 +147,7 @@ export class DBConnectionImpl<DBView = any, Reducers = any>
       for (const update of rawTableUpdate.updates) {
         let decompressed: ws.QueryUpdate;
         if (update.tag === 'Brotli') {
-          const decompressedBuffer = decompress(new Buffer(update.value));
+          const decompressedBuffer = decompress(Buffer.from(update.value));
           decompressed = ws.QueryUpdate.deserialize(
             new BinaryReader(decompressedBuffer)
           );
@@ -390,12 +391,7 @@ export class DBConnectionImpl<DBView = any, Reducers = any>
           this.token = message.token;
         }
         this.clientAddress = message.address;
-        this.#emitter.emit(
-          'connect',
-          this.token,
-          this.identity,
-          this.clientAddress
-        );
+        this.#emitter.emit('connect', this, this.identity, this.token);
       }
     });
   }

packages/sdk/src/websocket_decompress_adapter.ts

@@ -14,10 +14,10 @@ export class WebsocketDecompressAdapter {
     let decompressed: Uint8Array;
     switch (buffer[0]) {
       case 0:
-        decompressed = msg.data.slice(1);
+        decompressed = buffer.slice(1);
         break;
       case 1:
-        decompressed = decompress(new Buffer(buffer.slice(1)));
+        decompressed = decompress(Buffer.from(buffer.slice(1)));
         break;
       default:
         throw new Error('Invalid message type');

packages/test-app/package.json

@@ -10,7 +10,11 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "spacetime:generate-bindings": "spacetime generate --lang typescript --out-dir src/module_bindings --project-path server",
+    "spacetime:start": "spacetime start server",
+    "spacetime:publish:local": "spacetime publish game --project-path server --server local",
+    "spacetime:publish": "spacetime publish game --project-path server --server testnet"
   },
   "workspaces": [
     "packages/*"

packages/test-app/server/src/lib.rs

@@ -1,6 +1,6 @@
 use spacetimedb::{reducer, table, Identity, ReducerContext, SpacetimeType, Table};
 
-#[table(name = player)]
+#[table(name = player, public)]
 pub struct Player {
     #[primary_key]
     owner_id: String,
@@ -14,7 +14,7 @@ pub struct Point {
     pub y: u16,
 }
 
-#[table(name = user)]
+#[table(name = user, public)]
 pub struct User {
     #[primary_key]
     pub identity: Identity,
@@ -23,5 +23,9 @@ pub struct User {
 
 #[reducer]
 pub fn create_player(ctx: &ReducerContext, name: String, location: Point) {
-    ctx.db.player().insert(Player { owner_id: ctx.sender.to_hex().to_string(), name, location });
+    ctx.db.player().insert(Player {
+        owner_id: ctx.sender.to_hex().to_string(),
+        name,
+        location,
+    });
 }

packages/test-app/src/App.tsx

@@ -1,38 +1,58 @@
 import { DBConnection } from './module_bindings';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import './App.css';
 import { Identity } from '@clockworklabs/spacetimedb-sdk';
 
 function App() {
-  const [connection] = useState<DBConnection>(
+  const [connection] = useState(() =>
     DBConnection.builder()
       .withUri('ws://localhost:3000')
-      .withModuleName('goldbreezycanid')
+      .withModuleName('game')
       .onDisconnect(() => {
         console.log('disconnected');
       })
       .onConnectError(() => {
         console.log('client_error');
       })
-      .onConnect((_, identity, _token) => {
+      .onConnect((conn, identity, _token) => {
         console.log(
           'Connected to SpacetimeDB with identity:',
           identity.toHexString()
         );
+
+        conn.subscriptionBuilder().subscribe(['SELECT * FROM player']);
       })
       .withCredentials([
         Identity.fromString(
-          '49f2d472cabfbc7ded52ac1f93316750dc8ea162aac97cc52a340aed221b7ff3'
+          '93dda09db9a56d8fa6c024d843e805d8262191db3b4ba84c5efcd1ad451fed4e'
         ),
-        'eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJoZXhfaWRlbnRpdHkiOiI0OWYyZDQ3MmNhYmZiYzdkZWQ1MmFjMWY5MzMxNjc1MGRjOGVhMTYyYWFjOTdjYzUyYTM0MGFlZDIyMWI3ZmYzIiwiaWF0IjoxNjgwMTkwNDc5fQ.KPz0DjrWb6I5c51wa71FGTgWz0Nh6CiNycM0ynmDDNkGjRxsci5cmiEjHQdYKyIeaG9MizSVPGlaDJ2Z7uctcg',
+        'eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJoZXhfaWRlbnRpdHkiOiI5M2RkYTA5ZGI5YTU2ZDhmYTZjMDI0ZDg0M2U4MDVkODI2MjE5MWRiM2I0YmE4NGM1ZWZjZDFhZDQ1MWZlZDRlIiwiaWF0IjoxNzI4MzY3NDk0LCJleHAiOm51bGx9.ua3DQaiXo5i3Ye0okughs84PV9uZLCnov26zvCMG-3ibqGg6vH0uDDY6L-zDf8XiFgUqEIcvnJvuKLThPDipjQ',
       ])
       .build()
   );
 
+  useEffect(() => {
+    connection.db.player.onInsert(player => {
+      console.log(player);
+    });
+
+    setTimeout(() => {
+      console.log(Array.from(connection.db.player.iter()));
+    }, 5000);
+  }, [connection]);
+
   return (
     <div className="App">
       <h1>Typescript SDK Test!</h1>
       <p>{connection.identity?.toHexString()}</p>
+
+      <button
+        onClick={() =>
+          connection.reducers.createPlayer('Hello', { x: 10, y: 40 })
+        }
+      >
+        Update
+      </button>
     </div>
   );
 }

packages/test-app/src/module_bindings/create_player_reducer.ts

@@ -34,6 +34,8 @@ import {
   SumTypeVariant,
   // @ts-ignore
   TableCache,
+  // @ts-ignore
+  deepEqual,
 } from '@clockworklabs/spacetimedb-sdk';
 
 // @ts-ignore
@@ -52,18 +54,18 @@ export namespace CreatePlayer {
    * A function which returns this type represented as an AlgebraicType.
    * This function is derived from the AlgebraicType used to generate this type.
    */
-  export function getAlgebraicType(): AlgebraicType {
+  export function getTypeScriptAlgebraicType(): AlgebraicType {
     return AlgebraicType.createProductType([
       new ProductTypeElement('name', AlgebraicType.createStringType()),
-      new ProductTypeElement('location', __Point.getAlgebraicType()),
+      new ProductTypeElement('location', __Point.getTypeScriptAlgebraicType()),
     ]);
   }
 
   export function serialize(writer: BinaryWriter, value: CreatePlayer): void {
-    CreatePlayer.getAlgebraicType().serialize(writer, value);
+    CreatePlayer.getTypeScriptAlgebraicType().serialize(writer, value);
   }
 
   export function deserialize(reader: BinaryReader): CreatePlayer {
-    return CreatePlayer.getAlgebraicType().deserialize(reader);
+    return CreatePlayer.getTypeScriptAlgebraicType().deserialize(reader);
   }
 }

packages/test-app/src/module_bindings/index.ts

@@ -34,6 +34,8 @@ import {
   SumTypeVariant,
   // @ts-ignore
   TableCache,
+  // @ts-ignore
+  deepEqual,
 } from '@clockworklabs/spacetimedb-sdk';
 
 // Import and reexport all reducer arg types
@@ -58,19 +60,19 @@ const REMOTE_MODULE = {
   tables: {
     player: {
       tableName: 'player',
-      rowType: Player.getAlgebraicType(),
+      rowType: Player.getTypeScriptAlgebraicType(),
       primaryKey: 'owner_id',
     },
     user: {
       tableName: 'user',
-      rowType: User.getAlgebraicType(),
+      rowType: User.getTypeScriptAlgebraicType(),
       primaryKey: 'identity',
     },
   },
   reducers: {
     create_player: {
       reducerName: 'create_player',
-      argsType: CreatePlayer.getAlgebraicType(),
+      argsType: CreatePlayer.getTypeScriptAlgebraicType(),
     },
   },
   // Constructors which are used by the DBConnectionImpl to
@@ -98,7 +100,7 @@ export class RemoteReducers {
   createPlayer(name: string, location: Point) {
     const __args = { name, location };
     let __writer = new BinaryWriter(1024);
-    CreatePlayer.getAlgebraicType().serialize(__writer, __args);
+    CreatePlayer.getTypeScriptAlgebraicType().serialize(__writer, __args);
     let __argsBuffer = __writer.getBuffer();
     this.connection.callReducer('create_player', __argsBuffer);
   }

packages/test-app/src/module_bindings/player_table.ts

@@ -2,8 +2,6 @@
 // WILL NOT BE SAVED. MODIFY TABLES IN RUST INSTEAD.
 
 import {
-  // @ts-ignore
-  deepEqual,
   // @ts-ignore
   Address,
   // @ts-ignore
@@ -36,6 +34,8 @@ import {
   SumTypeVariant,
   // @ts-ignore
   TableCache,
+  // @ts-ignore
+  deepEqual,
 } from '@clockworklabs/spacetimedb-sdk';
 import { Player } from './player_type';
 // @ts-ignore

packages/test-app/src/module_bindings/player_type.ts

@@ -34,6 +34,8 @@ import {
   SumTypeVariant,
   // @ts-ignore
   TableCache,
+  // @ts-ignore
+  deepEqual,
 } from '@clockworklabs/spacetimedb-sdk';
 // @ts-ignore
 import { Point as __Point } from './point_type';
@@ -52,19 +54,19 @@ export namespace Player {
    * A function which returns this type represented as an AlgebraicType.
    * This function is derived from the AlgebraicType used to generate this type.
    */
-  export function getAlgebraicType(): AlgebraicType {
+  export function getTypeScriptAlgebraicType(): AlgebraicType {
     return AlgebraicType.createProductType([
       new ProductTypeElement('ownerId', AlgebraicType.createStringType()),
       new ProductTypeElement('name', AlgebraicType.createStringType()),
-      new ProductTypeElement('location', __Point.getAlgebraicType()),
+      new ProductTypeElement('location', __Point.getTypeScriptAlgebraicType()),
     ]);
   }
 
   export function serialize(writer: BinaryWriter, value: Player): void {
-    Player.getAlgebraicType().serialize(writer, value);
+    Player.getTypeScriptAlgebraicType().serialize(writer, value);
   }
 
   export function deserialize(reader: BinaryReader): Player {
-    return Player.getAlgebraicType().deserialize(reader);
+    return Player.getTypeScriptAlgebraicType().deserialize(reader);
   }
 }