Merge pull request #223 from movesthatmatter/fix-state-transformer

Fix state transformer

apps/movex-demo/pages/chat/[chatId].tsx

@@ -1,4 +1,4 @@
-import { useMovexBoundResourceFromRid, useMovexClientId } from 'movex-react';
+import { useMovexBoundResourceFromRid, useMovexClient } from 'movex-react';
 import { useRouter } from 'next/router';
 import { useMemo } from 'react';
 import { toResourceIdentifierObj } from 'movex-core-util';
@@ -20,7 +20,7 @@ const ChatSystem: React.FC<Props> = () => {
 
  // TODO: Validate the rid is correct inside useMovexBoundResouce
  const boundResource = useMovexBoundResourceFromRid(movexConfig, rid);
- const userId = useMovexClientId(movexConfig);
+ const userId = useMovexClient(movexConfig)?.id;
 
  if (!(boundResource && userId)) {
  return null;

libs/movex-core-util/package.json

@@ -1,6 +1,6 @@
 {
  "name": "movex-core-util",
- "version": "0.1.6-23",
+ "version": "0.1.6-45",
  "description": "Movex Core Util is the library of utilities for Movex",
  "license": "MIT",
  "author": {

libs/movex-core-util/src/lib/EventEmitter/IOEvents.ts

@@ -12,6 +12,7 @@ import type {
  MovexClient,
  ResourceIdentifier,
  SanitizedMovexClient,
+ MovexClientMasterClockOffset,
 } from '../core-types';
 
 export type IOEvents<
@@ -89,10 +90,9 @@ export type IOEvents<
  /**
  * The following events are directed from Master to Client
  * */
- // @deprecate in favor ofClientReady
- setClientId: (clientId: string) => void;
+ onReady: (p: SanitizedMovexClient) => void;
 
- onClientReady: (client: SanitizedMovexClient) => void;
+ onClockSync: (p: undefined) => IOPayloadResult<number, unknown>; // acknowledges the client timestamp
 
  onFwdAction: (
  payload: {
@@ -106,7 +106,7 @@ export type IOEvents<
  ) => IOPayloadResult<void, unknown>;
  onResourceSubscriberAdded: (p: {
  rid: ResourceIdentifier<TResourceType>;
- client: Pick<MovexClient, 'id' | 'info'>;
+ client: SanitizedMovexClient;
  // clientId: MovexClient['id'];
  }) => IOPayloadResult<
  void,
@@ -124,6 +124,7 @@ export type IOEvents<
  * The following events are by-directional (from Client to Master and vice-versa)
  * */
 
+ // They need to be different than ping/pong because those are native to socket.io
  ping: () => IOPayloadResult<void, unknown>;
  pong: () => IOPayloadResult<void, unknown>;
 };

libs/movex-core-util/src/lib/EventEmitter/ScketIOEmitter.ts

@@ -15,13 +15,19 @@ export class SocketIOEmitter<
  TSocketIO extends SocketIO = ServerSocket | ClientSocket
 > implements EventEmitter<TEventMap>
 {
+ protected config: {
+ waitForResponseMs: number;
+ };
+
  constructor(
  protected socket: TSocketIO,
- protected config: {
+ config?: {
  waitForResponseMs?: number;
- } = {}
+ }
  ) {
- this.config.waitForResponseMs = this.config.waitForResponseMs || 15 * 1000;
+ this.config = {
+ waitForResponseMs: config?.waitForResponseMs || 15 * 1000,
+ };
  }
 
  on<E extends keyof TEventMap>(
@@ -173,6 +179,14 @@ export class SocketIOEmitter<
  }
 }
 
+/**
+ * TODO: Deprecate this in favor of using the native timeout See https://socket.io/docs/v4/emitting-events/#with-timeout
+ *
+ * @param onSuccess
+ * @param onTimeout
+ * @param timeout
+ * @returns
+ */
 const withTimeout = (
  onSuccess: (...args: any[]) => void,
  onTimeout: () => void,

libs/movex-core-util/src/lib/Logsy.ts

@@ -114,4 +114,3 @@ class Logsy {
 }
 
 export const globalLogsy = new Logsy();
-

libs/movex-core-util/src/lib/core-types.ts

@@ -237,8 +237,17 @@ export type MovexClient<Info extends MovexClientInfo = UnknownRecord> = {
  >;
 };
 
+export type MovexClientMasterClockOffset = number;
+
 export type SanitizedMovexClient<Info extends UnknownRecord = UnknownRecord> =
- Pick<MovexClient<Info>, 'id' | 'info'>;
+ Pick<MovexClient<Info>, 'id' | 'info'> & {
+ /**
+ * This is the diff between client and master needed to be adjusted on the client side
+ * 
+ * TODO: Still not sure it should be available here - meaning all the peers can read it!
+ */
+ clockOffset: MovexClientMasterClockOffset;
+ };
 
 export type ResourceIdentifierObj<TResourceType extends string> = {
  resourceType: TResourceType;

libs/movex-core-util/src/lib/reducer.ts

@@ -32,16 +32,18 @@ export type MovexReducerMap<
 // TAction extends AnyAction = AnyAction
 // > = (state: TState, action: TAction) => TState;
 
-export type MovexRemoteContext = {
+export type MovexMasterContext = {
+ // @Deprecate in favor of requestAt Props which enables purity
  now: () => number; // timestamp
+ requestAt: number; // timestamp
 };
 
 export type MovexReducer<S = any, A extends AnyAction = AnyAction> = ((
  state: S,
  action: A
 ) => S) & {
  $canReconcileState?: (s: S) => boolean;
- $transformState?: (s: S, remoteContext: MovexRemoteContext) => S;
+ $transformState?: (s: S, masterContext: MovexMasterContext) => S;
 };
 
 export type GetReducerState<

libs/movex-master/package.json

@@ -1,6 +1,6 @@
 {
  "name": "movex-master",
- "version": "0.1.6-23",
+ "version": "0.1.6-45",
  "license": "MIT",
  "description": "Movex-master defines the master that wil be used on movex-server and movex-react-local-master",
  "author": {

libs/movex-master/src/lib/ConnectionToClient.ts

@@ -12,12 +12,54 @@ export class ConnectionToClient<
  TResourceType extends string,
  TClientInfo extends MovexClientInfo
 > {
+ // public latencyMs: number = 0;
+
+ // public clientClockOffset: number = 0;
+
  constructor(
  public emitter: EventEmitter<IOEvents<TState, TAction, TResourceType>>,
  public client: SanitizedMovexClient<TClientInfo>
  ) {}
 
- emitClientReady() {
- this.emitter.emit('onClientReady', this.client);
+ async setReady() {
+ await this.syncClocks();
+
+ this.emitter.emit('onReady', this.client);
+ }
+
+ async syncClocks() {
+ const requestAt = new Date().getTime();
+
+ // console.log('Sync clock', this.client.id, { requestAt });
+
+ return this.emitter
+ .emitAndAcknowledge('onClockSync', undefined)
+ .then((res) => {
+ if (res.err) {
+ // console.log('Sync clock err', this.client.id);
+ console.error(res.err);
+ return;
+ }
+
+ // TODO: This might not be correct - also not sure if this
+ // it is roughly based on the NTP protocol as described here https://stackoverflow.com/a/15785110/2093626
+ // but adjusted for movex - the math might be wrong
+ // this.latencyMs = requestTime / 2;
+
+ const responseAt = new Date().getTime();
+ const requestTime = responseAt - requestAt;
+ const clientTimeAtRequest = res.val;
+
+ this.client.clockOffset =
+ clientTimeAtRequest - new Date().getTime() - requestTime;
+
+ // console.log('Sync clock ok', this.client.id, {
+ // requestAt,
+ // responseAt,
+ // requestTime,
+ // clientTimeAtRequest,
+ // clientClockOffset: this.client.clockOffset,
+ // });
+ });
  }
 }

libs/movex-master/src/lib/MovexMasterResource.spec.ts

@@ -11,6 +11,7 @@ import {
 } from 'movex-core-util';
 import { MovexMasterResource } from './MovexMasterResource';
 import { MemoryMovexStore } from 'movex-store';
+import { createMasterContext } from './util';
 
 const rid = toResourceIdentifierStr({ resourceType: 'c', resourceId: '1' });
 
@@ -24,9 +25,13 @@ test('gets initial state', async () => {
  })
  );
 
- const actualPublic = await master.getPublicState(rid).resolveUnwrap();
+ const mockMasterContext = createMasterContext({ requestAt: 123 });
+
+ const actualPublic = await master
+ .getPublicState(rid, mockMasterContext)
+ .resolveUnwrap();
  const actualByClient = await master
- .getClientSpecificState(rid, 'testClient')
+ .getClientSpecificState(rid, 'testClient', mockMasterContext)
  .resolveUnwrap();
 
  const expectedPublic = computeCheckedState(initialCounterState);
@@ -45,19 +50,23 @@ test('applies public action', async () => {
  })
  );
 
+ const mockMasterContext = createMasterContext({ requestAt: 123 });
+
  const clientAId = 'clienA';
 
  const action: GetReducerAction<typeof counterReducer> = {
  type: 'increment',
  };
 
  const actual = await master
- .applyAction(rid, clientAId, action)
+ .applyAction(rid, clientAId, action, mockMasterContext)
  .resolveUnwrap();
 
- const actualPublic = await master.getPublicState(rid).resolveUnwrap();
+ const actualPublic = await master
+ .getPublicState(rid, mockMasterContext)
+ .resolveUnwrap();
  const actualByClient = await master
- .getClientSpecificState(rid, clientAId)
+ .getClientSpecificState(rid, clientAId, mockMasterContext)
  .resolveUnwrap();
 
  const expectedPublic = computeCheckedState({
@@ -90,6 +99,8 @@ test('applies only one private action w/o getting to reconciliation', async () =
  })
  );
 
+ const mockMasterContext = createMasterContext({ requestAt: 123 });
+
  const senderClientId = 'senderClient';
 
  const privateAction: GetReducerAction<typeof counterReducer> = {
@@ -103,16 +114,23 @@ test('applies only one private action w/o getting to reconciliation', async () =
  };
 
  const actual = await master
- .applyAction(rid, senderClientId, [privateAction, publicAction])
+ .applyAction(
+ rid,
+ senderClientId,
+ [privateAction, publicAction],
+ mockMasterContext
+ )
  .resolveUnwrap();
 
- const actualPublicState = await master.getPublicState(rid).resolveUnwrap();
+ const actualPublicState = await master
+ .getPublicState(rid, mockMasterContext)
+ .resolveUnwrap();
  const actualSenderState = await master
- .getClientSpecificState(rid, senderClientId)
+ .getClientSpecificState(rid, senderClientId, mockMasterContext)
  .resolveUnwrap();
 
  const actualReceiverState = await master
- .getClientSpecificState(rid, 'otherClient')
+ .getClientSpecificState(rid, 'otherClient', mockMasterContext)
  .resolveUnwrap();
 
  const expectedPublic = computeCheckedState({
@@ -156,6 +174,8 @@ test('applies private action UNTIL Reconciliation', async () => {
  })
  );
 
+ const mockMasterContext = createMasterContext({ requestAt: 123 });
+
  const whitePlayer = 'white';
  const blackPlayer = 'black';
 
@@ -177,19 +197,24 @@ test('applies private action UNTIL Reconciliation', async () => {
 
  // White Private Action
  const actualActionResultBeforeReconciliation = await master
- .applyAction(rid, whitePlayer, [privateWhiteAction, publicWhiteAction])
+ .applyAction(
+ rid,
+ whitePlayer,
+ [privateWhiteAction, publicWhiteAction],
+ mockMasterContext
+ )
  .resolveUnwrap();
 
  const actualPublicStateBeforeReconciliation = await master
- .getPublicState(rid)
+ .getPublicState(rid, mockMasterContext)
  .resolveUnwrap();
 
  const actualSenderStateBeforeReconciliation = await master
- .getClientSpecificState(rid, whitePlayer)
+ .getClientSpecificState(rid, whitePlayer, mockMasterContext)
  .resolveUnwrap();
 
  const actualReceiverStateBeforeReconciliation = await master
- .getClientSpecificState(rid, blackPlayer)
+ .getClientSpecificState(rid, blackPlayer, mockMasterContext)
  .resolveUnwrap();
 
  const expectedPublicStateBeforeReconciliation = computeCheckedState({
@@ -260,19 +285,24 @@ test('applies private action UNTIL Reconciliation', async () => {
 
  // Black Private Action (also the Reconciliatory Action)
  const actualActionResultAfterReconciliation = await master
- .applyAction(rid, blackPlayer, [privateBlackAction, publicBlackAction])
+ .applyAction(
+ rid,
+ blackPlayer,
+ [privateBlackAction, publicBlackAction],
+ mockMasterContext
+ )
  .resolveUnwrap();
 
  const actualPublicStateAfterReconciliation = await master
- .getPublicState(rid)
+ .getPublicState(rid, mockMasterContext)
  .resolveUnwrap();
 
  const actualSenderStateAfterReconciliation = await master
- .getClientSpecificState(rid, blackPlayer)
+ .getClientSpecificState(rid, blackPlayer, mockMasterContext)
  .resolveUnwrap();
 
  const actualReceiverStateAfterReconciliation = await master
- .getClientSpecificState(rid, whitePlayer)
+ .getClientSpecificState(rid, whitePlayer, mockMasterContext)
  .resolveUnwrap();
 
  const expectedPublicStateAfterReconciliation = computeCheckedState({