Browse Source

Migrating userId to "int32" to save some space and adding userMoves message in protobuf

pull/280/head
David Négrier 2 years ago
parent
commit
e9ca8721a6
  1. 8
      back/src/Controller/AuthenticateController.ts
  2. 141
      back/src/Controller/IoSocketController.ts
  3. 9
      back/src/Model/Group.ts
  4. 2
      back/src/Model/User.ts
  5. 3
      back/src/Model/Websocket/ExSocketInterface.ts
  6. 2
      back/src/Model/Websocket/GroupUpdateInterface.ts
  7. 2
      back/src/Model/Websocket/Identificable.ts
  8. 2
      back/src/Model/Websocket/MessageUserJoined.ts
  9. 2
      back/src/Model/Websocket/MessageUserMoved.ts
  10. 2
      back/src/Model/Websocket/MessageUserPosition.ts
  11. 2
      back/src/Model/Websocket/UserInGroupInterface.ts
  12. 11
      back/src/Model/Websocket/UserMovesMessage.ts
  13. 4
      back/src/Model/Websocket/WebRtcSignalMessage.ts
  14. 10
      back/src/Model/World.ts
  15. 8
      back/tests/PositionNotifierTest.ts
  16. 38
      back/tests/WorldTest.ts
  17. 10
      docker-compose.yaml
  18. 72
      front/src/Connection.ts
  19. 4
      front/src/Phaser/Entity/RemotePlayer.ts
  20. 2
      front/src/Phaser/Game/AddPlayerInterface.ts
  21. 16
      front/src/Phaser/Game/GameScene.ts
  22. 12
      front/src/Phaser/Game/PlayersPositionInterpolator.ts
  23. 30
      front/src/WebRtc/MediaManager.ts
  24. 12
      front/src/WebRtc/ScreenSharingPeer.ts
  25. 30
      front/src/WebRtc/SimplePeer.ts
  26. 10
      front/src/WebRtc/VideoPeer.ts
  27. 3
      messages/generated/.gitignore
  28. 31
      messages/generated/src/proto/messages_pb.d.ts
  29. 223
      messages/generated/src/proto/messages_pb.js
  30. 35
      messages/messages.proto
  31. 4
      messages/package.json

8
back/src/Controller/AuthenticateController.ts

@ -6,7 +6,7 @@ import { uuid } from 'uuidv4';
export interface TokenInterface {
name: string,
userId: string
userUuid: string
}
export class AuthenticateController {
@ -28,12 +28,12 @@ export class AuthenticateController {
});
}*/
//TODO check user email for The Coding Machine game
const userId = uuid();
const token = Jwt.sign({name: param.name, userId: userId} as TokenInterface, SECRET_KEY, {expiresIn: '24h'});
const userUuid = uuid();
const token = Jwt.sign({name: param.name, userUuid: userUuid} as TokenInterface, SECRET_KEY, {expiresIn: '24h'});
return res.status(OK).send({
token: token,
mapUrlStart: URL_ROOM_STARTED,
userId: userId,
userId: userUuid,
});
});
}

141
back/src/Controller/IoSocketController.ts

