workadventure/front/src/Connection.ts

import Axios from "axios";
import {API_URL} from "./Enum/EnvironmentVariable";
import {MessageUI} from "./Logger/MessageUI";
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.

    CONNECT_ERROR = "connect_error",
    SET_SILENT = "set_silent", // Set or unset the silent mode for this user.
    SET_VIEWPORT = "set-viewport",
    BATCH = "batch",
}

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: any
}

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 closeConnection(): void {
        this.socket?.close();
    }


    public joinARoom(roomId: string, startX: number, startY: number, direction: string, moving: boolean): Promise<MessageUserPositionInterface[]> {
        const promise = new Promise<MessageUserPositionInterface[]>((resolve, reject) => {
            this.socket.emit(EventMessage.JOIN_ROOM, { roomId, position: {x: startX, y: startY, direction, moving }}, (userPositions: MessageUserPositionInterface[]) => {
                resolve(userPositions);
            });
        })
        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 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);
    }
}