Chat messages (#871)

* Add chat message functionality

* Add chat to chess example.

* Only set chat functions when transport supports it

* Add id to chat messages using shortid

* Add tests for chat functionality

* Update with changes to auth system

* Changed type from chat-message to just chat

Author: tomasvidhall

examples/react-web/src/chess/board.js

@@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
 import { Chess } from 'chess.js';
 import { Checkerboard, cartesianToAlgebraic } from './checkerboard';
 import { Token } from './token';
+import Chat from './chat';
 import Bishop from './pieces/bishop';
 import King from './pieces/king';
 import Knight from './pieces/knight';
@@ -31,6 +32,8 @@ class Board extends React.Component {
     isActive: PropTypes.bool,
     isMultiplayer: PropTypes.bool,
     isConnected: PropTypes.bool,
+    sendChatMessage: PropTypes.func,
+    chatMessages: PropTypes.array,
   };
 
   constructor(props) {
@@ -64,6 +67,12 @@ class Board extends React.Component {
 
         {this._getStatus()}
         {disconnected}
+        {this.props.sendChatMessage && this.props.chatMessages && (
+          <Chat
+            onSend={this.props.sendChatMessage}
+            messages={this.props.chatMessages}
+          />
+        )}
       </div>
     );
   }

examples/react-web/src/chess/chat.js

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+
+const Chat = ({ onSend, messages }) => {
+  const [message, setMessage] = useState('');
+
+  const onChange = event => {
+    setMessage(event.target.value);
+  };
+
+  const triggerSend = () => {
+    onSend(message);
+    setMessage('');
+  };
+
+  return (
+    <div>
+      <div
+        style={{
+          height: 200,
+          maxWidth: 400,
+          overflow: 'scroll',
+          border: '1px solid black',
+        }}
+      >
+        {messages.map(message => (
+          <div key={message.id}>
+            <div>{message.sender}</div>
+            <div>{JSON.stringify(message.payload)}</div>
+          </div>
+        ))}
+      </div>
+      <input onChange={onChange} value={message} />
+      <button onClick={triggerSend}>Send</button>
+    </div>
+  );
+};
+
+export default Chat;

src/client/client.test.ts

@@ -164,6 +164,21 @@ describe('multiplayer', () => {
       client.moves.A();
       expect(client.transport.onAction).toHaveBeenCalled();
     });
+
+    test('Sends and receives chat messages', () => {
+      const fn = jest.fn();
+      jest.spyOn(client.transport, 'onAction');
+      client.updatePlayerID('0');
+      client.updateMatchID('matchID');
+      jest.spyOn(client.transport, 'onChatMessage');
+
+      client.sendChatMessage({ message: 'foo' });
+
+      expect(client.transport.onChatMessage).toHaveBeenCalledWith(
+        'matchID',
+        expect.objectContaining({ payload: { message: 'foo' }, sender: '0' })
+      );
+    });
   });
 
   describe('multiplayer: SocketIO()', () => {
@@ -232,6 +247,25 @@ describe('multiplayer', () => {
 
       expect(client0.getState().G).toEqual({ A: '1' });
       expect(client1.getState().G).toEqual({ A: '1' });
+
+      client0.sendChatMessage({ message: 'foo' });
+
+      expect(client0.chatMessages).toEqual([
+        expect.objectContaining({ sender: '0', payload: { message: 'foo' } }),
+      ]);
+      expect(client1.chatMessages).toEqual([
+        expect.objectContaining({ sender: '0', payload: { message: 'foo' } }),
+      ]);
+
+      client1.sendChatMessage({ message: 'bar' });
+      expect(client0.chatMessages).toEqual([
+        expect.objectContaining({ sender: '0', payload: { message: 'foo' } }),
+        expect.objectContaining({ sender: '1', payload: { message: 'bar' } }),
+      ]);
+      expect(client1.chatMessages).toEqual([
+        expect.objectContaining({ sender: '0', payload: { message: 'foo' } }),
+        expect.objectContaining({ sender: '1', payload: { message: 'bar' } }),
+      ]);
     });
   });
 

src/client/client.ts

