@mnbroatch/boardgame.io 0.0.1

package/src/client/transport/socketio.test.ts

@@ -0,0 +1,328 @@
+/*
+ * Copyright 2017 The boardgame.io Authors
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import { SocketIOTransport } from './socketio';
+import type * as ioNamespace from 'socket.io-client';
+import { makeMove } from '../../core/action-creators';
+import type { Master } from '../../master/master';
+import type { ChatMessage, State } from '../../types';
+import { ProcessGameConfig } from '../../core/game';
+
+jest.mock('../../core/logger', () => ({
+  info: jest.fn(),
+  error: jest.fn(),
+}));
+
+type UpdateArgs = Parameters<Master['onUpdate']>;
+type SyncArgs = Parameters<Master['onSync']>;
+
+class MockSocket {
+  callbacks: Record<string, (arg0?: any, arg1?: any) => void>;
+  emit: jest.Mock;
+
+  constructor() {
+    this.callbacks = {};
+    this.emit = jest.fn();
+  }
+
+  receive(type: string, ...args) {
+    this.callbacks[type](...args);
+  }
+
+  on(type: string, callback: (arg0?: any, arg1?: any) => void) {
+    this.callbacks[type] = callback;
+  }
+
+  close() {}
+}
+
+test('defaults', () => {
+  const m = new SocketIOTransport({
+    transportDataCallback: () => {},
+    game: ProcessGameConfig({}),
+    gameKey: {},
+  });
+  expect(typeof (m as any).connectionStatusCallback).toBe('function');
+  (m as any).connectionStatusCallback();
+});
+
+class TransportAdapter extends SocketIOTransport {
+  declare socket: ioNamespace.Socket & {
+    io: { engine: any };
+  };
+
+  getMatchID() {
+    return this.matchID;
+  }
+
+  getPlayerID() {
+    return this.playerID;
+  }
+
+  getCredentials() {
+    return this.credentials;
+  }
+}
+
+describe('update matchID / playerID / credentials', () => {
+  const socket = new MockSocket();
+  const m = new TransportAdapter({
+    socket,
+    transportDataCallback: () => {},
+    game: ProcessGameConfig({}),
+    gameKey: {},
+  });
+
+  beforeEach(() => (socket.emit = jest.fn()));
+
+  test('matchID', () => {
+    m.updateMatchID('test');
+    expect(m.getMatchID()).toBe('test');
+    const args: SyncArgs = ['test', null, undefined, 2];
+    expect(socket.emit).lastCalledWith('sync', ...args);
+  });
+
+  test('playerID', () => {
+    m.updatePlayerID('player');
+    expect(m.getPlayerID()).toBe('player');
+    const args: SyncArgs = ['test', 'player', undefined, 2];
+    expect(socket.emit).lastCalledWith('sync', ...args);
+  });
+
+  test('credentials', () => {
+    m.updateCredentials('1234');
+    expect(m.getCredentials()).toBe('1234');
+    const args: SyncArgs = ['test', 'player', '1234', 2];
+    expect(socket.emit).lastCalledWith('sync', ...args);
+  });
+});
+
+describe('connection status', () => {
+  let onChangeMock: jest.Mock;
+  let mockSocket: MockSocket;
+  let m: SocketIOTransport;
+
+  beforeEach(() => {
+    onChangeMock = jest.fn();
+    mockSocket = new MockSocket();
+    m = new SocketIOTransport({
+      socket: mockSocket,
+      matchID: '0',
+      playerID: '0',
+      gameName: 'foo',
+      game: ProcessGameConfig({}),
+      gameKey: {},
+      numPlayers: 2,
+      transportDataCallback: () => {},
+    });
+    m.subscribeToConnectionStatus(onChangeMock);
+    m.connect();
+  });
+
+  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);
+  });
+
+  test('doesn’t crash if syncing before connecting', () => {
+    const transportDataCallback = jest.fn();
+    const transport = new SocketIOTransport({
+      transportDataCallback,
+      game: ProcessGameConfig({}),
+      gameKey: {},
+    });
+    transport.requestSync();
+    expect(transportDataCallback).not.toHaveBeenCalled();
+  });
+});
+
+describe('multiplayer', () => {
+  const mockSocket = new MockSocket();
+  const transportDataCallback = jest.fn();
+  const transport = new TransportAdapter({
+    socket: mockSocket,
+    transportDataCallback,
+    game: ProcessGameConfig({}),
+    gameKey: {},
+  });
+  transport.connect();
+
+  beforeEach(jest.clearAllMocks);
+
+  test('receive update', () => {
+    const restored: { restore: boolean; _stateID?: number } = { restore: true };
+    mockSocket.receive('update', 'default', restored);
+    expect(transportDataCallback).toHaveBeenCalledWith({
+      type: 'update',
+      args: ['default', restored, undefined],
+    });
+  });
+
+  test('receive sync', () => {
+    const restored = { restore: true };
+    mockSocket.receive('sync', 'default', { state: restored });
+    expect(transportDataCallback).toHaveBeenCalledWith({
+      type: 'sync',
+      args: ['default', { state: restored }],
+    });
+  });
+
+  test('receive matchData', () => {
+    const matchData = [{ id: '0', name: 'Alice' }];
+    mockSocket.receive('matchData', 'default', matchData);
+    expect(transportDataCallback).toHaveBeenCalledWith({
+      type: 'matchData',
+      args: ['default', matchData],
+    });
+  });
+
+  test('send update', () => {
+    const action = makeMove(undefined, undefined, undefined);
+    const state = { _stateID: 0 } as State;
+    transport.sendAction(state, action);
+    const args: UpdateArgs = [action, state._stateID, 'default', null];
+    expect(mockSocket.emit).lastCalledWith('update', ...args);
+  });
+
+  test('receive chat-message', () => {
+    const chatData = { message: 'foo' };
+    mockSocket.receive('chat', 'default', chatData);
+    expect(transportDataCallback).toHaveBeenCalledWith({
+      type: 'chat',
+      args: ['default', chatData],
+    });
+  });
+
+  test('send chat-message', () => {
+    const message: ChatMessage = {
+      id: '0',
+      sender: '0',
+      payload: { message: 'foo' },
+    };
+    transport.sendChatMessage('matchID', message);
+    expect(mockSocket.emit).lastCalledWith(
+      'chat',
+      'matchID',
+      message,
+      transport.getCredentials()
+    );
+  });
+});
+
+describe('multiplayer delta state', () => {
+  const mockSocket = new MockSocket();
+  const transportDataCallback = jest.fn();
+  const transport = new TransportAdapter({
+    socket: mockSocket,
+    transportDataCallback,
+    game: ProcessGameConfig({}),
+    gameKey: {},
+  });
+  transport.connect();
+
+  beforeEach(jest.clearAllMocks);
+
+  test('receive patch', () => {
+    const patch1 = [
+      'default',
+      0,
+      1,
+      [{ op: 'replace', path: '/_stateID', value: 1 }],
+      [],
+    ];
+    mockSocket.receive('patch', ...patch1);
+    expect(transportDataCallback).toHaveBeenCalledWith({
+      type: 'patch',
+      args: patch1,
+    });
+  });
+});
+
+describe('server option', () => {
+  const hostname = 'host';
+  const port = '1234';
+
+  test('without protocol', () => {
+    const server = hostname + ':' + port;
+    const m = new TransportAdapter({
+      server,
+      transportDataCallback: () => {},
+      game: ProcessGameConfig({}),
+      gameKey: {},
+    });
+    m.connect();
+    expect(m.socket.io.engine.hostname).toEqual(hostname);
+    expect(m.socket.io.engine.port).toEqual(port);
+    expect(m.socket.io.engine.secure).toEqual(false);
+  });
+
+  test('without trailing slash', () => {
+    const server = 'http://' + hostname + ':' + port;
+    const m = new SocketIOTransport({
+      server,
+      transportDataCallback: () => {},
+      game: ProcessGameConfig({}),
+      gameKey: {},
+    });
+    m.connect();
+    expect((m.socket.io as any).uri).toEqual(server + '/default');
+  });
+
+  test('https', () => {
+    const serverWithProtocol = 'https://' + hostname + ':' + port + '/';
+    const m = new TransportAdapter({
+      server: serverWithProtocol,
+      transportDataCallback: () => {},
+      game: ProcessGameConfig({}),
+      gameKey: {},
+    });
+    m.connect();
+    expect(m.socket.io.engine.hostname).toEqual(hostname);
+    expect(m.socket.io.engine.port).toEqual(port);
+    expect(m.socket.io.engine.secure).toEqual(true);
+  });
+
+  test('http', () => {
+    const serverWithProtocol = 'http://' + hostname + ':' + port + '/';
+    const m = new TransportAdapter({
+      server: serverWithProtocol,
+      transportDataCallback: () => {},
+      game: ProcessGameConfig({}),
+      gameKey: {},
+    });
+    m.connect();
+    expect(m.socket.io.engine.hostname).toEqual(hostname);
+    expect(m.socket.io.engine.port).toEqual(port);
+    expect(m.socket.io.engine.secure).toEqual(false);
+  });
+
+  test('no server set', () => {
+    const m = new TransportAdapter({
+      transportDataCallback: () => {},
+      game: ProcessGameConfig({}),
+      gameKey: {},
+    });
+    m.connect();
+    expect(m.socket.io.engine.hostname).not.toEqual(hostname);
+    expect(m.socket.io.engine.port).not.toEqual(port);
+  });
+});

package/src/client/transport/socketio.ts

@@ -0,0 +1,210 @@
+/*
+ * Copyright 2017 The boardgame.io Authors
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import * as ioNamespace from 'socket.io-client';
+
+const io = ioNamespace.default;
+
+import type { Master } from '../../master/master';
+import { Transport } from './transport';
+import type { Operation } from 'rfc6902';
+import type { TransportOpts } from './transport';
+import type {
+  CredentialedActionShape,
+  FilteredMetadata,
+  LogEntry,
+  PlayerID,
+  State,
+  SyncInfo,
+  ChatMessage,
+} from '../../types';
+
+type SocketOpts = Partial<
+  ioNamespace.SocketOptions & ioNamespace.ManagerOptions
+>;
+
+interface SocketIOOpts {
+  server?: string;
+  socketOpts?: SocketOpts;
+}
+
+type SocketIOTransportOpts = TransportOpts &
+  SocketIOOpts & {
+    socket?;
+  };
+
+/**
+ * SocketIO
+ *
+ * Transport interface that interacts with the Master via socket.io.
+ */
+export class SocketIOTransport extends Transport {
+  server: string;
+  socket: ioNamespace.Socket;
+  socketOpts: SocketOpts;
+
+  /**
+   * Creates a new Multiplayer instance.
+   * @param {object} socket - Override for unit tests.
+   * @param {object} socketOpts - Options to pass to socket.io.
+   * @param {object} store - Redux store
+   * @param {string} matchID - The game ID to connect to.
+   * @param {string} playerID - The player ID associated with this client.
+   * @param {string} credentials - Authentication credentials
+   * @param {string} gameName - The game type (the `name` field in `Game`).
+   * @param {string} numPlayers - The number of players.
+   * @param {string} server - The game server in the form of 'hostname:port'. Defaults to the server serving the client if not provided.
+   */
+  constructor({ socket, socketOpts, server, ...opts }: SocketIOTransportOpts) {
+    super(opts);
+
+    this.server = server;
+    this.socket = socket;
+    this.socketOpts = socketOpts;
+  }
+
+  sendAction(state: State, action: CredentialedActionShape.Any): void {
+    const args: Parameters<Master['onUpdate']> = [
+      action,
+      state._stateID,
+      this.matchID,
+      this.playerID,
+    ];
+    this.socket.emit('update', ...args);
+  }
+
+  sendChatMessage(matchID: string, chatMessage: ChatMessage): void {
+    const args: Parameters<Master['onChatMessage']> = [
+      matchID,
+      chatMessage,
+      this.credentials,
+    ];
+    this.socket.emit('chat', ...args);
+  }
+
+  connect(): void {
+    if (!this.socket) {
+      if (this.server) {
+        let server = this.server;
+        if (server.search(/^https?:\/\//) == -1) {
+          server = 'http://' + this.server;
+        }
+        if (server.slice(-1) != '/') {
+          // add trailing slash if not already present
+          server = server + '/';
+        }
+        this.socket = io(server + this.gameName, this.socketOpts);
+      } else {
+        this.socket = io('/' + this.gameName, this.socketOpts);
+      }
+    }
+
+    // Called when another player makes a move and the
+    // master broadcasts the update as a patch to other clients (including
+    // this one).
+    this.socket.on(
+      'patch',
+      (
+        matchID: string,
+        prevStateID: number,
+        stateID: number,
+        patch: Operation[],
+        deltalog: LogEntry[]
+      ) => {
+        this.notifyClient({
+          type: 'patch',
+          args: [matchID, prevStateID, stateID, patch, deltalog],
+        });
+      }
+    );
+
+    // Called when another player makes a move and the
+    // master broadcasts the update to other clients (including
+    // this one).
+    this.socket.on(
+      'update',
+      (matchID: string, state: State, deltalog: LogEntry[]) => {
+        this.notifyClient({
+          type: 'update',
+          args: [matchID, state, deltalog],
+        });
+      }
+    );
+
+    // Called when the client first connects to the master
+    // and requests the current game state.
+    this.socket.on('sync', (matchID: string, syncInfo: SyncInfo) => {
+      this.notifyClient({ type: 'sync', args: [matchID, syncInfo] });
+    });
+
+    // Called when new player joins the match or changes
+    // it's connection status
+    this.socket.on(
+      'matchData',
+      (matchID: string, matchData: FilteredMetadata) => {
+        this.notifyClient({ type: 'matchData', args: [matchID, matchData] });
+      }
+    );
+
+    this.socket.on('chat', (matchID: string, chatMessage: ChatMessage) => {
+      this.notifyClient({ type: 'chat', args: [matchID, chatMessage] });
+    });
+
+    // Keep track of connection status.
+    this.socket.on('connect', () => {
+      // Initial sync to get game state.
+      this.requestSync();
+      this.setConnectionStatus(true);
+    });
+    this.socket.on('disconnect', () => {
+      this.setConnectionStatus(false);
+    });
+  }
+
+  disconnect(): void {
+    this.socket.close();
+    this.socket = null;
+    this.setConnectionStatus(false);
+  }
+
+  requestSync(): void {
+    if (this.socket) {
+      const args: Parameters<Master['onSync']> = [
+        this.matchID,
+        this.playerID,
+        this.credentials,
+        this.numPlayers,
+      ];
+      this.socket.emit('sync', ...args);
+    }
+  }
+
+  updateMatchID(id: string): void {
+    this.matchID = id;
+    this.requestSync();
+  }
+
+  updatePlayerID(id: PlayerID): void {
+    this.playerID = id;
+    this.requestSync();
+  }
+
+  updateCredentials(credentials?: string): void {
+    this.credentials = credentials;
+    this.requestSync();
+  }
+}
+
+export function SocketIO({ server, socketOpts }: SocketIOOpts = {}) {
+  return (transportOpts: SocketIOTransportOpts) =>
+    new SocketIOTransport({
+      server,
+      socketOpts,
+      ...transportOpts,
+    });
+}

package/src/client/transport/transport.test.ts

@@ -0,0 +1,27 @@
+import { Transport } from './transport';
+import { ProcessGameConfig } from '../../core/game';
+
+describe('Transport', () => {
+  class SimpleTransport extends Transport {
+    connect() {}
+    disconnect() {}
+    sendAction() {}
+    sendChatMessage() {}
+    requestSync() {}
+    updateMatchID() {}
+    updatePlayerID() {}
+    updateCredentials() {}
+    get(key: 'connectionStatusCallback') {
+      return this[key].bind(this);
+    }
+  }
+
+  test('base class sets up callbacks', () => {
+    const transport = new SimpleTransport({
+      transportDataCallback: () => {},
+      game: ProcessGameConfig({}),
+      gameKey: {},
+    });
+    expect(transport.get('connectionStatusCallback')()).toBeUndefined();
+  });
+});

package/src/client/transport/transport.ts

@@ -0,0 +1,95 @@
+/*
+ * Copyright 2017 The boardgame.io Authors
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import type { ProcessGameConfig } from '../../core/game';
+import type { TransportData } from '../../master/master';
+import type {
+  Game,
+  PlayerID,
+  CredentialedActionShape,
+  State,
+  SyncInfo,
+  ChatMessage,
+} from '../../types';
+
+export type MetadataCallback = (metadata: SyncInfo['filteredMetadata']) => void;
+
+export type ChatCallback = (message: ChatMessage) => void;
+
+export interface TransportOpts {
+  transportDataCallback: (data: TransportData) => void;
+  gameName?: string;
+  gameKey: Game;
+  game: ReturnType<typeof ProcessGameConfig>;
+  playerID?: PlayerID;
+  matchID?: string;
+  credentials?: string;
+  numPlayers?: number;
+}
+
+export abstract class Transport {
+  protected gameName: string;
+  protected playerID: PlayerID | null;
+  protected matchID: string;
+  protected credentials?: string;
+  protected numPlayers: number;
+  /** Callback to pass transport data back to the client. */
+  private transportDataCallback: (data: TransportData) => void;
+  /** Callback to let the client know when the connection status has changed. */
+  private connectionStatusCallback: () => void = () => {};
+  isConnected = false;
+
+  constructor({
+    transportDataCallback,
+    gameName,
+    playerID,
+    matchID,
+    credentials,
+    numPlayers,
+  }: TransportOpts) {
+    this.transportDataCallback = transportDataCallback;
+    this.gameName = gameName || 'default';
+    this.playerID = playerID || null;
+    this.matchID = matchID || 'default';
+    this.credentials = credentials;
+    this.numPlayers = numPlayers || 2;
+  }
+
+  /** Subscribe to connection state changes. */
+  subscribeToConnectionStatus(fn: () => void): void {
+    this.connectionStatusCallback = fn;
+  }
+
+  /** Transport implementations should call this when they connect/disconnect. */
+  protected setConnectionStatus(isConnected: boolean): void {
+    this.isConnected = isConnected;
+    this.connectionStatusCallback();
+  }
+
+  /** Transport implementations should call this when they receive data from a master. */
+  protected notifyClient(data: TransportData): void {
+    this.transportDataCallback(data);
+  }
+
+  /** Called by the client to connect the transport. */
+  abstract connect(): void;
+  /** Called by the client to disconnect the transport. */
+  abstract disconnect(): void;
+  /** Called by the client to dispatch an action via the transport. */
+  abstract sendAction(state: State, action: CredentialedActionShape.Any): void;
+  /** Called by the client to dispatch a chat message via the transport. */
+  abstract sendChatMessage(matchID: string, chatMessage: ChatMessage): void;
+  /** Called by the client to request a sync action from the transport. */
+  abstract requestSync(): void;
+  /** Called by the client to update the matchID it wants to connect to. */
+  abstract updateMatchID(id: string): void;
+  /** Called by the client to update the playerID it is playing as. */
+  abstract updatePlayerID(id: PlayerID): void;
+  /** Called by the client to update the credentials it is using. */
+  abstract updateCredentials(credentials?: string): void;
+}