@ -20,13 +20,14 @@ import {isWebRtcSignalMessageInterface} from "../Model/Websocket/WebRtcSignalMes
import {UserInGroupInterface} from "../Model/Websocket/UserInGroupInterface";
import {isItemEventMessageInterface} from "../Model/Websocket/ItemEventMessage";
import {uuid} from 'uuidv4';
import {isUserMovesInterface} from "../Model/Websocket/UserMovesMessage";
import {isViewport} from "../Model/Websocket/ViewportMessage";
import {GroupUpdateInterface} from "_Model/Websocket/GroupUpdateInterface";
import {Movable} from "../Model/Movable";
import {SetPlayerDetailsMessage} from "../../../messages/generated/src/proto/messages_pb";
import {PositionMessage, SetPlayerDetailsMessage} from "../../../messages/generated/messages_pb";
import {UserMovesMessage} from "../../../messages/generated/messages_pb";
import Direction = PositionMessage.Direction;
enum SockerIoEvent {
enum SocketIoEvent {
CONNECTION = "connection",
DISCONNECT = "disconnect",
JOIN_ROOM = "join-room", // bi-directional
@ -52,7 +53,7 @@ function emitInBatch(socket: ExSocketInterface, event: string | symbol, payload:
if (socket.batchTimeout === null) {
socket.batchTimeout = setTimeout(() => {
socket.emit(SockerIoEvent.BATCH, socket.batchedMessages);
socket.emit(SocketIoEvent.BATCH, socket.batchedMessages);
socket.batchedMessages = [];
socket.batchTimeout = null;
}, 100);
@ -62,9 +63,10 @@ function emitInBatch(socket: ExSocketInterface, event: string | symbol, payload:
export class IoSocketController {
public readonly Io: socketIO.Server;
private Worlds: Map<string, World> = new Map<string, World>();
private sockets: Map<string, ExSocketInterface> = new Map<string, ExSocketInterface>();
private sockets: Map<number, ExSocketInterface> = new Map<number, ExSocketInterface>();
private nbClientsGauge: Gauge<string>;
private nbClientsPerRoomGauge: Gauge<string>;
private nextUserId: number = 1;
constructor(server: http.Server) {
this.Io = socketIO(server);
@ -90,7 +92,9 @@ export class IoSocketController {
if(socket.handshake.query.token === 'test'){
if (ALLOW_ARTILLERY) {
(socket as ExSocketInterface).token = socket.handshake.query.token;
(socket as ExSocketInterface).userId = uuid();
(socket as ExSocketInterface).userId = this.nextUserId;
(socket as ExSocketInterface).userUuid = uuid();
this.nextUserId++;
(socket as ExSocketInterface).isArtillery = true;
console.log((socket as ExSocketInterface).userId);
next();
@ -116,7 +120,9 @@ export class IoSocketController {
}
(socket as ExSocketInterface).token = socket.handshake.query.token;
(socket as ExSocketInterface).userId = tokenDecoded.userId;
(socket as ExSocketInterface).userId = this.nextUserId;
(socket as ExSocketInterface).userUuid = tokenDecoded.userUuid;
this.nextUserId++;
next();
});
});
@ -125,7 +131,7 @@ export class IoSocketController {
}
private isValidToken(token: object): token is TokenInterface {
if (typeof((token as TokenInterface).userId) !== 'string') {
if (typeof((token as TokenInterface).userUuid) !== 'string') {
return false;
}
if (typeof((token as TokenInterface).name) !== 'string') {
@ -151,7 +157,7 @@ export class IoSocketController {
}
ioConnection() {
this.Io.on(SockerIoEvent.CONNECTION, (socket: Socket) => {
this.Io.on(SocketIoEvent.CONNECTION, (socket: Socket) => {
const client : ExSocketInterface = socket as ExSocketInterface;
client.batchedMessages = [];
client.batchTimeout = null;
@ -176,11 +182,11 @@ export class IoSocketController {
x: user x position on map
y: user y position on map
*/
socket.on(SockerIoEvent.JOIN_ROOM, (message: unknown, answerFn): void => {
console.log(SockerIoEvent.JOIN_ROOM, message);
socket.on(SocketIoEvent.JOIN_ROOM, (message: unknown, answerFn): void => {
console.log(SocketIoEvent.JOIN_ROOM, message);
try {
if (!isJoinRoomMessageInterface(message)) {
socket.emit(SockerIoEvent.MESSAGE_ERROR, {message: 'Invalid JOIN_ROOM message.'});
socket.emit(SocketIoEvent.MESSAGE_ERROR, {message: 'Invalid JOIN_ROOM message.'});
console.warn('Invalid JOIN_ROOM message received: ', message);
return;
}
@ -244,11 +250,11 @@ export class IoSocketController {
}
});
socket.on(SockerIoEvent.SET_VIEWPORT, (message: unknown): void => {
socket.on(SocketIoEvent.SET_VIEWPORT, (message: unknown): void => {
try {
//console.log('SET_VIEWPORT')
if (!isViewport(message)) {
socket.emit(SockerIoEvent.MESSAGE_ERROR, {message: 'Invalid SET_VIEWPORT message.'});
socket.emit(SocketIoEvent.MESSAGE_ERROR, {message: 'Invalid SET_VIEWPORT message.'});
console.warn('Invalid SET_VIEWPORT message received: ', message);
return;
}
@ -268,20 +274,47 @@ export class IoSocketController {
}
});
socket.on(SockerIoEvent.USER_POSITION, (userMovesMessage: unknown): void => {
socket.on(SocketIoEvent.USER_POSITION, (message: unknown): void => {
//console.log(SockerIoEvent.USER_POSITION, userMovesMessage);
try {
if (!isUserMovesInterface(userMovesMessage)) {
socket.emit(SockerIoEvent.MESSAGE_ERROR, {message: 'Invalid USER_POSITION message.'});
console.warn('Invalid USER_POSITION message received: ', userMovesMessage);
return;
const userMovesMessage = UserMovesMessage.deserializeBinary(new Uint8Array(message as ArrayBuffer));
const userMoves = userMovesMessage.toObject();
const position = userMoves.position;
if (position === undefined) {
throw new Error('Position not found in message');
}
const viewport = userMoves.viewport;
if (viewport === undefined) {
throw new Error('Viewport not found in message');
}
let direction: string;
switch (position.direction) {
case Direction.UP:
direction = 'up';
break;
case Direction.DOWN:
direction = 'down';
break;
case Direction.LEFT:
direction = 'left';
break;
case Direction.RIGHT:
direction = 'right';
break;
}
const Client = (socket as ExSocketInterface);
// sending to all clients in room except sender
Client.position = userMovesMessage.position;
Client.viewport = userMovesMessage.viewport;
Client.position = {
x: position.x,
y: position.y,
direction,
moving: position.moving,
};
Client.viewport = viewport;
// update position in the world
const world = this.Worlds.get(Client.roomId);
@ -297,15 +330,15 @@ export class IoSocketController {
}
});
socket.on(SockerIoEvent.WEBRTC_SIGNAL, (data: unknown) => {
socket.on(SocketIoEvent.WEBRTC_SIGNAL, (data: unknown) => {
this.emitVideo((socket as ExSocketInterface), data);
});
socket.on(SockerIoEvent.WEBRTC_SCREEN_SHARING_SIGNAL, (data: unknown) => {
socket.on(SocketIoEvent.WEBRTC_SCREEN_SHARING_SIGNAL, (data: unknown) => {
this.emitScreenSharing((socket as ExSocketInterface), data);
});
socket.on(SockerIoEvent.DISCONNECT, () => {
socket.on(SocketIoEvent.DISCONNECT, () => {
const Client = (socket as ExSocketInterface);
try {
//leave room
@ -335,16 +368,16 @@ export class IoSocketController {
});
// Let's send the user id to the user
socket.on(SockerIoEvent.SET_PLAYER_DETAILS, (message: any, answerFn) => {
console.log(SockerIoEvent.SET_PLAYER_DETAILS, message);
socket.on(SocketIoEvent.SET_PLAYER_DETAILS, (message: any, answerFn) => {
console.log(SocketIoEvent.SET_PLAYER_DETAILS, message);
const playerDetailsMessage = SetPlayerDetailsMessage.deserializeBinary(new Uint8Array(message));
const playerDetails = {
name: playerDetailsMessage.getName(),
characterLayers: playerDetailsMessage.getCharacterlayersList()
};
console.log(SockerIoEvent.SET_PLAYER_DETAILS, playerDetails);
console.log(SocketIoEvent.SET_PLAYER_DETAILS, playerDetails);
if (!isSetPlayerDetailsMessage(playerDetails)) {
socket.emit(SockerIoEvent.MESSAGE_ERROR, {message: 'Invalid SET_PLAYER_DETAILS message.'});
socket.emit(SocketIoEvent.MESSAGE_ERROR, {message: 'Invalid SET_PLAYER_DETAILS message.'});
console.warn('Invalid SET_PLAYER_DETAILS message received: ', playerDetails);
return;
}
@ -357,10 +390,10 @@ export class IoSocketController {
}
});
socket.on(SockerIoEvent.SET_SILENT, (silent: unknown) => {
console.log(SockerIoEvent.SET_SILENT, silent);
socket.on(SocketIoEvent.SET_SILENT, (silent: unknown) => {
console.log(SocketIoEvent.SET_SILENT, silent);
if (typeof silent !== "boolean") {
socket.emit(SockerIoEvent.MESSAGE_ERROR, {message: 'Invalid SET_SILENT message.'});
socket.emit(SocketIoEvent.MESSAGE_ERROR, {message: 'Invalid SET_SILENT message.'});
console.warn('Invalid SET_SILENT message received: ', silent);
return;
}
@ -381,16 +414,16 @@ export class IoSocketController {
}
});
socket.on(SockerIoEvent.ITEM_EVENT, (itemEvent: unknown) => {
socket.on(SocketIoEvent.ITEM_EVENT, (itemEvent: unknown) => {
if (!isItemEventMessageInterface(itemEvent)) {
socket.emit(SockerIoEvent.MESSAGE_ERROR, {message: 'Invalid ITEM_EVENT message.'});
socket.emit(SocketIoEvent.MESSAGE_ERROR, {message: 'Invalid ITEM_EVENT message.'});
console.warn('Invalid ITEM_EVENT message received: ', itemEvent);
return;
}
try {
const Client = (socket as ExSocketInterface);
socket.to(Client.roomId).emit(SockerIoEvent.ITEM_EVENT, itemEvent);
socket.to(Client.roomId).emit(SocketIoEvent.ITEM_EVENT, itemEvent);
const world = this.Worlds.get(Client.roomId);
if (!world) {
@ -408,7 +441,7 @@ export class IoSocketController {
emitVideo(socket: ExSocketInterface, data: unknown){
if (!isWebRtcSignalMessageInterface(data)) {
socket.emit(SockerIoEvent.MESSAGE_ERROR, {message: 'Invalid WEBRTC_SIGNAL message.'});
socket.emit(SocketIoEvent.MESSAGE_ERROR, {message: 'Invalid WEBRTC_SIGNAL message.'});
console.warn('Invalid WEBRTC_SIGNAL message received: ', data);
return;
}
@ -418,7 +451,7 @@ export class IoSocketController {
console.warn("While exchanging a WebRTC signal: client with id ", data.receiverId, " does not exist. This might be a race condition.");
return;
}
return client.emit(SockerIoEvent.WEBRTC_SIGNAL, {
return client.emit(SocketIoEvent.WEBRTC_SIGNAL, {
userId: socket.userId,
signal: data.signal
});
@ -426,7 +459,7 @@ export class IoSocketController {
emitScreenSharing(socket: ExSocketInterface, data: unknown){
if (!isWebRtcSignalMessageInterface(data)) {
socket.emit(SockerIoEvent.MESSAGE_ERROR, {message: 'Invalid WEBRTC_SCREEN_SHARING message.'});
socket.emit(SocketIoEvent.MESSAGE_ERROR, {message: 'Invalid WEBRTC_SCREEN_SHARING message.'});
console.warn('Invalid WEBRTC_SCREEN_SHARING message received: ', data);
return;
}
@ -436,13 +469,13 @@ export class IoSocketController {
console.warn("While exchanging a WEBRTC_SCREEN_SHARING signal: client with id ", data.receiverId, " does not exist. This might be a race condition.");
return;
}
return client.emit(SockerIoEvent.WEBRTC_SCREEN_SHARING_SIGNAL, {
return client.emit(SocketIoEvent.WEBRTC_SCREEN_SHARING_SIGNAL, {
userId: socket.userId,
signal: data.signal
});
}
searchClientByIdOrFail(userId: string): ExSocketInterface {
searchClientByIdOrFail(userId: number): ExSocketInterface {
const client: ExSocketInterface|undefined = this.sockets.get(userId);
if (client === undefined) {
throw new Error("Could not find user with id " + userId);
@ -481,9 +514,9 @@ export class IoSocketController {
//check and create new world for a room
let world = this.Worlds.get(roomId)
if(world === undefined){
world = new World((user1: string, group: Group) => {
world = new World((user1: number, group: Group) => {
this.connectedUser(user1, group);
}, (user1: string, group: Group) => {
}, (user1: number, group: Group) => {
this.disConnectedUser(user1, group);
}, MINIMUM_DISTANCE, GROUP_RADIUS, (thing: Movable, listener: User) => {
const clientListener = this.searchClientByIdOrFail(listener.id);
@ -491,9 +524,9 @@ export class IoSocketController {
const clientUser = this.searchClientByIdOrFail(thing.id);
const messageUserJoined = new MessageUserJoined(clientUser.userId, clientUser.name, clientUser.characterLayers, clientUser.position);
clientListener.emit(SockerIoEvent.JOIN_ROOM, messageUserJoined);
clientListener.emit(SocketIoEvent.JOIN_ROOM, messageUserJoined);
} else if (thing instanceof Group) {
clientListener.emit(SockerIoEvent.GROUP_CREATE_UPDATE, {
clientListener.emit(SocketIoEvent.GROUP_CREATE_UPDATE, {
position: thing.getPosition(),
groupId: thing.getId()
} as GroupUpdateInterface);
@ -505,10 +538,10 @@ export class IoSocketController {
if (thing instanceof User) {
const clientUser = this.searchClientByIdOrFail(thing.id);
clientListener.emitInBatch(SockerIoEvent.USER_MOVED, new MessageUserMoved(clientUser.userId, clientUser.position));
clientListener.emitInBatch(SocketIoEvent.USER_MOVED, new MessageUserMoved(clientUser.userId, clientUser.position));
//console.log("Sending USER_MOVED event");
} else if (thing instanceof Group) {
clientListener.emit(SockerIoEvent.GROUP_CREATE_UPDATE, {
clientListener.emit(SocketIoEvent.GROUP_CREATE_UPDATE, {
position: thing.getPosition(),
groupId: thing.getId()
} as GroupUpdateInterface);
@ -519,10 +552,10 @@ export class IoSocketController {
const clientListener = this.searchClientByIdOrFail(listener.id);
if (thing instanceof User) {
const clientUser = this.searchClientByIdOrFail(thing.id);
clientListener.emit(SockerIoEvent.USER_LEFT, clientUser.userId);
clientListener.emit(SocketIoEvent.USER_LEFT, clientUser.userId);
//console.log("Sending USER_LEFT event");
} else if (thing instanceof Group) {
clientListener.emit(SockerIoEvent.GROUP_DELETE, thing.getId());
clientListener.emit(SocketIoEvent.GROUP_DELETE, thing.getId());
} else {
console.error('Unexpected type for Movable.');
}
@ -533,7 +566,7 @@ export class IoSocketController {
// Dispatch groups position to newly connected user
world.getGroups().forEach((group: Group) => {
Client.emit(SockerIoEvent.GROUP_CREATE_UPDATE, {
Client.emit(SocketIoEvent.GROUP_CREATE_UPDATE, {
position: group.getPosition(),
groupId: group.getId()
} as GroupUpdateInterface);
@ -578,7 +611,7 @@ export class IoSocketController {
return tabs;
}, []);
client.emit(SockerIoEvent.WEBRTC_START, {clients: peerClients, roomId: roomId});
client.emit(SocketIoEvent.WEBRTC_START, {clients: peerClients, roomId: roomId});
});
}
@ -600,19 +633,19 @@ export class IoSocketController {
**/
//connected user
connectedUser(userId: string, group: Group) {
connectedUser(userId: number, group: Group) {
/*let Client = this.sockets.get(userId);
if (Client === undefined) {
return;
}*/
const Client = this.searchClientByIdOrFail(userId);
this.joinWebRtcRoom(Client, group.getId());
this.joinWebRtcRoom(Client, "webrtcroom"+group.getId());
}
//disconnect user
disConnectedUser(userId: string, group: Group) {
disConnectedUser(userId: number, group: Group) {
const Client = this.searchClientByIdOrFail(userId);
Client.to(group.getId()).emit(SockerIoEvent.WEBRTC_DISCONNECT, {
Client.to("webrtcroom"+group.getId()).emit(SocketIoEvent.WEBRTC_DISCONNECT, {
userId: userId
});
@ -622,7 +655,7 @@ export class IoSocketController {
// the other player will try connecting until a timeout happens (during this time, the connection icon will be displayed for nothing).
// So we also send the disconnect event to the other player.
for (const user of group.getUsers()) {
Client.emit(SockerIoEvent.WEBRTC_DISCONNECT, {
Client.emit(SocketIoEvent.WEBRTC_DISCONNECT, {
userId: user.id
});
}

9
back/src/Model/Group.ts

@ -7,7 +7,9 @@ import {Movable} from "_Model/Movable";
export class Group implements Movable {
static readonly MAX_PER_GROUP = 4;
private id: string;
private static nextId: number = 1;
private id: number;
private users: Set<User>;
private connectCallback: ConnectCallback;
private disconnectCallback: DisconnectCallback;
@ -17,7 +19,8 @@ export class Group implements Movable {
this.users = new Set<User>();
this.connectCallback = connectCallback;
this.disconnectCallback = disconnectCallback;
this.id = uuid();
this.id = Group.nextId;
Group.nextId++;
users.forEach((user: User) => {
this.join(user);
@ -28,7 +31,7 @@ export class Group implements Movable {
return Array.from(this.users.values());
}
getId() : string{
getId() : number {
return this.id;
}

2
back/src/Model/User.ts

@ -9,7 +9,7 @@ export class User implements Movable {
public group?: Group;
public constructor(
public id: string,
public id: number,
public position: PointInterface,
public silent: boolean,

3
back/src/Model/Websocket/ExSocketInterface.ts

@ -8,7 +8,8 @@ export interface ExSocketInterface extends Socket, Identificable {
token: string;
roomId: string;
webRtcRoomId: string;
userId: string;
userId: number; // A temporary (autoincremented) identifier for this user
userUuid: string; // A unique identifier for this user
name: string;
characterLayers: string[];
position: PointInterface;

2
back/src/Model/Websocket/GroupUpdateInterface.ts

@ -2,5 +2,5 @@ import {PositionInterface} from "_Model/PositionInterface";
export interface GroupUpdateInterface {
position: PositionInterface,
groupId: string,
groupId: number,
}

2
back/src/Model/Websocket/Identificable.ts

@ -1,3 +1,3 @@
export interface Identificable {
userId: string;
userId: number;
}

2
back/src/Model/Websocket/MessageUserJoined.ts

@ -1,6 +1,6 @@
import {PointInterface} from "_Model/Websocket/PointInterface";
export class MessageUserJoined {
constructor(public userId: string, public name: string, public characterLayers: string[], public position: PointInterface) {
constructor(public userId: number, public name: string, public characterLayers: string[], public position: PointInterface) {
}
}

2
back/src/Model/Websocket/MessageUserMoved.ts

@ -1,6 +1,6 @@
import {PointInterface} from "./PointInterface";
export class MessageUserMoved {
constructor(public userId: string, public position: PointInterface) {
constructor(public userId: number, public position: PointInterface) {
}
}

2
back/src/Model/Websocket/MessageUserPosition.ts

@ -6,6 +6,6 @@ export class Point implements PointInterface{
}
export class MessageUserPosition {
constructor(public userId: string, public name: string, public characterLayers: string[], public position: PointInterface) {
constructor(public userId: number, public name: string, public characterLayers: string[], public position: PointInterface) {
}
}

2
back/src/Model/Websocket/UserInGroupInterface.ts

@ -1,5 +1,5 @@
export interface UserInGroupInterface {
userId: string,
userId: number,
name: string,
initiator: boolean
}

11
back/src/Model/Websocket/UserMovesMessage.ts

@ -1,11 +0,0 @@
import * as tg from "generic-type-guard";
import {isPointInterface} from "./PointInterface";
import {isViewport} from "./ViewportMessage";
export const isUserMovesInterface =
new tg.IsInterface().withProperties({
position: isPointInterface,
viewport: isViewport,
}).get();
export type UserMovesInterface = tg.GuardedType<typeof isUserMovesInterface>;

4
back/src/Model/Websocket/WebRtcSignalMessage.ts

@ -7,12 +7,12 @@ export const isSignalData =
export const isWebRtcSignalMessageInterface =
new tg.IsInterface().withProperties({
receiverId: tg.isString,
receiverId: tg.isNumber,
signal: isSignalData
}).get();
export const isWebRtcScreenSharingStartMessageInterface =
new tg.IsInterface().withProperties({
userId: tg.isString,
userId: tg.isNumber,
roomId: tg.isString
}).get();
export type WebRtcSignalMessageInterface = tg.GuardedType<typeof isWebRtcSignalMessageInterface>;

10
back/src/Model/World.ts

@ -11,15 +11,15 @@ import {PositionNotifier} from "./PositionNotifier";
import {ViewportInterface} from "_Model/Websocket/ViewportMessage";
import {Movable} from "_Model/Movable";
export type ConnectCallback = (user: string, group: Group) => void;
export type DisconnectCallback = (user: string, group: Group) => void;
export type ConnectCallback = (user: number, group: Group) => void;
export type DisconnectCallback = (user: number, group: Group) => void;
export class World {
private readonly minDistance: number;
private readonly groupRadius: number;
// Users, sorted by ID
private readonly users: Map<string, User>;
private readonly users: Map<number, User>;
private readonly groups: Set<Group>;
private readonly connectCallback: ConnectCallback;
@ -37,7 +37,7 @@ export class World {
onMoves: MovesCallback,
onLeaves: LeavesCallback)
{
this.users = new Map<string, User>();
this.users = new Map<number, User>();
this.groups = new Set<Group>();
this.connectCallback = connectCallback;
this.disconnectCallback = disconnectCallback;
@ -51,7 +51,7 @@ export class World {
return Array.from(this.groups.values());
}
public getUsers(): Map<string, User> {
public getUsers(): Map<number, User> {
return this.users;
}

8
back/tests/PositionNotifierTest.ts

@ -32,14 +32,14 @@ describe("PositionNotifier", () => {
leaveTriggered = true;
});
const user1 = new User("1", {
const user1 = new User(1, {
x: 500,
y: 500,
moving: false,
direction: 'down'
}, false);
const user2 = new User("2", {
const user2 = new User(2, {
x: -9999,
y: -9999,
moving: false,
@ -110,14 +110,14 @@ describe("PositionNotifier", () => {
leaveTriggered = true;
});
const user1 = new User("1", {
const user1 = new User(1, {
x: 500,
y: 500,
moving: false,
direction: 'down'
}, false);
const user2 = new User("2", {
const user2 = new User(2, {
x: -9999,
y: -9999,
moving: false,

38
back/tests/WorldTest.ts

@ -6,55 +6,55 @@ import { Group } from "../src/Model/Group";
describe("World", () => {
it("should connect user1 and user2", () => {
let connectCalledNumber: number = 0;
const connect: ConnectCallback = (user: string, group: Group): void => {
const connect: ConnectCallback = (user: number, group: Group): void => {
connectCalledNumber++;
}
const disconnect: DisconnectCallback = (user: string, group: Group): void => {
const disconnect: DisconnectCallback = (user: number, group: Group): void => {
}
const world = new World(connect, disconnect, 160, 160, () => {}, () => {}, () => {});
world.join({ userId: "foo" }, new Point(100, 100));
world.join({ userId: 1 }, new Point(100, 100));
world.join({ userId: "bar" }, new Point(500, 100));
world.join({ userId: 2 }, new Point(500, 100));
world.updatePosition({ userId: "bar" }, new Point(261, 100));
world.updatePosition({ userId: 2 }, new Point(261, 100));
expect(connectCalledNumber).toBe(0);
world.updatePosition({ userId: "bar" }, new Point(101, 100));
world.updatePosition({ userId: 2 }, new Point(101, 100));
expect(connectCalledNumber).toBe(2);
world.updatePosition({ userId: "bar" }, new Point(102, 100));
world.updatePosition({ userId: 2 }, new Point(102, 100));
expect(connectCalledNumber).toBe(2);
});
it("should connect 3 users", () => {
let connectCalled: boolean = false;
const connect: ConnectCallback = (user: string, group: Group): void => {
const connect: ConnectCallback = (user: number, group: Group): void => {
connectCalled = true;
}
const disconnect: DisconnectCallback = (user: string, group: Group): void => {
const disconnect: DisconnectCallback = (user: number, group: Group): void => {
}
const world = new World(connect, disconnect, 160, 160, () => {}, () => {}, () => {});
world.join({ userId: "foo" }, new Point(100, 100));
world.join({ userId: 1 }, new Point(100, 100));
world.join({ userId: "bar" }, new Point(200, 100));
world.join({ userId: 2 }, new Point(200, 100));
expect(connectCalled).toBe(true);
connectCalled = false;
// baz joins at the outer limit of the group
world.join({ userId: "baz" }, new Point(311, 100));
world.join({ userId: 3 }, new Point(311, 100));
expect(connectCalled).toBe(false);
world.updatePosition({ userId: "baz" }, new Point(309, 100));
world.updatePosition({ userId: 3 }, new Point(309, 100));
expect(connectCalled).toBe(true);
});
@ -62,27 +62,27 @@ describe("World", () => {
it("should disconnect user1 and user2", () => {
let connectCalled: boolean = false;
let disconnectCallNumber: number = 0;
const connect: ConnectCallback = (user: string, group: Group): void => {
const connect: ConnectCallback = (user: number, group: Group): void => {
connectCalled = true;
}
const disconnect: DisconnectCallback = (user: string, group: Group): void => {
const disconnect: DisconnectCallback = (user: number, group: Group): void => {
disconnectCallNumber++;
}
const world = new World(connect, disconnect, 160, 160, () => {}, () => {}, () => {});
world.join({ userId: "foo" }, new Point(100, 100));
world.join({ userId: 1 }, new Point(100, 100));
world.join({ userId: "bar" }, new Point(259, 100));
world.join({ userId: 2 }, new Point(259, 100));
expect(connectCalled).toBe(true);
expect(disconnectCallNumber).toBe(0);
world.updatePosition({ userId: "bar" }, new Point(100+160+160+1, 100));
world.updatePosition({ userId: 2 }, new Point(100+160+160+1, 100));
expect(disconnectCallNumber).toBe(2);
world.updatePosition({ userId: "bar" }, new Point(262, 100));
world.updatePosition({ userId: 2 }, new Point(262, 100));
expect(disconnectCallNumber).toBe(2);
});

10
docker-compose.yaml

@ -67,7 +67,7 @@ services:
- "traefik.http.routers.maps-ssl.service=maps"
back:
image: thecodingmachine/workadventure-back-base:latest
image: thecodingmachine/nodejs:12
command: yarn dev
#command: yarn run profile
environment:
@ -103,3 +103,11 @@ services:
- "traefik.http.routers.website-ssl.entryPoints=websecure"
- "traefik.http.routers.website-ssl.tls=true"
- "traefik.http.routers.website-ssl.service=website"
messages:
image: thecodingmachine/workadventure-back-base:latest
environment:
STARTUP_COMMAND_1: yarn install
STARTUP_COMMAND_2: yarn run proto:watch
volumes:
- ./messages:/usr/src/app

72
front/src/Connection.ts

@ -1,13 +1,19 @@
import Axios from "axios";
import {API_URL} from "./Enum/EnvironmentVariable";
import {MessageUI} from "./Logger/MessageUI";
import {SetPlayerDetailsMessage} from "../../messages/generated/src/proto/messages_pb"
import {
PositionMessage,
SetPlayerDetailsMessage,
UserMovesMessage,
ViewportMessage
} from "../../messages/generated/messages_pb"
const SocketIo = require('socket.io-client');
import Socket = SocketIOClient.Socket;
import {PlayerAnimationNames} from "./Phaser/Player/Animation";
import {UserSimplePeerInterface} from "./WebRtc/SimplePeer";
import {SignalData} from "simple-peer";
import Direction = PositionMessage.Direction;
enum EventMessage{
WEBRTC_SIGNAL = "webrtc-signal",
@ -46,19 +52,19 @@ export class Point implements PointInterface{
}
export interface MessageUserPositionInterface {
userId: string;
userId: number;
name: string;
characterLayers: string[];
position: PointInterface;
}
export interface MessageUserMovedInterface {
userId: string;
userId: number;
position: PointInterface;
}
export interface MessageUserJoined {
userId: string;
userId: number;
name: string;
characterLayers: string[];
position: PointInterface
@ -80,16 +86,16 @@ export interface WebRtcStartMessageInterface {
}
export interface WebRtcDisconnectMessageInterface {
userId: string
userId: number
}
export interface WebRtcSignalSentMessageInterface {
receiverId: string,
receiverId: number,
signal: SignalData
}
export interface WebRtcSignalReceivedMessageInterface {
userId: string,
userId: number,
signal: SignalData
}
@ -105,11 +111,6 @@ export interface ViewportInterface {
bottom: number,
}
export interface UserMovesInterface {
position: PositionInterface,
viewport: ViewportInterface,
}
export interface BatchedMessageInterface {
event: string,
payload: unknown
@ -130,7 +131,7 @@ export interface RoomJoinedMessageInterface {
export class Connection implements Connection {
private readonly socket: Socket;
private userId: string|null = null;
private userId: number|null = null;
private constructor(token: string) {
@ -173,7 +174,7 @@ export class Connection implements Connection {
const message = new SetPlayerDetailsMessage();
message.setName(name);
message.setCharacterlayersList(characterLayersSelected);
connection.socket.emit(EventMessage.SET_PLAYER_DETAILS, message.serializeBinary().buffer, (id: string) => {
connection.socket.emit(EventMessage.SET_PLAYER_DETAILS, message.serializeBinary().buffer, (id: number) => {
connection.userId = id;
});
@ -214,7 +215,40 @@ export class Connection implements Connection {
return;
}
const point = new Point(x, y, direction, moving);
this.socket.emit(EventMessage.USER_POSITION, { position: point, viewport } as UserMovesInterface);
const positionMessage = new PositionMessage();
positionMessage.setX(Math.floor(x));
positionMessage.setY(Math.floor(y));
let directionEnum: PositionMessage.DirectionMap[keyof PositionMessage.DirectionMap];
switch (direction) {
case 'up':
directionEnum = Direction.UP;
break;
case 'down':
directionEnum = Direction.DOWN;
break;
case 'left':
directionEnum = Direction.LEFT;
break;
case 'right':
directionEnum = Direction.RIGHT;
break;
default:
throw new Error("Unexpected direction");
}
positionMessage.setDirection(directionEnum);
positionMessage.setMoving(moving);
const viewportMessage = new ViewportMessage();
viewportMessage.setLeft(Math.floor(viewport.left));
viewportMessage.setRight(Math.floor(viewport.right));
viewportMessage.setTop(Math.floor(viewport.top));
viewportMessage.setBottom(Math.floor(viewport.bottom));
const userMovesMessage = new UserMovesMessage();
userMovesMessage.setPosition(positionMessage);
userMovesMessage.setViewport(viewportMessage);
this.socket.emit(EventMessage.USER_POSITION, userMovesMessage.serializeBinary().buffer);
}
public setSilent(silent: boolean): void {
@ -233,7 +267,7 @@ export class Connection implements Connection {
this.socket.on(EventMessage.USER_MOVED, callback);
}
public onUserLeft(callback: (userId: string) => void): void {
public onUserLeft(callback: (userId: number) => void): void {
this.socket.on(EventMessage.USER_LEFT, callback);
}
@ -249,14 +283,14 @@ export class Connection implements Connection {
this.socket.on(EventMessage.CONNECT_ERROR, callback)
}
public sendWebrtcSignal(signal: unknown, receiverId : string) {
public sendWebrtcSignal(signal: unknown, receiverId: number) {
return this.socket.emit(EventMessage.WEBRTC_SIGNAL, {
receiverId: receiverId,
signal: signal
} as WebRtcSignalSentMessageInterface);
}
public sendWebrtcScreenSharingSignal(signal: unknown, receiverId : string) {
public sendWebrtcScreenSharingSignal(signal: unknown, receiverId: number) {
return this.socket.emit(EventMessage.WEBRTC_SCREEN_SHARING_SIGNAL, {
receiverId: receiverId,
signal: signal
@ -286,7 +320,7 @@ export class Connection implements Connection {
}
public getUserId(): string|null {
public getUserId(): number|null {
return this.userId;
}

4
front/src/Phaser/Entity/RemotePlayer.ts

@ -6,10 +6,10 @@ import {Character} from "../Entity/Character";
* Class representing the sprite of a remote player (a player that plays on another computer)
*/
export class RemotePlayer extends Character {
userId: string;
userId: number;
constructor(
userId: string,
userId: number,
Scene: GameScene,
x: number,
y: number,

2
front/src/Phaser/Game/AddPlayerInterface.ts

@ -1,7 +1,7 @@
import {PointInterface} from "../../Connection";
export interface AddPlayerInterface {
userId: string;
userId: number;
name: string;
characterLayers: string[];
position: PointInterface;

16
front/src/Phaser/Game/GameScene.ts

@ -63,7 +63,7 @@ interface AddPlayerEventInterface {
interface RemovePlayerEventInterface {
type: 'RemovePlayerEvent'
userId: string
userId: number
}
interface UserMovedEventInterface {
@ -86,7 +86,7 @@ export class GameScene extends Phaser.Scene implements CenterListener {
Terrains : Array<Phaser.Tilemaps.Tileset>;
CurrentPlayer!: CurrentGamerInterface;
MapPlayers!: Phaser.Physics.Arcade.Group;
MapPlayersByKey : Map<string, RemotePlayer> = new Map<string, RemotePlayer>();
MapPlayersByKey : Map<number, RemotePlayer> = new Map<number, RemotePlayer>();
Map!: Phaser.Tilemaps.Tilemap;
Layers!: Array<Phaser.Tilemaps.StaticTilemapLayer>;
Objects!: Array<Phaser.Physics.Arcade.Sprite>;
@ -217,7 +217,7 @@ export class GameScene extends Phaser.Scene implements CenterListener {
this.updatePlayerPosition(message);
});
connection.onUserLeft((userId: string) => {
connection.onUserLeft((userId: number) => {
this.removePlayer(userId);
});
@ -271,7 +271,7 @@ export class GameScene extends Phaser.Scene implements CenterListener {
self.presentationModeSprite.setVisible(true);
self.chatModeSprite.setVisible(true);
},
onDisconnect(userId: string) {
onDisconnect(userId: number) {
if (self.simplePeer.getNbConnections() === 0) {
self.presentationModeSprite.setVisible(false);
self.chatModeSprite.setVisible(false);
@ -918,7 +918,7 @@ export class GameScene extends Phaser.Scene implements CenterListener {
// Let's move all users
const updatedPlayersPositions = this.playersPositionInterpolator.getUpdatedPositions(time);
updatedPlayersPositions.forEach((moveEvent: HasMovedEvent, userId: string) => {
updatedPlayersPositions.forEach((moveEvent: HasMovedEvent, userId: number) => {
const player : RemotePlayer | undefined = this.MapPlayersByKey.get(userId);
if (player === undefined) {
throw new Error('Cannot find player with ID "' + userId +'"');
@ -973,7 +973,7 @@ export class GameScene extends Phaser.Scene implements CenterListener {
player.destroy();
this.MapPlayers.remove(player);
});
this.MapPlayersByKey = new Map<string, RemotePlayer>();
this.MapPlayersByKey = new Map<number, RemotePlayer>();
// load map
usersPosition.forEach((userPosition : MessageUserPositionInterface) => {
@ -1030,14 +1030,14 @@ export class GameScene extends Phaser.Scene implements CenterListener {
/**
* Called by the connexion when a player is removed from the map
*/
public removePlayer(userId: string) {
public removePlayer(userId: number) {
this.pendingEvents.enqueue({
type: "RemovePlayerEvent",
userId
});
}
private doRemovePlayer(userId: string) {
private doRemovePlayer(userId: number) {
const player = this.MapPlayersByKey.get(userId);
if (player === undefined) {
console.error('Cannot find user with id ', userId);

12
front/src/Phaser/Game/PlayersPositionInterpolator.ts

@ -6,19 +6,19 @@ import {PlayerMovement} from "./PlayerMovement";
import {HasMovedEvent} from "./GameManager";
export class PlayersPositionInterpolator {
playerMovements: Map<string, PlayerMovement> = new Map<string, PlayerMovement>();
playerMovements: Map<number, PlayerMovement> = new Map<number, PlayerMovement>();
updatePlayerPosition(userId: string, playerMovement: PlayerMovement) : void {
updatePlayerPosition(userId: number, playerMovement: PlayerMovement) : void {
this.playerMovements.set(userId, playerMovement);
}
removePlayer(userId: string): void {
removePlayer(userId: number): void {
this.playerMovements.delete(userId);
}
getUpdatedPositions(tick: number) : Map<string, HasMovedEvent> {
const positions = new Map<string, HasMovedEvent>();
this.playerMovements.forEach((playerMovement: PlayerMovement, userId: string) => {
getUpdatedPositions(tick: number) : Map<number, HasMovedEvent> {
const positions = new Map<number, HasMovedEvent>();
this.playerMovements.forEach((playerMovement: PlayerMovement, userId: number) => {
if (playerMovement.isOutdated(tick)) {
//console.log("outdated")
this.playerMovements.delete(userId);

30
front/src/WebRtc/MediaManager.ts

@ -343,7 +343,7 @@ export class MediaManager {
*
* @param userId
*/
addActiveVideo(userId : string, userName: string = ""){
addActiveVideo(userId: string, userName: string = ""){
this.webrtcInAudio.play();
userName = userName.toUpperCase();
@ -368,7 +368,7 @@ export class MediaManager {
*
* @param userId
*/
addScreenSharingActiveVideo(userId : string, divImportance: DivImportance = DivImportance.Important){
addScreenSharingActiveVideo(userId: string, divImportance: DivImportance = DivImportance.Important){
//this.webrtcInAudio.play();
userId = `screen-sharing-${userId}`;
@ -387,7 +387,7 @@ export class MediaManager {
*
* @param userId
*/
disabledMicrophoneByUserId(userId: string){
disabledMicrophoneByUserId(userId: number){
const element = document.getElementById(`microphone-${userId}`);
if(!element){
return;
@ -399,7 +399,7 @@ export class MediaManager {
*
* @param userId
*/
enabledMicrophoneByUserId(userId: string){
enabledMicrophoneByUserId(userId: number){
const element = document.getElementById(`microphone-${userId}`);
if(!element){
return;
@ -411,7 +411,7 @@ export class MediaManager {
*
* @param userId
*/
disabledVideoByUserId(userId: string) {
disabledVideoByUserId(userId: number) {
let element = document.getElementById(`${userId}`);
if (element) {
element.style.opacity = "0";
@ -426,7 +426,7 @@ export class MediaManager {
*
* @param userId
*/
enabledVideoByUserId(userId: string){
enabledVideoByUserId(userId: number){
let element = document.getElementById(`${userId}`);
if(element){
element.style.opacity = "1";
@ -442,7 +442,7 @@ export class MediaManager {
* @param userId
* @param stream
*/
addStreamRemoteVideo(userId : string, stream : MediaStream){
addStreamRemoteVideo(userId: string, stream : MediaStream){
const remoteVideo = this.remoteVideo.get(userId);
if (remoteVideo === undefined) {
console.error('Unable to find video for ', userId);
@ -450,7 +450,7 @@ export class MediaManager {
}
remoteVideo.srcObject = stream;
}
addStreamRemoteScreenSharing(userId : string, stream : MediaStream){
addStreamRemoteScreenSharing(userId: string, stream : MediaStream){
// In the case of screen sharing (going both ways), we may need to create the HTML element if it does not exist yet
const remoteVideo = this.remoteVideo.get(`screen-sharing-${userId}`);
if (remoteVideo === undefined) {
@ -464,15 +464,15 @@ export class MediaManager {
*
* @param userId
*/
removeActiveVideo(userId : string){
removeActiveVideo(userId: string){
layoutManager.remove(userId);
this.remoteVideo.delete(userId);
}
removeActiveScreenSharingVideo(userId : string) {
removeActiveScreenSharingVideo(userId: string) {
this.removeActiveVideo(`screen-sharing-${userId}`)
}
isConnecting(userId : string): void {
isConnecting(userId: string): void {
const connectingSpinnerDiv = this.getSpinner(userId);
if (connectingSpinnerDiv === null) {
return;
@ -480,7 +480,7 @@ export class MediaManager {
connectingSpinnerDiv.style.display = 'block';
}
isConnected(userId : string): void {
isConnected(userId: string): void {
const connectingSpinnerDiv = this.getSpinner(userId);
if (connectingSpinnerDiv === null) {
return;
@ -488,7 +488,7 @@ export class MediaManager {
connectingSpinnerDiv.style.display = 'none';
}
isError(userId : string): void {
isError(userId: string): void {
console.log("isError", `div-${userId}`);
<