@@ -6,6 +6,7 @@
  * https://opensource.org/licenses/MIT.
  */
 
+import shortid from 'shortid';
 import 'svelte';
 import {
   Dispatch,
@@ -35,6 +36,7 @@ import {
   State,
   Store,
   Ctx,
+  ChatMessage,
 } from '../types';
 
 type ClientAction = ActionShape.Reset | ActionShape.Sync | ActionShape.Update;
@@ -160,6 +162,8 @@ export class _ClientImpl<G extends any = any> {
   reset: () => void;
   undo: () => void;
   redo: () => void;
+  sendChatMessage: (message: ChatMessage) => void;
+  chatMessages: ChatMessage[];
 
   constructor({
     game,
@@ -322,6 +326,7 @@ export class _ClientImpl<G extends any = any> {
       onAction: () => {},
       subscribe: () => {},
       subscribeMatchData: () => {},
+      subscribeChatMessage: () => {},
       connect: () => {},
       disconnect: () => {},
       updateMatchID: () => {},
@@ -348,6 +353,21 @@ export class _ClientImpl<G extends any = any> {
       this.matchData = metadata;
       this.notifySubscribers();
     });
+
+    if (this.transport.onChatMessage) {
+      this.chatMessages = [];
+      this.sendChatMessage = payload => {
+        this.transport.onChatMessage(this.matchID, {
+          id: shortid(),
+          sender: this.playerID,
+          payload: payload,
+        });
+      };
+      this.transport.subscribeChatMessage(message => {
+        this.chatMessages = [...this.chatMessages, message];
+        this.notifySubscribers();
+      });
+    }
   }
 
   private notifySubscribers() {

src/client/react-native.js

@@ -112,6 +112,8 @@ export function Client(opts) {
           undo: this.client.undo,
           redo: this.client.redo,
           matchData: this.client.matchData,
+          sendChatMessage: this.client.sendChatMessage,
+          chatMessages: this.client.chatMessages,
         });
       }
 

src/client/react.tsx

@@ -33,6 +33,7 @@ type ExposedClientProps<G extends any = any> = Pick<
   | 'playerID'
   | 'matchID'
   | 'matchData'
+  | 'sendChatMessage'
 >;
 
 export type BoardProps<G extends any = any> = ClientState<G> &
@@ -180,6 +181,8 @@ export function Client<
           redo: this.client.redo,
           log: this.client.log,
           matchData: this.client.matchData,
+          sendChatMessage: this.client.sendChatMessage,
+          chatMessages: this.client.chatMessages
         });
       }
 

src/client/transport/local.test.ts

@@ -303,6 +303,7 @@ describe('LocalTransport', () => {
     const master = ({
       onSync: jest.fn(),
       onUpdate: jest.fn(),
+      onChatMessage: jest.fn(),
     } as unknown) as LocalMaster;
     class WrappedLocalTransport extends LocalTransport {
       setStore(store: Store) {
@@ -358,5 +359,12 @@ describe('LocalTransport', () => {
         null
       );
     });
+
+    test('send chat-message', () => {
+      m.onChatMessage('matchID', { message: 'foo' });
+      expect(m.master.onChatMessage).lastCalledWith('matchID', {
+        message: 'foo',
+      });
+    });
   });
 });

src/client/transport/local.ts

@@ -10,7 +10,7 @@ import * as ActionCreators from '../../core/action-creators';
 import { InMemory } from '../../server/db/inmemory';
 import { LocalStorage } from '../../server/db/localstorage';
 import { Master, TransportAPI } from '../../master/master';
