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. 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", } 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 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 { return Axios.post(`${API_URL}/login`, {name: name}) .then((res) => { return new Promise((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((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, viewport: ViewportInterface): Promise { const promise = new Promise((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); } }