Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' of github.com:thecodingmachine/workadventure into feature/global-message

Browse source 
+ migrating to protobuf messages

# Conflicts:
#	back/src/App.ts
#	back/src/Controller/IoSocketController.ts
#	back/yarn.lock
#	front/src/Connection.ts
#	front/src/Phaser/Game/GameScene.ts
#	front/src/Phaser/Login/EnableCameraScene.ts
#	front/src/WebRtc/SimplePeer.ts
This commit is contained in:
David Négrier 2020-10-01 14:11:34 +02:00
commit d3fa901691
87 changed files with 7429 additions and 1891 deletions
Download patch file Download diff file Expand all files Collapse all files

17
front/src/Administration/ConsoleGlobalMessageManager.ts
View file

@ -3,8 +3,9 @@ import {GameScene} from "../Phaser/Game/GameScene";
const Quill = require("quill");
import {HtmlUtils} from "../WebRtc/HtmlUtils";
import {Connection, GlobalMessageInterface} from "../Connection";
import {UserInputManager} from "../Phaser/UserInput/UserInputManager";
import {RoomConnection} from "../Connexion/RoomConnection";
import {PlayGlobalMessageInterface} from "../Connexion/ConnexionModels";
export const CLASS_CONSOLE_MESSAGE = 'main-console';
export const INPUT_CONSOLE_MESSAGE = 'input-send-text';
@ -21,14 +22,12 @@ interface EventTargetFiles extends EventTarget {
export class ConsoleGlobalMessageManager {
private Connection: Connection;
private divMainConsole: HTMLDivElement;
private buttonMainConsole: HTMLDivElement;
private activeConsole: boolean = false;
private userInputManager!: UserInputManager;
constructor(Connection: Connection, userInputManager : UserInputManager) {
this.Connection = Connection;
constructor(private Connection: RoomConnection, userInputManager : UserInputManager) {
this.buttonMainConsole = document.createElement('div');
this.buttonMainConsole.classList.add('console');
this.divMainConsole = document.createElement('div');
@ -240,8 +239,8 @@ export class ConsoleGlobalMessageManager {
if(!quillEditor){
throw "Error get quill node";
}
const GlobalMessage : GlobalMessageInterface = {
id: 1,
const GlobalMessage : PlayGlobalMessageInterface = {
id: "1", // FIXME: use another ID?
message: quillEditor.innerHTML,
type: MESSAGE_TYPE
};
@ -260,8 +259,8 @@ export class ConsoleGlobalMessageManager {
fd.append('file', selectedFile);
const res = await this.Connection.uploadAudio(fd);
const GlobalMessage : GlobalMessageInterface = {
id: (res as {id: number}).id,
const GlobalMessage : PlayGlobalMessageInterface = {
id: (res as {id: string}).id,
message: (res as {path: string}).path,
type: AUDIO_TYPE
};
@ -302,4 +301,4 @@ export class ConsoleGlobalMessageManager {
return '';
}
}
}
}

25
front/src/Administration/GlobalMessageManager.ts
View file

@ -1,30 +1,28 @@
import {HtmlUtils} from "./../WebRtc/HtmlUtils";
import {Connection, GlobalMessageInterface} from "../Connection";
import {AUDIO_TYPE, MESSAGE_TYPE} from "./ConsoleGlobalMessageManager";
import {API_URL} from "../Enum/EnvironmentVariable";
import {RoomConnection} from "../Connexion/RoomConnection";
import {PlayGlobalMessageInterface} from "../Connexion/ConnexionModels";
export class GlobalMessageManager {
private Connection: Connection;
constructor(Connection: Connection) {
this.Connection = Connection;
constructor(private Connection: RoomConnection) {
this.initialise();
}
initialise(){
//receive signal to show message
this.Connection.receivePlayGlobalMessage((message: GlobalMessageInterface) => {
this.Connection.receivePlayGlobalMessage((message: PlayGlobalMessageInterface) => {
this.playMessage(message);
});
//receive signal to close message
this.Connection.receiveStopGlobalMessage((message: GlobalMessageInterface) => {
this.stopMessage(message.id);
this.Connection.receiveStopGlobalMessage((messageId: string) => {
this.stopMessage(messageId);
});
}
private playMessage(message : GlobalMessageInterface){
private playMessage(message : PlayGlobalMessageInterface){
const previousMessage = document.getElementById(this.getHtmlMessageId(message.id));
if(previousMessage){
previousMessage.remove();
@ -39,7 +37,7 @@ export class GlobalMessageManager {
}
}
private playAudioMessage(messageId : number, urlMessage: string){
private playAudioMessage(messageId : string, urlMessage: string){
//delete previous elements
const previousDivAudio = document.getElementsByClassName('audio-playing');
for(let i = 0; i < previousDivAudio.length; i++){
@ -80,7 +78,7 @@ export class GlobalMessageManager {
mainSectionDiv.appendChild(messageAudio);
}
private playTextMessage(messageId : number, htmlMessage: string){
private playTextMessage(messageId : string, htmlMessage: string){
//add button to clear message
const buttonText = document.createElement('p');
buttonText.id = 'button-clear-message';
@ -113,12 +111,11 @@ export class GlobalMessageManager {
mainSectionDiv.appendChild(messageContainer);
}
private stopMessage(messageId: number){
private stopMessage(messageId: string){
HtmlUtils.removeElementByIdOrFail<HTMLDivElement>(this.getHtmlMessageId(messageId));
}
private getHtmlMessageId(messageId: number) : string{
private getHtmlMessageId(messageId: string) : string{
return `message-${messageId}`;
}
}

338
front/src/Connection.ts
View file

@ -1,338 +0,0 @@
import Axios from "axios";
import {API_URL} from "./Enum/EnvironmentVariable";
import {SetPlayerDetailsMessage} from "./Messages/SetPlayerDetailsMessage";
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";
enum EventMessage{
WEBRTC_SIGNAL = "webrtc-signal",
WEBRTC_SCREEN_SHARING_SIGNAL = "webrtc-screen-sharing-signal",
WEBRTC_START = "webrtc-start",
JOIN_ROOM = "join-room", // bi-directional
USER_POSITION = "user-position", // From client to server
USER_MOVED = "user-moved", // From server to client
USER_LEFT = "user-left", // From server to client
MESSAGE_ERROR = "message-error",
WEBRTC_DISCONNECT = "webrtc-disconect",
GROUP_CREATE_UPDATE = "group-create-update",
GROUP_DELETE = "group-delete",
SET_PLAYER_DETAILS = "set-player-details", // Send the name and character to the server (on connect), receive back the id.
ITEM_EVENT = 'item-event',
CONNECT_ERROR = "connect_error",
SET_SILENT = "set_silent", // Set or unset the silent mode for this user.
SET_VIEWPORT = "set-viewport",
BATCH = "batch",
PLAY_GLOBAL_MESSAGE = "play-global-message",
STOP_GLOBAL_MESSAGE = "stop-global-message",
}
export interface PointInterface {
x: number;
y: number;
direction : string;
moving: boolean;
}
export class Point implements PointInterface{
constructor(public x : number, public y : number, public direction : string = PlayerAnimationNames.WalkDown, public moving : boolean = false) {
if(x === null || y === null){
throw Error("position x and y cannot be null");
}
}
}
export interface MessageUserPositionInterface {
userId: string;
name: string;
characterLayers: string[];
position: PointInterface;
}
export interface MessageUserMovedInterface {
userId: string;
position: PointInterface;
}
export interface MessageUserJoined {
userId: string;
name: string;
characterLayers: string[];
position: PointInterface
}
export interface PositionInterface {
x: number,
y: number
}
export interface GroupCreatedUpdatedMessageInterface {
position: PositionInterface,
groupId: string
}
export interface WebRtcStartMessageInterface {
roomId: string,
clients: UserSimplePeerInterface[]
}
export interface WebRtcDisconnectMessageInterface {
userId: string
}
export interface WebRtcSignalSentMessageInterface {
receiverId: string,
signal: SignalData
}
export interface WebRtcSignalReceivedMessageInterface {
userId: string,
signal: SignalData
}
export interface StartMapInterface {
mapUrlStart: string,
startInstance: string
}
export interface ViewportInterface {
left: number,
top: number,
right: number,
bottom: number,
}
export interface UserMovesInterface {
position: PositionInterface,
viewport: ViewportInterface,
}
export interface BatchedMessageInterface {
event: string,
payload: unknown
}
export interface ItemEventMessageInterface {
itemId: number,
event: string,
state: unknown,
parameters: unknown
}
export interface RoomJoinedMessageInterface {
users: MessageUserPositionInterface[],
groups: GroupCreatedUpdatedMessageInterface[],
items: { [itemId: number] : unknown }
}
export interface GlobalMessageInterface {
id: number
type: string
message: string
}
export class Connection implements Connection {
private readonly socket: Socket;
private userId: string|null = null;
private constructor(token: string) {
this.socket = SocketIo(`${API_URL}`, {
query: {
token: token
},
reconnection: false // Reconnection is handled by the application itself
});
this.socket.on(EventMessage.MESSAGE_ERROR, (message: string) => {
console.error(EventMessage.MESSAGE_ERROR, message);
})
/**
* Messages inside batched messages are extracted and sent to listeners directly.
*/
this.socket.on(EventMessage.BATCH, (batchedMessages: BatchedMessageInterface[]) => {
for (const message of batchedMessages) {
const listeners = this.socket.listeners(message.event);
for (const listener of listeners) {
listener(message.payload);
}
}
})
}
public static createConnection(name: string, characterLayersSelected: string[]): Promise<Connection> {
return Axios.post(`${API_URL}/login`, {name: name})
.then((res) => {
return new Promise<Connection>((resolve, reject) => {
const connection = new Connection(res.data.token);
connection.onConnectError((error: object) => {
console.log('An error occurred while connecting to socket server. Retrying');
reject(error);
});
connection.socket.emit(EventMessage.SET_PLAYER_DETAILS, {
name: name,
characterLayers: characterLayersSelected
} as SetPlayerDetailsMessage, (id: string) => {
connection.userId = id;
});
resolve(connection);
});
})
.catch((err) => {
// Let's retry in 4-6 seconds
return new Promise<Connection>((resolve, reject) => {
setTimeout(() => {
Connection.createConnection(name, characterLayersSelected).then((connection) => resolve(connection))
.catch((error) => reject(error));
}, 4000 + Math.floor(Math.random() * 2000) );
});
});
}
public uploadAudio(file : FormData){
return Axios.post(`${API_URL}/upload-audio-message`, file).then((res: {data:{}}) => {
return res.data;
}).catch((err) => {
console.error(err);
throw err;
});
}
public closeConnection(): void {
this.socket?.close();
}
public joinARoom(roomId: string, startX: number, startY: number, direction: string, moving: boolean, viewport: ViewportInterface): Promise<RoomJoinedMessageInterface> {
const promise = new Promise<RoomJoinedMessageInterface>((resolve, reject) => {
this.socket.emit(EventMessage.JOIN_ROOM, {
roomId,
position: {x: startX, y: startY, direction, moving },
viewport,
}, (roomJoinedMessage: RoomJoinedMessageInterface) => {
resolve(roomJoinedMessage);
});
})
return promise;
}
public sharePosition(x : number, y : number, direction : string, moving: boolean, viewport: ViewportInterface) : void{
if(!this.socket){
return;
}
const point = new Point(x, y, direction, moving);
this.socket.emit(EventMessage.USER_POSITION, { position: point, viewport } as UserMovesInterface);
}
public setSilent(silent: boolean): void {
this.socket.emit(EventMessage.SET_SILENT, silent);
}
public setViewport(viewport: ViewportInterface): void {
this.socket.emit(EventMessage.SET_VIEWPORT, viewport);
}
public onUserJoins(callback: (message: MessageUserJoined) => void): void {
this.socket.on(EventMessage.JOIN_ROOM, callback);
}
public onUserMoved(callback: (message: MessageUserMovedInterface) => void): void {
this.socket.on(EventMessage.USER_MOVED, callback);
}
public onUserLeft(callback: (userId: string) => void): void {
this.socket.on(EventMessage.USER_LEFT, callback);
}
public onGroupUpdatedOrCreated(callback: (groupCreateUpdateMessage: GroupCreatedUpdatedMessageInterface) => void): void {
this.socket.on(EventMessage.GROUP_CREATE_UPDATE, callback);
}
public onGroupDeleted(callback: (groupId: string) => void): void {
this.socket.on(EventMessage.GROUP_DELETE, callback)
}
public onConnectError(callback: (error: object) => void): void {
this.socket.on(EventMessage.CONNECT_ERROR, callback)
}
public sendWebrtcSignal(signal: unknown, receiverId : string) {
return this.socket.emit(EventMessage.WEBRTC_SIGNAL, {
receiverId: receiverId,
signal: signal
} as WebRtcSignalSentMessageInterface);
}
public sendWebrtcScreenSharingSignal(signal: unknown, receiverId : string) {
return this.socket.emit(EventMessage.WEBRTC_SCREEN_SHARING_SIGNAL, {
receiverId: receiverId,
signal: signal
} as WebRtcSignalSentMessageInterface);
}
public receiveWebrtcStart(callback: (message: WebRtcStartMessageInterface) => void) {
this.socket.on(EventMessage.WEBRTC_START, callback);
}
public receiveWebrtcSignal(callback: (message: WebRtcSignalReceivedMessageInterface) => void) {
return this.socket.on(EventMessage.WEBRTC_SIGNAL, callback);
}
public receiveWebrtcScreenSharingSignal(callback: (message: WebRtcSignalReceivedMessageInterface) => void) {
return this.socket.on(EventMessage.WEBRTC_SCREEN_SHARING_SIGNAL, callback);
}
public onServerDisconnected(callback: (reason: string) => void): void {
this.socket.on('disconnect', (reason: string) => {
if (reason === 'io client disconnect') {
// The client asks for disconnect, let's not trigger any event.
return;
}
callback(reason);
});
}
public getUserId(): string|null {
return this.userId;
}
disconnectMessage(callback: (message: WebRtcDisconnectMessageInterface) => void): void {
this.socket.on(EventMessage.WEBRTC_DISCONNECT, callback);
}
emitActionableEvent(itemId: number, event: string, state: unknown, parameters: unknown) {
return this.socket.emit(EventMessage.ITEM_EVENT, {
itemId,
event,
state,
parameters
});
}
onActionableEvent(callback: (message: ItemEventMessageInterface) => void): void {
this.socket.on(EventMessage.ITEM_EVENT, callback);
}
public receivePlayGlobalMessage(callback: (message: GlobalMessageInterface) => void) {
return this.socket.on(EventMessage.PLAY_GLOBAL_MESSAGE, callback);
}
public receiveStopGlobalMessage(callback: (message: GlobalMessageInterface) => void) {
return this.socket.on(EventMessage.STOP_GLOBAL_MESSAGE, callback);
}
public emitGlobalMessage(message: GlobalMessageInterface){
return this.socket.emit(EventMessage.PLAY_GLOBAL_MESSAGE, message);
}
}

69
front/src/Connexion/ConnectionManager.ts Normal file
View file

@ -0,0 +1,69 @@
import Axios from "axios";
import {API_URL} from "../Enum/EnvironmentVariable";
import {RoomConnection} from "./RoomConnection";
interface LoginApiData {
authToken: string
userUuid: string
mapUrlStart: string
newUrl: string
}
class ConnectionManager {
private initPromise: Promise<LoginApiData> = Promise.reject();
private mapUrlStart: string|null = null;
private authToken:string|null = null;
private userUuid: string|null = null;
public async init(): Promise<void> {
const match = /\/register\/(.+)/.exec(window.location.toString());
const organizationMemberToken = match ? match[1] : null;
this.initPromise = Axios.post(`${API_URL}/login`, {organizationMemberToken}).then(res => res.data);
const data = await this.initPromise
this.authToken = data.authToken;
this.userUuid = data.userUuid;
this.mapUrlStart = data.mapUrlStart;
const newUrl = data.newUrl;
if (newUrl) {
history.pushState({}, '', newUrl);
}
}
public initBenchmark(): void {
this.authToken = 'test';
}
public connectToRoomSocket(): Promise<RoomConnection> {
return new Promise<RoomConnection>((resolve, reject) => {
const connection = new RoomConnection(this.authToken as string);
connection.onConnectError((error: object) => {
console.log('An error occurred while connecting to socket server. Retrying');
reject(error);
});
connection.onConnect(() => {
resolve(connection);
})
}).catch((err) => {
// Let's retry in 4-6 seconds
return new Promise<RoomConnection>((resolve, reject) => {
setTimeout(() => {
//todo: allow a way to break recurrsion?
this.connectToRoomSocket().then((connection) => resolve(connection));
}, 4000 + Math.floor(Math.random() * 2000) );
});
});
}
public getMapUrlStart(): Promise<string> {
return this.initPromise.then(() => {
if (!this.mapUrlStart) {
throw new Error('No map url set!');
}
return this.mapUrlStart;
})
}
}
export const connectionManager = new ConnectionManager();

126
front/src/Connexion/ConnexionModels.ts Normal file
View file

@ -0,0 +1,126 @@
import {PlayerAnimationNames} from "../Phaser/Player/Animation";
import {UserSimplePeerInterface} from "../WebRtc/SimplePeer";
import {SignalData} from "simple-peer";
export enum EventMessage{
WEBRTC_SIGNAL = "webrtc-signal",
WEBRTC_SCREEN_SHARING_SIGNAL = "webrtc-screen-sharing-signal",
WEBRTC_START = "webrtc-start",
JOIN_ROOM = "join-room", // bi-directional
USER_POSITION = "user-position", // From client to server
USER_MOVED = "user-moved", // From server to client
USER_LEFT = "user-left", // From server to client
MESSAGE_ERROR = "message-error",
WEBRTC_DISCONNECT = "webrtc-disconect",
GROUP_CREATE_UPDATE = "group-create-update",
GROUP_DELETE = "group-delete",
SET_PLAYER_DETAILS = "set-player-details", // Send the name and character to the server (on connect), receive back the id.
ITEM_EVENT = 'item-event',
CONNECT_ERROR = "connect_error",
SET_SILENT = "set_silent", // Set or unset the silent mode for this user.
SET_VIEWPORT = "set-viewport",
BATCH = "batch",
PLAY_GLOBAL_MESSAGE = "play-global-message",
STOP_GLOBAL_MESSAGE = "stop-global-message",
}
export interface PointInterface {
x: number;
y: number;
direction : string;
moving: boolean;
}
export class Point implements PointInterface{
constructor(public x : number, public y : number, public direction : string = PlayerAnimationNames.WalkDown, public moving : boolean = false) {
if(x === null || y === null){
throw Error("position x and y cannot be null");
}
}
}
export interface MessageUserPositionInterface {
userId: number;
name: string;
characterLayers: string[];
position: PointInterface;
}
export interface MessageUserMovedInterface {
userId: number;
position: PointInterface;
}
export interface MessageUserJoined {
userId: number;
name: string;
characterLayers: string[];
position: PointInterface
}
export interface PositionInterface {
x: number,
y: number
}
export interface GroupCreatedUpdatedMessageInterface {
position: PositionInterface,
groupId: number
}
export interface WebRtcStartMessageInterface {
roomId: string,
clients: UserSimplePeerInterface[]
}
export interface WebRtcDisconnectMessageInterface {
userId: number
}
export interface WebRtcSignalSentMessageInterface {
receiverId: number,
signal: SignalData
}
export interface WebRtcSignalReceivedMessageInterface {
userId: number,
signal: SignalData
}
export interface StartMapInterface {
mapUrlStart: string,
startInstance: string
}
export interface ViewportInterface {
left: number,
top: number,
right: number,
bottom: number,
}
export interface BatchedMessageInterface {
event: string,
payload: unknown
}
export interface ItemEventMessageInterface {
itemId: number,
event: string,
state: unknown,
parameters: unknown
}
export interface RoomJoinedMessageInterface {
users: MessageUserPositionInterface[],
groups: GroupCreatedUpdatedMessageInterface[],
items: { [itemId: number] : unknown }
}
export interface PlayGlobalMessageInterface {
id: string
type: string
message: string
}

476
front/src/Connexion/RoomConnection.ts Normal file
View file

@ -0,0 +1,476 @@
import {API_URL} from "../Enum/EnvironmentVariable";
import Axios from "axios";
import {
BatchMessage,
ClientToServerMessage,
GroupDeleteMessage,
GroupUpdateMessage,
ItemEventMessage,
JoinRoomMessage, PlayGlobalMessage,
PositionMessage,
RoomJoinedMessage,
ServerToClientMessage,
SetPlayerDetailsMessage,
SetUserIdMessage,
SilentMessage, StopGlobalMessage,
UserJoinedMessage,
UserLeftMessage,
UserMovedMessage,
UserMovesMessage,
ViewportMessage,
WebRtcDisconnectMessage,
WebRtcSignalToClientMessage,
WebRtcSignalToServerMessage,
WebRtcStartMessage
} from "../Messages/generated/messages_pb"
import {UserSimplePeerInterface} from "../WebRtc/SimplePeer";
import Direction = PositionMessage.Direction;
import {ProtobufClientUtils} from "../Network/ProtobufClientUtils";
import {
EventMessage,
GroupCreatedUpdatedMessageInterface, ItemEventMessageInterface,
MessageUserJoined, PlayGlobalMessageInterface,
RoomJoinedMessageInterface,
ViewportInterface, WebRtcDisconnectMessageInterface,
WebRtcSignalReceivedMessageInterface,
WebRtcSignalSentMessageInterface,
WebRtcStartMessageInterface
} from "./ConnexionModels";
export class RoomConnection implements RoomConnection {
private readonly socket: WebSocket;
private userId: number|null = null;
private listeners: Map<string, Function[]> = new Map<string, Function[]>();
private static websocketFactory: null|((url: string)=>any) = null; // eslint-disable-line @typescript-eslint/no-explicit-any
public static setWebsocketFactory(websocketFactory: (url: string)=>any): void { // eslint-disable-line @typescript-eslint/no-explicit-any
RoomConnection.websocketFactory = websocketFactory;
}
public constructor(token: string) {
let url = API_URL.replace('http://', 'ws://').replace('https://', 'wss://');
url += '?token='+token;
if (RoomConnection.websocketFactory) {
this.socket = RoomConnection.websocketFactory(url);
} else {
this.socket = new WebSocket(url);
}
this.socket.binaryType = 'arraybuffer';
this.socket.onopen = (ev) => {
//console.log('WS connected');
};
this.socket.onmessage = (messageEvent) => {
const arrayBuffer: ArrayBuffer = messageEvent.data;
const message = ServerToClientMessage.deserializeBinary(new Uint8Array(arrayBuffer));
if (message.hasBatchmessage()) {
for (const subMessage of (message.getBatchmessage() as BatchMessage).getPayloadList()) {
let event: string;
let payload;
if (subMessage.hasUsermovedmessage()) {
event = EventMessage.USER_MOVED;
payload = subMessage.getUsermovedmessage();
} else if (subMessage.hasGroupupdatemessage()) {
event = EventMessage.GROUP_CREATE_UPDATE;
payload = subMessage.getGroupupdatemessage();
} else if (subMessage.hasGroupdeletemessage()) {
event = EventMessage.GROUP_DELETE;
payload = subMessage.getGroupdeletemessage();
} else if (subMessage.hasUserjoinedmessage()) {
event = EventMessage.JOIN_ROOM;
payload = subMessage.getUserjoinedmessage();
} else if (subMessage.hasUserleftmessage()) {
event = EventMessage.USER_LEFT;
payload = subMessage.getUserleftmessage();
} else if (subMessage.hasItemeventmessage()) {
event = EventMessage.ITEM_EVENT;
payload = subMessage.getItemeventmessage();
} else {
throw new Error('Unexpected batch message type');
}
this.dispatch(event, payload);
}
} else if (message.hasRoomjoinedmessage()) {
const roomJoinedMessage = message.getRoomjoinedmessage() as RoomJoinedMessage;
const users: Array<MessageUserJoined> = roomJoinedMessage.getUserList().map(this.toMessageUserJoined.bind(this));
const groups: Array<GroupCreatedUpdatedMessageInterface> = roomJoinedMessage.getGroupList().map(this.toGroupCreatedUpdatedMessage.bind(this));
const items: { [itemId: number] : unknown } = {};
for (const item of roomJoinedMessage.getItemList()) {
items[item.getItemid()] = JSON.parse(item.getStatejson());
}
this.resolveJoinRoom({
users,
groups,
items
})
} else if (message.hasSetuseridmessage()) {
this.userId = (message.getSetuseridmessage() as SetUserIdMessage).getUserid();
} else if (message.hasErrormessage()) {
console.error(EventMessage.MESSAGE_ERROR, message.getErrormessage()?.getMessage());
} else if (message.hasWebrtcsignaltoclientmessage()) {
this.dispatch(EventMessage.WEBRTC_SIGNAL, message.getWebrtcsignaltoclientmessage());
} else if (message.hasWebrtcscreensharingsignaltoclientmessage()) {
this.dispatch(EventMessage.WEBRTC_SCREEN_SHARING_SIGNAL, message.getWebrtcscreensharingsignaltoclientmessage());
} else if (message.hasWebrtcstartmessage()) {
this.dispatch(EventMessage.WEBRTC_START, message.getWebrtcstartmessage());
} else if (message.hasWebrtcdisconnectmessage()) {
this.dispatch(EventMessage.WEBRTC_DISCONNECT, message.getWebrtcdisconnectmessage());
} else if (message.hasPlayglobalmessage()) {
this.dispatch(EventMessage.PLAY_GLOBAL_MESSAGE, message.getPlayglobalmessage());
} else if (message.hasStopglobalmessage()) {
this.dispatch(EventMessage.STOP_GLOBAL_MESSAGE, message.getStopglobalmessage());
} else {
throw new Error('Unknown message received');
}
}
}
private dispatch(event: string, payload: unknown): void {
const listeners = this.listeners.get(event);
if (listeners === undefined) {
return;
}
for (const listener of listeners) {
listener(payload);
}
}
public emitPlayerDetailsMessage(userName: string, characterLayersSelected: string[]) {
const message = new SetPlayerDetailsMessage();
message.setName(userName);
message.setCharacterlayersList(characterLayersSelected);
const clientToServerMessage = new ClientToServerMessage();
clientToServerMessage.setSetplayerdetailsmessage(message);
this.socket.send(clientToServerMessage.serializeBinary().buffer);
}
public closeConnection(): void {
this.socket?.close();
}
private resolveJoinRoom!: (value?: (RoomJoinedMessageInterface | PromiseLike<RoomJoinedMessageInterface> | undefined)) => void;
public joinARoom(roomId: string, startX: number, startY: number, direction: string, moving: boolean, viewport: ViewportInterface): Promise<RoomJoinedMessageInterface> {
const promise = new Promise<RoomJoinedMessageInterface>((resolve, reject) => {
this.resolveJoinRoom = resolve;
const positionMessage = this.toPositionMessage(startX, startY, direction, moving);
const viewportMessage = this.toViewportMessage(viewport);
const joinRoomMessage = new JoinRoomMessage();
joinRoomMessage.setRoomid(roomId);
joinRoomMessage.setPosition(positionMessage);
joinRoomMessage.setViewport(viewportMessage);
//console.log('Sending position ', positionMessage.getX(), positionMessage.getY());
const clientToServerMessage = new ClientToServerMessage();
clientToServerMessage.setJoinroommessage(joinRoomMessage);
this.socket.send(clientToServerMessage.serializeBinary().buffer);
})
return promise;
}
private toPositionMessage(x : number, y : number, direction : string, moving: boolean): PositionMessage {
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);
return positionMessage;
}
private toViewportMessage(viewport: ViewportInterface): ViewportMessage {
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));
return viewportMessage;
}
public sharePosition(x : number, y : number, direction : string, moving: boolean, viewport: ViewportInterface) : void{
if(!this.socket){
return;
}
const positionMessage = this.toPositionMessage(x, y, direction, moving);
const viewportMessage = this.toViewportMessage(viewport);
const userMovesMessage = new UserMovesMessage();
userMovesMessage.setPosition(positionMessage);
userMovesMessage.setViewport(viewportMessage);
//console.log('Sending position ', positionMessage.getX(), positionMessage.getY());
const clientToServerMessage = new ClientToServerMessage();
clientToServerMessage.setUsermovesmessage(userMovesMessage);
this.socket.send(clientToServerMessage.serializeBinary().buffer);
}
public setSilent(silent: boolean): void {
const silentMessage = new SilentMessage();
silentMessage.setSilent(silent);
const clientToServerMessage = new ClientToServerMessage();
clientToServerMessage.setSilentmessage(silentMessage);
this.socket.send(clientToServerMessage.serializeBinary().buffer);
}
public setViewport(viewport: ViewportInterface): void {
const viewportMessage = new ViewportMessage();
viewportMessage.setTop(Math.round(viewport.top));
viewportMessage.setBottom(Math.round(viewport.bottom));
viewportMessage.setLeft(Math.round(viewport.left));
viewportMessage.setRight(Math.round(viewport.right));
const clientToServerMessage = new ClientToServerMessage();
clientToServerMessage.setViewportmessage(viewportMessage);
this.socket.send(clientToServerMessage.serializeBinary().buffer);
}
public onUserJoins(callback: (message: MessageUserJoined) => void): void {
this.onMessage(EventMessage.JOIN_ROOM, (message: UserJoinedMessage) => {
callback(this.toMessageUserJoined(message));
});
}
// TODO: move this to protobuf utils
private toMessageUserJoined(message: UserJoinedMessage): MessageUserJoined {
const position = message.getPosition();
if (position === undefined) {
throw new Error('Invalid JOIN_ROOM message');
}
return {
userId: message.getUserid(),
name: message.getName(),
characterLayers: message.getCharacterlayersList(),
position: ProtobufClientUtils.toPointInterface(position)
}
}
public onUserMoved(callback: (message: UserMovedMessage) => void): void {
this.onMessage(EventMessage.USER_MOVED, callback);
//this.socket.on(EventMessage.USER_MOVED, callback);
}
/**
* Registers a listener on a message that is part of a batch
*/
private onMessage(eventName: string, callback: Function): void {
let callbacks = this.listeners.get(eventName);
if (callbacks === undefined) {
callbacks = new Array<Function>();
this.listeners.set(eventName, callbacks);
}
callbacks.push(callback);
}
public onUserLeft(callback: (userId: number) => void): void {
this.onMessage(EventMessage.USER_LEFT, (message: UserLeftMessage) => {
callback(message.getUserid());
});
}
public onGroupUpdatedOrCreated(callback: (groupCreateUpdateMessage: GroupCreatedUpdatedMessageInterface) => void): void {
this.onMessage(EventMessage.GROUP_CREATE_UPDATE, (message: GroupUpdateMessage) => {
callback(this.toGroupCreatedUpdatedMessage(message));
});
}
private toGroupCreatedUpdatedMessage(message: GroupUpdateMessage): GroupCreatedUpdatedMessageInterface {
const position = message.getPosition();
if (position === undefined) {
throw new Error('Missing position in GROUP_CREATE_UPDATE');
}
return {
groupId: message.getGroupid(),
position: position.toObject()
}
}
public onGroupDeleted(callback: (groupId: number) => void): void {
this.onMessage(EventMessage.GROUP_DELETE, (message: GroupDeleteMessage) => {
callback(message.getGroupid());
});
}
public onConnectError(callback: (error: Event) => void): void {
this.socket.addEventListener('error', callback)
}
public onConnect(callback: (event: Event) => void): void {
this.socket.addEventListener('open', callback)
}
public sendWebrtcSignal(signal: unknown, receiverId: number) {
const webRtcSignal = new WebRtcSignalToServerMessage();
webRtcSignal.setReceiverid(receiverId);
webRtcSignal.setSignal(JSON.stringify(signal));
const clientToServerMessage = new ClientToServerMessage();
clientToServerMessage.setWebrtcsignaltoservermessage(webRtcSignal);
this.socket.send(clientToServerMessage.serializeBinary().buffer);
}
public sendWebrtcScreenSharingSignal(signal: unknown, receiverId: number) {
const webRtcSignal = new WebRtcSignalToServerMessage();
webRtcSignal.setReceiverid(receiverId);
webRtcSignal.setSignal(JSON.stringify(signal));
const clientToServerMessage = new ClientToServerMessage();
clientToServerMessage.setWebrtcscreensharingsignaltoservermessage(webRtcSignal);
this.socket.send(clientToServerMessage.serializeBinary().buffer);
}
public receiveWebrtcStart(callback: (message: UserSimplePeerInterface) => void) {
this.onMessage(EventMessage.WEBRTC_START, (message: WebRtcStartMessage) => {
callback({
userId: message.getUserid(),
name: message.getName(),
initiator: message.getInitiator()
});
});
}
public receiveWebrtcSignal(callback: (message: WebRtcSignalReceivedMessageInterface) => void) {
this.onMessage(EventMessage.WEBRTC_SIGNAL, (message: WebRtcSignalToClientMessage) => {
callback({
userId: message.getUserid(),
signal: JSON.parse(message.getSignal())
});
});
}
public receiveWebrtcScreenSharingSignal(callback: (message: WebRtcSignalReceivedMessageInterface) => void) {
this.onMessage(EventMessage.WEBRTC_SCREEN_SHARING_SIGNAL, (message: WebRtcSignalToClientMessage) => {
callback({
userId: message.getUserid(),
signal: JSON.parse(message.getSignal())
});
});
}
public onServerDisconnected(callback: (event: CloseEvent) => void): void {
this.socket.addEventListener('close', (event) => {
console.log('Socket closed with code '+event.code+". Reason: "+event.reason);
if (event.code === 1000) {
// Normal closure case
return;
}
callback(event);
});
}
public getUserId(): number|null {
return this.userId;
}
disconnectMessage(callback: (message: WebRtcDisconnectMessageInterface) => void): void {
this.onMessage(EventMessage.WEBRTC_DISCONNECT, (message: WebRtcDisconnectMessage) => {
callback({
userId: message.getUserid()
});
});
}
emitActionableEvent(itemId: number, event: string, state: unknown, parameters: unknown): void {
const itemEventMessage = new ItemEventMessage();
itemEventMessage.setItemid(itemId);
itemEventMessage.setEvent(event);
itemEventMessage.setStatejson(JSON.stringify(state));
itemEventMessage.setParametersjson(JSON.stringify(parameters));
const clientToServerMessage = new ClientToServerMessage();
clientToServerMessage.setItemeventmessage(itemEventMessage);
this.socket.send(clientToServerMessage.serializeBinary().buffer);
}
onActionableEvent(callback: (message: ItemEventMessageInterface) => void): void {
this.onMessage(EventMessage.ITEM_EVENT, (message: ItemEventMessage) => {
callback({
itemId: message.getItemid(),
event: message.getEvent(),
parameters: JSON.parse(message.getParametersjson()),
state: JSON.parse(message.getStatejson())
});
});
}
public uploadAudio(file : FormData){
return Axios.post(`${API_URL}/upload-audio-message`, file).then((res: {data:{}}) => {
return res.data;
}).catch((err) => {
console.error(err);
throw err;
});
}
public receivePlayGlobalMessage(callback: (message: PlayGlobalMessageInterface) => void) {
return this.onMessage(EventMessage.PLAY_GLOBAL_MESSAGE, (message: PlayGlobalMessage) => {
callback({
id: message.getId(),
type: message.getType(),
message: message.getMessage(),
});
});
}
public receiveStopGlobalMessage(callback: (messageId: string) => void) {
return this.onMessage(EventMessage.STOP_GLOBAL_MESSAGE, (message: StopGlobalMessage) => {
callback(message.getId());
});
}
public emitGlobalMessage(message: PlayGlobalMessageInterface){
console.log('emitGlobalMessage', message);
const playGlobalMessage = new PlayGlobalMessage();
playGlobalMessage.setId(message.id);
playGlobalMessage.setType(message.type);
playGlobalMessage.setMessage(message.message);
const clientToServerMessage = new ClientToServerMessage();
clientToServerMessage.setPlayglobalmessage(playGlobalMessage);
this.socket.send(clientToServerMessage.serializeBinary().buffer);
}
}

2
front/src/Enum/EnvironmentVariable.ts
View file

@ -7,7 +7,7 @@ const JITSI_URL : string|undefined = (process.env.JITSI_URL === '') ? undefined
const RESOLUTION = 3;
const ZOOM_LEVEL = 1/*3/4*/;
const POSITION_DELAY = 200; // Wait 200ms between sending position events
const MAX_EXTRAPOLATION_TIME = 250; // Extrapolate a maximum of 250ms if no new movement is sent by the player
const MAX_EXTRAPOLATION_TIME = 100; // Extrapolate a maximum of 250ms if no new movement is sent by the player
export {
DEBUG_MODE,

1
front/src/Messages/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
/generated/

4
front/src/Messages/SetPlayerDetailsMessage.ts
View file

@ -1,4 +0,0 @@
export interface SetPlayerDetailsMessage {
name: string,
characterLayers: string[]
}

34
front/src/Network/ProtobufClientUtils.ts Normal file
View file

@ -0,0 +1,34 @@
import {PositionMessage} from "../Messages/generated/messages_pb";
import Direction = PositionMessage.Direction;
import {PointInterface} from "../Connexion/ConnexionModels";
export class ProtobufClientUtils {
public static toPointInterface(position: PositionMessage): PointInterface {
let direction: string;
switch (position.getDirection()) {
case Direction.UP:
direction = 'up';
break;
case Direction.DOWN:
direction = 'down';
break;
case Direction.LEFT:
direction = 'left';
break;
case Direction.RIGHT:
direction = 'right';
break;
default:
throw new Error("Unexpected direction");
}
// sending to all clients in room except sender
return {
x: position.getX(),
y: position.getY(),
direction,
moving: position.getMoving(),
};
}
}

6
front/src/Phaser/Entity/RemotePlayer.ts
View file

@ -1,15 +1,15 @@
import {GameScene} from "../Game/GameScene";
import {PointInterface} from "../../Connection";
import {PointInterface} from "../../Connexion/ConnexionModels";
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,

4
front/src/Phaser/Game/AddPlayerInterface.ts
View file

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

16
front/src/Phaser/Game/GameManager.ts
View file

@ -1,9 +1,10 @@
import {GameScene} from "./GameScene";
import {
StartMapInterface
} from "../../Connection";
} from "../../Connexion/ConnexionModels";
import Axios from "axios";
import {API_URL} from "../../Enum/EnvironmentVariable";
import {connectionManager} from "../../Connexion/ConnectionManager";
export interface HasMovedEvent {
direction: string;
@ -29,13 +30,12 @@ export class GameManager {
}
loadStartMap() : Promise<StartMapInterface> {
return Axios.get(`${API_URL}/start-map`)
.then((res) => {
return res.data;
}).catch((err) => {
console.error(err);
throw err;
});
return connectionManager.getMapUrlStart().then(mapUrlStart => {
return {
mapUrlStart: mapUrlStart,
startInstance: "global", //todo: is this property still usefull?
}
});
}
getPlayerName(): string {

61
front/src/Phaser/Game/GameScene.ts
View file

@ -1,6 +1,5 @@
import {GameManager, gameManager, HasMovedEvent} from "./GameManager";
import {
Connection,
GroupCreatedUpdatedMessageInterface,
MessageUserJoined,
MessageUserMovedInterface,
@ -8,7 +7,7 @@ import {
PointInterface,
PositionInterface,
RoomJoinedMessageInterface
} from "../../Connection";
} from "../../Connexion/ConnexionModels";
import {CurrentGamerInterface, hasMovedEventName, Player} from "../Player/Player";
import {DEBUG_MODE, JITSI_URL, POSITION_DELAY, RESOLUTION, ZOOM_LEVEL} from "../../Enum/EnvironmentVariable";
import {
@ -40,6 +39,10 @@ import {FourOFourSceneName} from "../Reconnecting/FourOFourScene";
import {ItemFactoryInterface} from "../Items/ItemFactoryInterface";
import {ActionableItem} from "../Items/ActionableItem";
import {UserInputManager} from "../UserInput/UserInputManager";
import {UserMovedMessage} from "../../Messages/generated/messages_pb";
import {ProtobufClientUtils} from "../../Network/ProtobufClientUtils";
import {connectionManager} from "../../Connexion/ConnectionManager";
import {RoomConnection} from "../../Connexion/RoomConnection";
import {GlobalMessageManager} from "../../Administration/GlobalMessageManager";
import {ConsoleGlobalMessageManager} from "../../Administration/ConsoleGlobalMessageManager";
@ -65,7 +68,7 @@ interface AddPlayerEventInterface {
interface RemovePlayerEventInterface {
type: 'RemovePlayerEvent'
userId: string
userId: number
}
interface UserMovedEventInterface {
@ -80,7 +83,7 @@ interface GroupCreatedUpdatedEventInterface {
interface DeleteGroupEventInterface {
type: 'DeleteGroupEvent'
groupId: string
groupId: number
}
export class GameScene extends Phaser.Scene implements CenterListener {
@ -88,23 +91,23 @@ 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>;
mapFile!: ITiledMap;
groups: Map<string, Sprite>;
groups: Map<number, Sprite>;
startX!: number;
startY!: number;
circleTexture!: CanvasTexture;
pendingEvents: Queue<InitUserPositionEventInterface|AddPlayerEventInterface|RemovePlayerEventInterface|UserMovedEventInterface|GroupCreatedUpdatedEventInterface|DeleteGroupEventInterface> = new Queue<InitUserPositionEventInterface|AddPlayerEventInterface|RemovePlayerEventInterface|UserMovedEventInterface|GroupCreatedUpdatedEventInterface|DeleteGroupEventInterface>();
private initPosition: PositionInterface|null = null;
private playersPositionInterpolator = new PlayersPositionInterpolator();
private connection!: Connection;
private connection!: RoomConnection;
private simplePeer!: SimplePeer;
private GlobalMessageManager!: GlobalMessageManager;
private ConsoleGlobalMessageManager!: ConsoleGlobalMessageManager;
private connectionPromise!: Promise<Connection>
private connectionPromise!: Promise<RoomConnection>
private connectionAnswerPromise: Promise<RoomJoinedMessageInterface>;
private connectionAnswerPromiseResolve!: (value?: RoomJoinedMessageInterface | PromiseLike<RoomJoinedMessageInterface>) => void;
// A promise that will resolve when the "create" method is called (signaling loading is ended)
@ -151,7 +154,7 @@ export class GameScene extends Phaser.Scene implements CenterListener {
this.GameManager = gameManager;
this.Terrains = [];
this.groups = new Map<string, Sprite>();
this.groups = new Map<number, Sprite>();
this.instance = instance;
this.MapKey = MapKey;
@ -204,9 +207,11 @@ export class GameScene extends Phaser.Scene implements CenterListener {
this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
this.connectionPromise = Connection.createConnection(gameManager.getPlayerName(), gameManager.getCharacterSelected()).then((connection : Connection) => {
this.connectionPromise = connectionManager.connectToRoomSocket().then((connection : RoomConnection) => {
this.connection = connection;
this.connection.emitPlayerDetailsMessage(gameManager.getPlayerName(), gameManager.getCharacterSelected())
connection.onUserJoins((message: MessageUserJoined) => {
const userMessage: AddPlayerInterface = {
userId: message.userId,
@ -217,11 +222,22 @@ export class GameScene extends Phaser.Scene implements CenterListener {
this.addPlayer(userMessage);
});
connection.onUserMoved((message: MessageUserMovedInterface) => {
this.updatePlayerPosition(message);
connection.onUserMoved((message: UserMovedMessage) => {
const position = message.getPosition();
if (position === undefined) {
throw new Error('Position missing from UserMovedMessage');
}
//console.log('Received position ', position.getX(), position.getY(), "from user", message.getUserid());
const messageUserMoved: MessageUserMovedInterface = {
userId: message.getUserid(),
position: ProtobufClientUtils.toPointInterface(position)
}
this.updatePlayerPosition(messageUserMoved);
});
connection.onUserLeft((userId: string) => {
connection.onUserLeft((userId: number) => {
this.removePlayer(userId);
});
@ -229,7 +245,7 @@ export class GameScene extends Phaser.Scene implements CenterListener {
this.shareGroupPosition(groupPositionMessage);
})
connection.onGroupDeleted((groupId: string) => {
connection.onGroupDeleted((groupId: number) => {
try {
this.deleteGroup(groupId);
} catch (e) {
@ -277,7 +293,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);
@ -773,7 +789,7 @@ export class GameScene extends Phaser.Scene implements CenterListener {
this.createCollisionObject();
//join room
this.connectionPromise.then((connection: Connection) => {
this.connectionPromise.then((connection: RoomConnection) => {
const camera = this.cameras.main;
connection.joinARoom(this.RoomId,
this.startX,
@ -926,7 +942,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 +'"');
@ -981,7 +997,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) => {
@ -1038,14 +1054,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);
@ -1075,6 +1091,7 @@ export class GameScene extends Phaser.Scene implements CenterListener {
// We do not update the player position directly (because it is sent only every 200ms).
// Instead we use the PlayersPositionInterpolator that will do a smooth animation over the next 200ms.
const playerMovement = new PlayerMovement({ x: player.x, y: player.y }, this.currentTick, message.position, this.currentTick + POSITION_DELAY);
//console.log('Target position: ', player.x, player.y);
this.playersPositionInterpolator.updatePlayerPosition(player.userId, playerMovement);
}
@ -1104,14 +1121,14 @@ export class GameScene extends Phaser.Scene implements CenterListener {
}
}
deleteGroup(groupId: string): void {
deleteGroup(groupId: number): void {
this.pendingEvents.enqueue({
type: "DeleteGroupEvent",
groupId
});
}
doDeleteGroup(groupId: string): void {
doDeleteGroup(groupId: number): void {
const group = this.groups.get(groupId);
if(!group){
return;

5
front/src/Phaser/Game/PlayerMovement.ts
View file

@ -1,6 +1,6 @@
import {HasMovedEvent} from "./GameManager";
import {MAX_EXTRAPOLATION_TIME} from "../../Enum/EnvironmentVariable";
import {PositionInterface} from "../../Connection";
import {PositionInterface} from "../../Connexion/ConnexionModels";
export class PlayerMovement {
public constructor(private startPosition: PositionInterface, private startTick: number, private endPosition: HasMovedEvent, private endTick: number) {
@ -20,12 +20,13 @@ export class PlayerMovement {
public getPosition(tick: number): HasMovedEvent {
// Special case: end position reached and end position is not moving
if (tick >= this.endTick && this.endPosition.moving === false) {
//console.log('Movement finished ', this.endPosition)
return this.endPosition;
}
const x = (this.endPosition.x - this.startPosition.x) * ((tick - this.startTick) / (this.endTick - this.startTick)) + this.startPosition.x;
const y = (this.endPosition.y - this.startPosition.y) * ((tick - this.startTick) / (this.endTick - this.startTick)) + this.startPosition.y;
//console.log('Computed position ', x, y)
return {
x,
y,

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

@ -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);

2
front/src/Phaser/Login/EnableCameraScene.ts
View file

@ -2,7 +2,7 @@ import {gameManager} from "../Game/GameManager";
import {TextField} from "../Components/TextField";
import Image = Phaser.GameObjects.Image;
import {GameSceneInitInterface} from "../Game/GameScene";
import {StartMapInterface} from "../../Connection";
import {StartMapInterface} from "../../Connexion/ConnexionModels";
import {mediaManager} from "../../WebRtc/MediaManager";
import {RESOLUTION} from "../../Enum/EnvironmentVariable";
import {SoundMeter} from "../Components/SoundMeter";

2
front/src/Phaser/Login/SelectCharacterScene.ts
View file

@ -3,8 +3,6 @@ import {TextField} from "../Components/TextField";
import Image = Phaser.GameObjects.Image;
import Rectangle = Phaser.GameObjects.Rectangle;
import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
import {GameSceneInitInterface} from "../Game/GameScene";
import {StartMapInterface} from "../../Connection";
import {EnableCameraSceneName} from "./EnableCameraScene";
import {CustomizeSceneName} from "./CustomizeScene";

6
front/src/Phaser/Player/Player.ts
View file

@ -1,9 +1,7 @@
import {PlayerAnimationNames} from "./Animation";
import {GameScene, Textures} from "../Game/GameScene";
import {MessageUserPositionInterface, PointInterface} from "../../Connection";
import {ActiveEventList, UserInputEvent, UserInputManager} from "../UserInput/UserInputManager";
import {GameScene} from "../Game/GameScene";
import {UserInputEvent, UserInputManager} from "../UserInput/UserInputManager";
import {Character} from "../Entity/Character";
import {OutlinePipeline} from "../Shaders/OutlinePipeline";
export const hasMovedEventName = "hasMoved";

30
front/src/WebRtc/MediaManager.ts
View file

@ -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}`);
const element = document.getElementById(`div-${userId}`);
if(!element){
@ -500,12 +500,12 @@ export class MediaManager {
}
errorDiv.style.display = 'block';
}
isErrorScreenSharing(userId : string): void {
isErrorScreenSharing(userId: string): void {
this.isError(`screen-sharing-${userId}`);
}
private getSpinner(userId : string): HTMLDivElement|null {
private getSpinner(userId: string): HTMLDivElement|null {
const element = document.getElementById(`div-${userId}`);
if(!element){
return null;

14
front/src/WebRtc/ScreenSharingPeer.ts
View file

@ -1,7 +1,7 @@
import * as SimplePeerNamespace from "simple-peer";
import {mediaManager} from "./MediaManager";
import {Connection} from "../Connection";
import {TURN_SERVER, TURN_USER, TURN_PASSWORD} from "../Enum/EnvironmentVariable";
import {RoomConnection} from "../Connexion/RoomConnection";
const Peer: SimplePeerNamespace.SimplePeer = require('simple-peer');
@ -14,7 +14,7 @@ export class ScreenSharingPeer extends Peer {
*/
private isReceivingStream:boolean = false;
constructor(private userId: string, initiator: boolean, private connection: Connection) {
constructor(private userId: number, initiator: boolean, private connection: RoomConnection) {
super({
initiator: initiator ? initiator : false,
reconnectTimer: 10000,
@ -52,7 +52,7 @@ export class ScreenSharingPeer extends Peer {
if (message.streamEnded !== true) {
console.error('Unexpected message on screen sharing peer connection');
}
mediaManager.removeActiveScreenSharingVideo(this.userId);
mediaManager.removeActiveScreenSharingVideo("" + this.userId);
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -63,7 +63,7 @@ export class ScreenSharingPeer extends Peer {
this.on('connect', () => {
// FIXME: we need to put the loader on the screen sharing connection
mediaManager.isConnected(this.userId);
mediaManager.isConnected("" + this.userId);
console.info(`connect => ${this.userId}`);
});
@ -86,10 +86,10 @@ export class ScreenSharingPeer extends Peer {
//console.log(`ScreenSharingPeer::stream => ${this.userId}`, stream);
//console.log(`stream => ${this.userId} => `, stream);
if(!stream){
mediaManager.removeActiveScreenSharingVideo(this.userId);
mediaManager.removeActiveScreenSharingVideo("" + this.userId);
this.isReceivingStream = false;
} else {
mediaManager.addStreamRemoteScreenSharing(this.userId, stream);
mediaManager.addStreamRemoteScreenSharing("" + this.userId, stream);
this.isReceivingStream = true;
}
}
@ -100,7 +100,7 @@ export class ScreenSharingPeer extends Peer {
public destroy(error?: Error): void {
try {
mediaManager.removeActiveScreenSharingVideo(this.userId);
mediaManager.removeActiveScreenSharingVideo("" + this.userId);
// FIXME: I don't understand why "Closing connection with" message is displayed TWICE before "Nb users in peerConnectionArray"
// I do understand the method closeConnection is called twice, but I don't understand how they manage to run in parallel.
//console.log('Closing connection with '+userId);

56
front/src/WebRtc/SimplePeer.ts
View file

@ -1,9 +1,8 @@
import {
Connection,
WebRtcDisconnectMessageInterface,
WebRtcSignalReceivedMessageInterface,
WebRtcStartMessageInterface
} from "../Connection";
} from "../Connexion/ConnexionModels";
import {
mediaManager,
StartScreenSharingCallback,
@ -12,9 +11,10 @@ import {
} from "./MediaManager";
import {ScreenSharingPeer} from "./ScreenSharingPeer";
import {VideoPeer} from "./VideoPeer";
import {RoomConnection} from "../Connexion/RoomConnection";
export interface UserSimplePeerInterface{
userId: string;
userId: number;
name?: string;
initiator?: boolean;
}
@ -22,25 +22,25 @@ export interface UserSimplePeerInterface{
export interface PeerConnectionListener {
onConnect(user: UserSimplePeerInterface): void;
onDisconnect(userId: string): void;
onDisconnect(userId: number): void;
}
/**
* This class manages connections to all the peers in the same group as me.
*/
export class SimplePeer {
private Connection: Connection;
private Connection: RoomConnection;
private WebRtcRoomId: string;
private Users: Array<UserSimplePeerInterface> = new Array<UserSimplePeerInterface>();
private PeerScreenSharingConnectionArray: Map<string, ScreenSharingPeer> = new Map<string, ScreenSharingPeer>();
private PeerConnectionArray: Map<string, VideoPeer> = new Map<string, VideoPeer>();
private PeerScreenSharingConnectionArray: Map<number, ScreenSharingPeer> = new Map<number, ScreenSharingPeer>();
private PeerConnectionArray: Map<number, VideoPeer> = new Map<number, VideoPeer>();
private readonly sendLocalVideoStreamCallback: UpdatedLocalStreamCallback;
private readonly sendLocalScreenSharingStreamCallback: StartScreenSharingCallback;
private readonly stopLocalScreenSharingStreamCallback: StopScreenSharingCallback;
private readonly peerConnectionListeners: Array<PeerConnectionListener> = new Array<PeerConnectionListener>();
constructor(Connection: Connection, WebRtcRoomId: string = "test-webrtc") {
constructor(Connection: RoomConnection, WebRtcRoomId: string = "test-webrtc") {
this.Connection = Connection;
this.WebRtcRoomId = WebRtcRoomId;
// We need to go through this weird bound function pointer in order to be able to "free" this reference later.
@ -80,7 +80,7 @@ export class SimplePeer {
mediaManager.getCamera().then(() => {
//receive message start
this.Connection.receiveWebrtcStart((message: WebRtcStartMessageInterface) => {
this.Connection.receiveWebrtcStart((message: UserSimplePeerInterface) => {
this.receiveWebrtcStart(message);
});
@ -93,17 +93,22 @@ export class SimplePeer {
});
}
private receiveWebrtcStart(data: WebRtcStartMessageInterface) {
this.WebRtcRoomId = data.roomId;
this.Users = data.clients;
private receiveWebrtcStart(user: UserSimplePeerInterface) {
//this.WebRtcRoomId = data.roomId;
this.Users.push(user);
// Note: the clients array contain the list of all clients (even the ones we are already connected to in case a user joints a group)
// So we can receive a request we already had before. (which will abort at the first line of createPeerConnection)
// TODO: refactor this to only send a message to connect to one user (rather than several users).
// TODO: refactor this to only send a message to connect to one user (rather than several users). => DONE
// This would be symmetrical to the way we handle disconnection.
//console.log('Start message', data);
//start connection
this.startWebRtc();
//this.startWebRtc();
console.log('receiveWebrtcStart. Initiator: ', user.initiator)
if(!user.initiator){
return;
}
this.createPeerConnection(user);
}
/**
@ -127,6 +132,7 @@ export class SimplePeer {
if(
this.PeerConnectionArray.has(user.userId)
){
console.log('Peer connection already exists to user '+user.userId)
return null;
}
@ -138,8 +144,8 @@ export class SimplePeer {
}
}
mediaManager.removeActiveVideo(user.userId);
mediaManager.addActiveVideo(user.userId, name);
mediaManager.removeActiveVideo("" + user.userId);
mediaManager.addActiveVideo("" + user.userId, name);
const peer = new VideoPeer(user.userId, user.initiator ? user.initiator : false, this.Connection);
// When a connection is established to a video stream, and if a screen sharing is taking place,
@ -169,8 +175,8 @@ export class SimplePeer {
// We should display the screen sharing ONLY if we are not initiator
if (!user.initiator) {
mediaManager.removeActiveScreenSharingVideo(user.userId);
mediaManager.addScreenSharingActiveVideo(user.userId);
mediaManager.removeActiveScreenSharingVideo("" + user.userId);
mediaManager.addScreenSharingActiveVideo("" + user.userId);
}
const peer = new ScreenSharingPeer(user.userId, user.initiator ? user.initiator : false, this.Connection);
@ -187,7 +193,7 @@ export class SimplePeer {
*
* @param userId
*/
private closeConnection(userId : string) {
private closeConnection(userId : number) {
try {
//mediaManager.removeActiveVideo(userId);
const peer = this.PeerConnectionArray.get(userId);
@ -215,9 +221,9 @@ export class SimplePeer {
*
* @param userId
*/
private closeScreenSharingConnection(userId : string) {
private closeScreenSharingConnection(userId : number) {
try {
mediaManager.removeActiveScreenSharingVideo(userId);
mediaManager.removeActiveScreenSharingVideo("" + userId);
const peer = this.PeerScreenSharingConnectionArray.get(userId);
if (peer === undefined) {
console.warn("Tried to close connection for user "+userId+" but could not find user")
@ -291,7 +297,7 @@ export class SimplePeer {
*
* @param userId
*/
private pushVideoToRemoteUser(userId : string) {
private pushVideoToRemoteUser(userId : number) {
try {
const PeerConnection = this.PeerConnectionArray.get(userId);
if (!PeerConnection) {
@ -312,7 +318,7 @@ export class SimplePeer {
}
}
private pushScreenSharingToRemoteUser(userId : string) {
private pushScreenSharingToRemoteUser(userId : number) {
const PeerConnection = this.PeerScreenSharingConnectionArray.get(userId);
if (!PeerConnection) {
throw new Error('While pushing screen sharing, cannot find user with ID ' + userId);
@ -357,7 +363,7 @@ export class SimplePeer {
}
}
private sendLocalScreenSharingStreamToUser(userId: string): void {
private sendLocalScreenSharingStreamToUser(userId: number): void {
// If a connection already exists with user (because it is already sharing a screen with us... let's use this connection)
if (this.PeerScreenSharingConnectionArray.has(userId)) {
this.pushScreenSharingToRemoteUser(userId);
@ -374,7 +380,7 @@ export class SimplePeer {
}
}
private stopLocalScreenSharingStreamToUser(userId: string, stream: MediaStream): void {
private stopLocalScreenSharingStreamToUser(userId: number, stream: MediaStream): void {
const PeerConnectionScreenSharing = this.PeerScreenSharingConnectionArray.get(userId);
if (!PeerConnectionScreenSharing) {
throw new Error('Weird, screen sharing connection to user ' + userId + 'not found')

12
front/src/WebRtc/VideoPeer.ts
View file

@ -1,7 +1,7 @@
import * as SimplePeerNamespace from "simple-peer";
import {mediaManager} from "./MediaManager";
import {Connection} from "../Connection";
import {TURN_PASSWORD, TURN_SERVER, TURN_USER} from "../Enum/EnvironmentVariable";
import {RoomConnection} from "../Connexion/RoomConnection";
const Peer: SimplePeerNamespace.SimplePeer = require('simple-peer');
@ -9,7 +9,7 @@ const Peer: SimplePeerNamespace.SimplePeer = require('simple-peer');
* A peer connection used to transmit video / audio signals between 2 peers.
*/
export class VideoPeer extends Peer {
constructor(private userId: string, initiator: boolean, private connection: Connection) {
constructor(private userId: number, initiator: boolean, private connection: RoomConnection) {
super({
initiator: initiator ? initiator : false,
reconnectTimer: 10000,
@ -63,11 +63,11 @@ export class VideoPeer extends Peer {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.on('error', (err: any) => {
console.error(`error => ${this.userId} => ${err.code}`, err);
mediaManager.isError(userId);
mediaManager.isError("" + userId);
});
this.on('connect', () => {
mediaManager.isConnected(this.userId);
mediaManager.isConnected("" + this.userId);
console.info(`connect => ${this.userId}`);
});
@ -108,7 +108,7 @@ export class VideoPeer extends Peer {
mediaManager.disabledVideoByUserId(this.userId);
mediaManager.disabledMicrophoneByUserId(this.userId);
} else {
mediaManager.addStreamRemoteVideo(this.userId, stream);
mediaManager.addStreamRemoteVideo("" + this.userId, stream);
}
}
@ -117,7 +117,7 @@ export class VideoPeer extends Peer {
*/
public destroy(error?: Error): void {
try {
mediaManager.removeActiveVideo(this.userId);
mediaManager.removeActiveVideo("" + this.userId);
// FIXME: I don't understand why "Closing connection with" message is displayed TWICE before "Nb users in peerConnectionArray"
// I do understand the method closeConnection is called twice, but I don't understand how they manage to run in parallel.
//console.log('Closing connection with '+userId);

5
front/src/index.ts
View file

@ -11,11 +11,10 @@ import WebGLRenderer = Phaser.Renderer.WebGL.WebGLRenderer;
import {OutlinePipeline} from "./Phaser/Shaders/OutlinePipeline";
import {CustomizeScene} from "./Phaser/Login/CustomizeScene";
import {CoWebsiteManager} from "./WebRtc/CoWebsiteManager";
import {redirectIfToken} from "./register";
import {connectionManager} from "./Connexion/ConnectionManager";
//CoWebsiteManager.loadCoWebsite('https://thecodingmachine.com');
let connectionData //todo: do something with this data
redirectIfToken().then(res => connectionData = res);
connectionManager.init();
// Load Jitsi if the environment variable is set.
if (JITSI_URL) {

29
front/src/register.ts
View file

@ -1,29 +0,0 @@
import Axios from "axios";
import {API_URL} from "./Enum/EnvironmentVariable";
declare let history:History;
//todo: better naming
export interface ConnexionData {
organizationSlug: string,
worldSlug: string,
roomSlug: string,
}
export async function redirectIfToken(): Promise<ConnexionData | null> {
const match = /\/register\/(.+)/.exec(window.location.toString());
if (!match) {
return null
}
let res = null;
try {
res = await Axios.get(`${API_URL}/register/`+match[1])
} catch (e) {
return null;
}
const organizationSlug = res.data.organizationSlug;
const worldSlug = res.data.worldSlug;
const roomSlug = res.data.roomSlug;
const connexionUrl = '/@/'+organizationSlug+'/'+worldSlug+'/'+roomSlug;
history.pushState({}, '', connexionUrl);
return {organizationSlug, worldSlug, roomSlug};
}