-import { Transport, TransportOpts } from './transport';
+import { Transport, TransportOpts, ChatCallback } from './transport';
 import {
   CredentialedActionShape,
   Game,
@@ -136,6 +136,7 @@ type LocalTransportOpts = TransportOpts & {
  */
 export class LocalTransport extends Transport {
   master: LocalMaster;
+  chatMessageCallback: ChatCallback;
 
   /**
    * Creates a new Mutiplayer instance.
@@ -158,6 +159,10 @@ export class LocalTransport extends Transport {
     this.isConnected = true;
   }
 
+  onChatMessage(matchID, chatMessage) {
+    this.master.onChatMessage(matchID, chatMessage);
+  }
+
   /**
    * Called when another player makes a move and the
    * master broadcasts the update to other clients (including
@@ -202,6 +207,10 @@ export class LocalTransport extends Transport {
       if (type == 'update') {
         this.onUpdate.apply(this, args);
       }
+      if (type == 'chat') {
+        const [matchID, message] = args;
+        this.chatMessageCallback.apply(this, [message]);
+      }
     });
     this.master.onSync(
       this.matchID,
@@ -223,6 +232,10 @@ export class LocalTransport extends Transport {
 
   subscribeMatchData() {}
 
+  subscribeChatMessage(fn: ChatCallback) {
+    this.chatMessageCallback = fn;
+  }
+
   /**
    * Dispatches a reset action, then requests a fresh sync from the master.
    */

src/client/transport/socketio.test.ts

@@ -192,6 +192,23 @@ describe('multiplayer', () => {
     const args: UpdateArgs = [action, state._stateID, 'default', null];
     expect(mockSocket.emit).lastCalledWith('update', ...args);
   });
+
+  test('receive chat-message', () => {
+    let receivedChatData;
+    m.subscribeChatMessage(data => (receivedChatData = data));
+    const chatData = { message: 'foo' };
+    mockSocket.receive('chat', 'unknown matchID', chatData);
+    expect(receivedChatData).toBe(undefined);
+    mockSocket.receive('chat', 'default', chatData);
+    expect(receivedChatData).toMatchObject(receivedChatData);
+  });
+
+  test('send chat-message', () => {
+    m.onChatMessage('matchID', { message: 'foo' });
+    expect(mockSocket.emit).lastCalledWith('chat', 'matchID', {
+      message: 'foo',
+    });
+  });
 });
 
 describe('server option', () => {

src/client/transport/socketio.ts

@@ -11,14 +11,20 @@ const io = ioNamespace.default;
 
 import * as ActionCreators from '../../core/action-creators';
 import { Master } from '../../master/master';
-import { Transport, TransportOpts, MetadataCallback } from './transport';
+import {
+  Transport,
+  TransportOpts,
+  MetadataCallback,
+  ChatCallback,
+} from './transport';
 import {
   CredentialedActionShape,
   FilteredMetadata,
   LogEntry,
   PlayerID,
   State,
   SyncInfo,
+  ChatMessage,
 } from '../../types';
 
 interface SocketIOOpts {
@@ -42,6 +48,7 @@ export class SocketIOTransport extends Transport {
   socketOpts: SocketIOClient.ConnectOpts;
   callback: () => void;
   matchDataCallback: MetadataCallback;
+  chatMessageCallback: ChatCallback;
 
   /**
    * Creates a new Mutiplayer instance.
@@ -72,6 +79,7 @@ export class SocketIOTransport extends Transport {
     this.isConnected = false;
     this.callback = () => {};
     this.matchDataCallback = () => {};
+    this.chatMessageCallback = () => {};
   }
 
   /**
@@ -88,6 +96,10 @@ export class SocketIOTransport extends Transport {
     this.socket.emit('update', ...args);
   }
 
+  onChatMessage(matchID, chatMessage) {
+    this.socket.emit('chat', matchID, chatMessage);
+  }
+
   /**
    * Connect to the server.
    */
@@ -147,6 +159,12 @@ export class SocketIOTransport extends Transport {
       }
     );
 
+    this.socket.on('chat', (matchID: string, chatMessage: ChatMessage) => {
+      if (matchID === this.matchID) {
+        this.chatMessageCallback(chatMessage);
+      }
+    });
+
     // Keep track of connection status.
     this.socket.on('connect', () => {
       // Initial sync to get game state.
@@ -181,6 +199,10 @@ export class SocketIOTransport extends Transport {
     this.matchDataCallback = fn;
   }
 
+  subscribeChatMessage(fn: ChatCallback) {
+    this.chatMessageCallback = fn;
+  }
+
   /**
    * Send a “sync” event to the server.
    */