rename mount/unmount to start/stop

The Client usage is now:

const client = Client({ ... });
client.subscribe(...);
client.start();

If used inside a component that can mount or unmount:

constructor() {
  this.client = Client({ ... });
}

mount() {
  this.unsubscribe = this.client.subscribe(...);
  this.client.start();
}

unount() {
  this.unsubscribe();
  this.client.stop();
}

Author: nicolodavis

src/client/client.js

@@ -253,6 +253,7 @@ class _ClientImpl {
       subscribe: () => {},
       subscribeGameMetadata: _metadata => {}, // eslint-disable-line no-unused-vars
       connect: () => {},
+      disconnect: () => {},
       updateGameID: () => {},
       updatePlayerID: () => {},
     };
@@ -317,7 +318,9 @@ class _ClientImpl {
     this.notifySubscribers();
   }
 
-  mount() {
+  start() {
+    this.transport.connect();
+
     if (
       process.env.NODE_ENV !== 'production' &&
       this.debug !== false &&
@@ -336,7 +339,9 @@ class _ClientImpl {
     }
   }
 
-  unmount() {
+  stop() {
+    this.transport.disconnect();
+
     if (this._debugPanel != null) {
       this._debugPanel.$destroy();
       this._debugPanel = null;
@@ -408,10 +413,6 @@ class _ClientImpl {
     return ret;
   }
 
-  connect() {
-    this.transport.connect();
-  }
-
   createDispatchers() {
     this.moves = createMoveDispatchers(
       this.game.moveNames,

src/client/client.test.js

@@ -182,7 +182,7 @@ describe('multiplayer', () => {
         game: { moves: { A: () => {} } },
         multiplayer: { server: host + ':' + port },
       });
-      client.connect();
+      client.start();
     });
 
     afterAll(() => {
@@ -214,7 +214,7 @@ describe('multiplayer', () => {
         game: {},
         multiplayer: true,
       });
-      client.connect();
+      client.start();
     });
 
     test('correct transport used', () => {
@@ -236,8 +236,8 @@ describe('multiplayer', () => {
       client0 = Client({ ...spec, playerID: '0' });
       client1 = Client({ ...spec, playerID: '1' });
 
-      client0.connect();
-      client1.connect();
+      client0.start();
+      client1.start();
     });
 
     test('correct transport used', () => {
@@ -650,16 +650,16 @@ test('override game state', () => {
   expect(client.getState().G).toEqual({ moved: true });
 });
 
-describe('mount / unmount', () => {
+describe('start / stop', () => {
   test('mount on custom element', () => {
     const el = document.createElement('div');
     const client = Client({ game: {}, debug: { target: el } });
-    client.mount();
-    client.unmount();
+    client.start();
+    client.stop();
   });
 
-  test('unmount', () => {
+  test('try to stop without starting', () => {
     const client = Client({ game: {} });
-    client.unmount();
+    client.stop();
   });
 });

src/client/react-native.js

@@ -67,6 +67,7 @@ export function Client(opts) {
         gameID: props.gameID,
         playerID: props.playerID,
         credentials: props.credentials,
+        debug: false,
         socketOpts: {
           transports: ['websocket'],
         },
@@ -75,11 +76,12 @@ export function Client(opts) {
     }
 
     componentDidMount() {
-      this.client.connect();
       this.unsubscribe = this.client.subscribe(() => this.forceUpdate());
+      this.client.start();
     }
 
     componentWillUnmount() {
+      this.client.stop();
       this.unsubscribe();
     }
 

src/client/react.js

@@ -99,14 +99,13 @@ export function Client(opts) {
     }
 
     componentDidMount() {
-      this.client.connect();
       this.unsubscribe = this.client.subscribe(() => this.forceUpdate());
-      this.client.mount();
+      this.client.start();
     }
 
     componentWillUnmount() {
+      this.client.stop();
       this.unsubscribe();
-      this.client.unmount();
     }
 
     componentDidUpdate(prevProps) {

src/client/transport/local.js

@@ -102,7 +102,7 @@ export class Local {
   }
 
   /**
-   * Connect to the server.
+   * Connect to the master.
    */
   connect() {
     this.master.connect(this.gameID, this.playerID, (type, ...args) => {
@@ -116,6 +116,11 @@ export class Local {
     this.master.onSync(this.gameID, this.playerID, this.numPlayers);
   }
 
+  /**
+   * Disconnect from the master.
+   */
+  disconnect() {}
+
   /**
    * Subscribe to connection state changes.
    */

src/client/transport/local.test.js

@@ -27,9 +27,9 @@ describe('LocalMaster', () => {
     storeB.dispatch = jest.fn();
   });
 
-  test('connect', async () => {
-    await localA.connect();
-    await localB.connect();
+  test('connect', () => {
+    localA.connect();
+    localB.connect();
     localA.subscribe();
 
     expect(storeA.dispatch).toBeCalledWith(
@@ -44,8 +44,8 @@ describe('LocalMaster', () => {
     );
   });
 
-  test('update', async () => {
-    await localA.onAction({ _stateID: 0 }, gameEvent('endTurn'));
+  test('update', () => {
+    localA.onAction({ _stateID: 0 }, gameEvent('endTurn'));
 
     expect(storeA.dispatch).toBeCalledWith(
       expect.objectContaining({
@@ -59,9 +59,14 @@ describe('LocalMaster', () => {
     );
   });
 
-  test('connect without callback', async () => {
+  test('connect without callback', () => {
     master.connect('gameID', '0', undefined);
-    await master.onSync('gameID', '0');
+    master.onSync('gameID', '0');
+  });
+
+  test('disconnect', () => {
+    localA.disconnect();
+    localB.disconnect();
   });
 });
 
@@ -71,14 +76,14 @@ describe('Local', () => {
     const store = { dispatch: () => {} };
     const m = new Local({ master, store });
 
-    test('gameID', async () => {
-      await m.updateGameID('test');
+    test('gameID', () => {
+      m.updateGameID('test');
       expect(m.gameID).toBe('default:test');
       expect(master.onSync).lastCalledWith('default:test', null, 2);
     });
 
-    test('playerID', async () => {
-      await m.updatePlayerID('player');
+    test('playerID', () => {
+      m.updatePlayerID('player');
       expect(m.playerID).toBe('player');
       expect(master.onSync).lastCalledWith('default:test', 'player', 2);
     });

src/client/transport/socketio.js

@@ -119,6 +119,16 @@ export class SocketIO {
     });
   }
 
+  /**
+   * Disconnect from the server.
+   */
+  disconnect() {
+    this.socket.close();
+    this.socket = null;
+    this.isConnected = false;
+    this.callback();
+  }
+
   /**
    * Subscribe to connection state changes.
    */

src/client/transport/socketio.test.js

@@ -26,6 +26,8 @@ class MockSocket {
   on(type, callback) {
     this.callbacks[type] = callback;
   }
+
+  close() {}
 }
 
 test('defaults', () => {
@@ -54,27 +56,43 @@ describe('update gameID / playerID', () => {
   });
 });
 
-test('connection status', () => {
-  const onChangeMock = jest.fn();
-  const mockSocket = new MockSocket();
-  const m = new SocketIO({
-    socket: mockSocket,
-    gameID: 0,
-    playerID: 0,
-    gameName: 'foo',
-    numPlayers: 2,
-  });
-  m.subscribe(onChangeMock);
-  m.connect();
+describe('connection status', () => {
+  let onChangeMock;
+  let mockSocket;
+  let m;
 
-  mockSocket.callbacks['connect']();
-  expect(onChangeMock).toHaveBeenCalled();
-  expect(m.isConnected).toBe(true);
+  beforeEach(() => {
+    onChangeMock = jest.fn();
+    mockSocket = new MockSocket();
+    m = new SocketIO({
+      socket: mockSocket,
+      gameID: 0,
+      playerID: 0,
+      gameName: 'foo',
+      numPlayers: 2,
+    });
+    m.subscribe(onChangeMock);
+    m.connect();
+  });
 
-  onChangeMock.mockClear();
-  mockSocket.callbacks['disconnect']();
-  expect(onChangeMock).toHaveBeenCalled();
-  expect(m.isConnected).toBe(false);
+  test('connect', () => {
+    mockSocket.callbacks['connect']();
+    expect(onChangeMock).toHaveBeenCalled();
+    expect(m.isConnected).toBe(true);
+  });
+
+  test('disconnect', () => {
+    mockSocket.callbacks['disconnect']();
+    expect(onChangeMock).toHaveBeenCalled();
+    expect(m.isConnected).toBe(false);
+  });
+
+  test('close socket', () => {
+    mockSocket.callbacks['connect']();
+    expect(m.isConnected).toBe(true);
+    m.disconnect();
+    expect(m.isConnected).toBe(false);
+  });
 });
 
 describe('multiplayer', () => {