From 619e66375fca3233d3f055e46a08833605de4e71 Mon Sep 17 00:00:00 2001 From: Janis Date: Thu, 29 Jun 2023 18:09:03 +0200 Subject: [PATCH 1/4] [feature] created Logger --- src/handlers/teamspeak/connectionHandler.ts | 3 ++ src/utils/logger.tsx | 31 +++++++++++++++++++++ 2 files changed, 34 insertions(+) create mode 100644 src/utils/logger.tsx diff --git a/src/handlers/teamspeak/connectionHandler.ts b/src/handlers/teamspeak/connectionHandler.ts index 7374b64..cb1ddeb 100644 --- a/src/handlers/teamspeak/connectionHandler.ts +++ b/src/handlers/teamspeak/connectionHandler.ts @@ -1,6 +1,7 @@ import { IAuthSenderPayload, IChannel, IClient, IConnection, ITS5ConnectionHandler, ITS5DataHandler, ITS5MessageHandler } from "@interfaces/teamspeak"; import { TS5DataHandler } from "./dataHandler"; import { TS5MessageHandler } from "./messageHandler"; +import Logger from "@/utils/logger"; // Establish connection to TS5 client @@ -22,6 +23,8 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler { setClients: React.Dispatch>, setActiveConnectionStateId: React.Dispatch>, ) { + + // Create websocket connection to TS5 client this.remoteAppPort = remoteAppPort; this.ws = new WebSocket(`ws://localhost:${this.remoteAppPort}`); diff --git a/src/utils/logger.tsx b/src/utils/logger.tsx new file mode 100644 index 0000000..b98757d --- /dev/null +++ b/src/utils/logger.tsx @@ -0,0 +1,31 @@ +export default class Logger { + // Log message to the console + public static log(message: string): void { + console.log(`%c${message}`, "color: gray"); + } + + // Log warning to the console + public static warn(message: string): void { + console.warn(`%c${message}`); + } + + // Log error to the console + public static error(message: string): void { + console.error(`%c${message}`); + } + + // Log message received from the websocket to the console + public static wsRecieved(wsData: object): void { + console.log(`%c[WS Recieved]`, "color: #683dad", wsData); + } + + // Log message sent to the websocket to the console + public static wsSent(wsData: object): void { + console.log(`%c[WS Sent]`, "color: #4eb570", wsData); + } + + // Log message to the console with a timestamp + public static ts(message: string): void { + console.log(`%c[TS] ${message}`, "color: #2e6bc7"); + } +} From 033cd77e04f2ced64ba5abd05a15e1e5b70d8236 Mon Sep 17 00:00:00 2001 From: Janis Date: Thu, 29 Jun 2023 21:07:02 +0200 Subject: [PATCH 2/4] [feature] update logger parameters --- src/utils/logger.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/utils/logger.tsx b/src/utils/logger.tsx index b98757d..0427b75 100644 --- a/src/utils/logger.tsx +++ b/src/utils/logger.tsx @@ -1,31 +1,31 @@ export default class Logger { // Log message to the console - public static log(message: string): void { - console.log(`%c${message}`, "color: gray"); + public static log(message: string, data: object | null = null): void { + console.log(`%c${message}`.trim(), "color: gray", data ?? ""); } // Log warning to the console - public static warn(message: string): void { - console.warn(`%c${message}`); + public static warn(message: string, data: object | null = null): void { + console.warn(`%c${message}`.trim(), data ?? ""); } // Log error to the console - public static error(message: string): void { - console.error(`%c${message}`); + public static error(message: string, data: object | null = null): void { + console.error(`%c${message}`.trim(), data ?? ""); } // Log message received from the websocket to the console - public static wsRecieved(wsData: object): void { - console.log(`%c[WS Recieved]`, "color: #683dad", wsData); + public static wsReicved(data: object, message: string | undefined = undefined): void { + console.log(`%c[WS Recieved] ${message ?? ""}`.trim(), "color: #8258c7", data); } // Log message sent to the websocket to the console - public static wsSent(wsData: object): void { - console.log(`%c[WS Sent]`, "color: #4eb570", wsData); + public static wsSent(data: object, message: string | undefined = undefined): void { + console.log(`%c[WS Sent] ${message ?? ""}`.trim(), "color: #4eb570", data); } // Log message to the console with a timestamp - public static ts(message: string): void { - console.log(`%c[TS] ${message}`, "color: #2e6bc7"); + public static ts(message: string, data: object | null = null): void { + console.log(`%c[TS] ${message}`.trim(), "color: #2e6bc7", data ?? ""); } } From e411c1c12658b12afdfc5eaae70b34b21e394615 Mon Sep 17 00:00:00 2001 From: Janis Date: Thu, 29 Jun 2023 21:17:30 +0200 Subject: [PATCH 3/4] [feature] integrated Logger --- src/handlers/teamspeak/connectionHandler.ts | 13 ++++++------- src/utils/logger.tsx | 2 +- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/handlers/teamspeak/connectionHandler.ts b/src/handlers/teamspeak/connectionHandler.ts index cb1ddeb..5ee218b 100644 --- a/src/handlers/teamspeak/connectionHandler.ts +++ b/src/handlers/teamspeak/connectionHandler.ts @@ -35,7 +35,7 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler { } reconnect() { - console.log("Reconnecting...") + Logger.log("Reconnecting...") this.ws.close(); this.ws = new WebSocket(`ws://localhost:${this.remoteAppPort}`); @@ -47,8 +47,7 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler { // Connect to TS5 client connect() { - console.log('Connecting to TS5 client...'); - console.log(localStorage.getItem("apiKey")) + Logger.log('Connecting to TS5 client...'); // Create authentication payload const initalPayload: IAuthSenderPayload = { @@ -66,17 +65,17 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler { this.ws.onopen = () => { // Send authentication payload to TS5 client - console.log("Sending auth payload...") this.ws.send(JSON.stringify(initalPayload)); + Logger.wsSent(initalPayload); }; this.ws.onclose = (event) => { - console.log("WebSocket connection closed", event); + Logger.log("WebSocket connection closed", event); // If the connection was closed before authentication, remove the API key from local storage // OBS weirdly caches the localstorage and is very stubborn about clearing it (even when clicken "Clear Cache") if (!this.authenticated) { - console.log("WebSocket connection closed before authentication"); + Logger.log("WebSocket connection closed before authentication"); localStorage.removeItem("apiKey"); } @@ -90,7 +89,7 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler { this.ws.onmessage = (event) => { const data = JSON.parse(event.data); - console.log(data) + Logger.wsRecieved(data) switch (data.type) { case "auth": diff --git a/src/utils/logger.tsx b/src/utils/logger.tsx index 0427b75..279adb5 100644 --- a/src/utils/logger.tsx +++ b/src/utils/logger.tsx @@ -15,7 +15,7 @@ export default class Logger { } // Log message received from the websocket to the console - public static wsReicved(data: object, message: string | undefined = undefined): void { + public static wsReceived(data: object, message: string | undefined = undefined): void { console.log(`%c[WS Recieved] ${message ?? ""}`.trim(), "color: #8258c7", data); } From f0290bb44da7b0728bad3ad6951e95271835ac59 Mon Sep 17 00:00:00 2001 From: Janis Date: Thu, 29 Jun 2023 21:17:31 +0200 Subject: [PATCH 4/4] [feature] integrated Logger --- src/handlers/teamspeak/connectionHandler.ts | 5 +- src/handlers/teamspeak/dataHandler.ts | 55 +++++++++++---------- src/handlers/teamspeak/messageHandler.ts | 43 ++++------------ 3 files changed, 40 insertions(+), 63 deletions(-) diff --git a/src/handlers/teamspeak/connectionHandler.ts b/src/handlers/teamspeak/connectionHandler.ts index 5ee218b..082f1c3 100644 --- a/src/handlers/teamspeak/connectionHandler.ts +++ b/src/handlers/teamspeak/connectionHandler.ts @@ -89,7 +89,7 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler { this.ws.onmessage = (event) => { const data = JSON.parse(event.data); - Logger.wsRecieved(data) + Logger.wsReceived(data) switch (data.type) { case "auth": @@ -107,7 +107,6 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler { break; case "serverPropertiesUpdated": this.messageHandler.handleServerPropertiesUpdatedMessage(data); - //this.ws.close(); break; case "connectStatusChanged": this.messageHandler.handleConnectStatusChangedMessage(data); @@ -119,7 +118,7 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler { this.messageHandler.handleChannelsMessage(data); break; default: - console.log(`No handler for event type: ${data.type}`); + Logger.log(`No handler for event type: ${data.type}`); break; } }; diff --git a/src/handlers/teamspeak/dataHandler.ts b/src/handlers/teamspeak/dataHandler.ts index b4cc622..1df8df7 100644 --- a/src/handlers/teamspeak/dataHandler.ts +++ b/src/handlers/teamspeak/dataHandler.ts @@ -1,3 +1,4 @@ +import Logger from "@/utils/logger"; import { IConnection, IChannel, IClient, ITS5DataHandler } from "@interfaces/teamspeak"; @@ -58,88 +59,88 @@ export class TS5DataHandler implements ITS5DataHandler { // Add data to local lists and update states addConnection(connection: IConnection) { - console.log("Adding connection...", connection) + Logger.log("Adding connection...", connection) const existingConnection: IConnection | undefined = this.localConnections.find((localConnection: IConnection) => localConnection.id === connection.id); if (existingConnection == undefined) { this.localConnections.push(connection); this.updateConnectionsState(); - console.log("Connection added") + Logger.log("Connection added") } else { - console.log("Connection already exists") + Logger.log("Connection already exists") } } addChannel(channel: IChannel) { - console.log("Adding channel...", channel) + Logger.log("Adding channel...", channel) const existingChannel: IChannel | undefined = this.localChannels.find((localChannel: IChannel) => localChannel.id === channel.id && localChannel.connection.id === channel.connection.id); if (existingChannel == undefined) { this.localChannels.push(channel); this.updateChannelsState(); - console.log("Channel added") + Logger.log("Channel added") } else { - console.log("Channel already exists") + Logger.log("Channel already exists") } } addClient(client: IClient) { - console.log("Adding client...", client) + Logger.log("Adding client...", client) const existingClient: IClient | undefined = this.localClients.find((localClient: IClient) => localClient.id === client.id && localClient.channel?.connection.id === client.channel?.connection.id); if (existingClient == undefined) { this.localClients.push(client); this.updateClientsState(); - console.log("Client added") + Logger.log("Client added") } else { - console.log("Client already exists") + Logger.log("Client already exists") } } // Update data in local lists and update states updateConnection(connection: IConnection) { - console.log("Updating connection...", connection) + Logger.log("Updating connection...", connection) const existingConnection: IConnection | undefined = this.localConnections.find((localConnection: IConnection) => localConnection.id === connection.id); if (existingConnection !== undefined) { this.localConnections[this.localConnections.indexOf(existingConnection)] = connection; this.updateConnectionsState(); - console.log("Connection updated") + Logger.log("Connection updated") } else { - console.log("Connection does not exist") + Logger.log("Connection does not exist") } } updateChannel(channel: IChannel) { - console.log("Updating channel...", channel) + Logger.log("Updating channel...", channel) const existingChannel: IChannel | undefined = this.localChannels.find((localChannel: IChannel) => localChannel.id === channel.id && localChannel.connection.id === channel.connection.id); if (existingChannel !== undefined) { this.localChannels[this.localChannels.indexOf(existingChannel)] = channel; this.updateChannelsState(); - console.log("Channel updated") + Logger.log("Channel updated") } else { - console.log("Channel does not exist") + Logger.log("Channel does not exist") } } updateClient(client: IClient) { - console.log("Updating client...", client) + Logger.log("Updating client...", client) const existingClient: IClient | undefined = this.localClients.find((localClient: IClient) => localClient.id === client.id && localClient.channel?.connection.id === client.channel?.connection.id); if (existingClient !== undefined) { this.localClients[this.localClients.indexOf(existingClient)] = client; this.updateClientsState(); - console.log("Client updated") + Logger.log("Client updated") } else { - console.log("Client does not exist") + Logger.log("Client does not exist") } } // Remove data from local lists and update states removeConnection(connection: IConnection) { - console.log("Removing connection...", connection) + Logger.log("Removing connection...", connection) const existingConnection: IConnection | undefined = this.localConnections.find((localConnection: IConnection) => localConnection.id === connection.id); if (existingConnection !== undefined) { @@ -152,14 +153,14 @@ export class TS5DataHandler implements ITS5DataHandler { this.updateChannelsState(); this.updateClientsState(); this.updateConnectionsState(); - console.log("Connection removed") + Logger.log("Connection removed") } else { - console.log("Connection does not exist") + Logger.log("Connection does not exist") } } removeChannel(channel: IChannel) { - console.log("Removing channel...", channel) + Logger.log("Removing channel...", channel) const existingChannel: IChannel | undefined = this.localChannels.find((localChannel: IChannel) => localChannel.id === channel.id && localChannel.connection.id === channel.connection.id); if (existingChannel !== undefined) { @@ -170,22 +171,22 @@ export class TS5DataHandler implements ITS5DataHandler { this.updateClientsState(); this.updateChannelsState(); - console.log("Channel removed") + Logger.log("Channel removed") } else { - console.log("Channel does not exist") + Logger.log("Channel does not exist") } } removeClient(client: IClient) { - console.log("Removing client...", client) + Logger.log("Removing client...", client) const existingClient: IClient | undefined = this.localClients.find((localClient: IClient) => localClient.id === client.id && localClient.channel?.connection.id === client.channel?.connection.id); if (existingClient !== undefined) { this.localClients.splice(this.localClients.indexOf(existingClient), 1); this.updateClientsState(); - console.log("Client removed") + Logger.log("Client removed") } else { - console.log("Client does not exist") + Logger.log("Client does not exist") } } diff --git a/src/handlers/teamspeak/messageHandler.ts b/src/handlers/teamspeak/messageHandler.ts index db46965..3e5dd41 100644 --- a/src/handlers/teamspeak/messageHandler.ts +++ b/src/handlers/teamspeak/messageHandler.ts @@ -1,3 +1,4 @@ +import Logger from "@/utils/logger"; import { IChannelInfos, IConnection, IChannel, IAuthMessage, IClientInfo, IClientMovedMessage, IClient, IClientPropertiesUpdatedMessage, ITalkStatusChangedMessage, IClientSelfPropertyUpdatedMessage, IServerPropertiesUpdatedMessage, IConnectStatusChangedMessage, IChannelsMessage, ITS5MessageHandler, ITS5DataHandler } from "@interfaces/teamspeak"; // Handle incoming messages from TS5 client @@ -36,8 +37,6 @@ export class TS5MessageHandler implements ITS5MessageHandler { // This message is sent by the TS5 server when the client is connected // It contains the initial data handleAuthMessage(data: IAuthMessage) { - console.log("handleAuthMessage", data); - localStorage.setItem("apiKey", data.payload.apiKey); // Process auth payload and add initial data @@ -67,8 +66,6 @@ export class TS5MessageHandler implements ITS5MessageHandler { // This message is sent by the TS5 server when a client moves a channel OR joins/leaves the server handleClientMovedMessage(data: IClientMovedMessage) { - console.log("handleClientMoved", data); - const client: IClient | undefined = this.dataHandler.getClientById(data.payload.clientId, data.payload.connectionId); @@ -76,7 +73,6 @@ export class TS5MessageHandler implements ITS5MessageHandler { if (+data.payload.oldChannelId == 0) { // Create new client(when connecting to server) //set timout to wait for channels to be created setTimeout(() => { - console.log("---> New Client created") const newChannel = this.dataHandler.getChannelById(data.payload.newChannelId, data.payload.connectionId); if (newChannel !== undefined) { this.dataHandler.addClient( @@ -86,25 +82,23 @@ export class TS5MessageHandler implements ITS5MessageHandler { channel: newChannel, properties: data.payload.properties, }); + Logger.ts(`New Client found (${data.payload.connectionId} - ${data.payload.clientId} - ${data.payload.properties.nickname})`) } }, 2000); + } else {//* This gets called when a client moves a channel OR joins/leaves the server const newChannel: IChannel | undefined = this.dataHandler.getChannelById(data.payload.newChannelId, data.payload.connectionId); if (newChannel === undefined || newChannel.id === 0) { - console.log("---> Client left") - + Logger.ts(`Client left (${data.payload.connectionId} - ${data.payload.clientId} - ${data.payload.properties.nickname})`) if (client !== undefined) { this.dataHandler.removeClient(client); - } return; } if (client !== undefined) { // Client already exists - - // Client moved - console.log("---> Client moved") + Logger.ts(`Client moved (${client.channel.connection.id} - ${client.id} - ${client.properties.nickname})`) this.dataHandler.updateClient({ ...client, @@ -113,7 +107,8 @@ export class TS5MessageHandler implements ITS5MessageHandler { } else { // Client does not exist // Client joined - console.log("---> New Client joined") + Logger.ts(`Client joined (${data.payload.connectionId} - ${data.payload.clientId} - ${data.payload.properties.nickname})`) + this.dataHandler.addClient( { id: data.payload.clientId, @@ -127,8 +122,6 @@ export class TS5MessageHandler implements ITS5MessageHandler { } handleClientPropertiesUpdatedMessage(data: IClientPropertiesUpdatedMessage) { - console.log("handleClientPropertiesUpdate", data); - const client: IClient | undefined = this.dataHandler.getClientById(data.payload.clientId, data.payload.connectionId); if (client !== undefined) { @@ -140,8 +133,6 @@ export class TS5MessageHandler implements ITS5MessageHandler { } handleTalkStatusChangedMessage(data: ITalkStatusChangedMessage) { - console.log("handleTalkStatusChanged", data); - const client: IClient | undefined = this.dataHandler.getClientById(data.payload.clientId, data.payload.connectionId); if (client !== undefined) { @@ -151,14 +142,12 @@ export class TS5MessageHandler implements ITS5MessageHandler { }); } - console.log(this.dataHandler.localConnections) - console.log(this.dataHandler.localChannels) - console.log(this.dataHandler.localClients) + // console.log(this.dataHandler.localConnections) + // console.log(this.dataHandler.localChannels) + // console.log(this.dataHandler.localClients) } handleClientSelfPropertyUpdatedMessage(data: IClientSelfPropertyUpdatedMessage) { - console.log("handleClientSelfPropertyUpdated", data); - const connection: IConnection | undefined = this.dataHandler.getConnectionById(this.activeConnectionId); if (data.payload.flag == "inputHardware" || connection == undefined) { // sadly thats the only way to detect if a server is active or not @@ -167,8 +156,6 @@ export class TS5MessageHandler implements ITS5MessageHandler { } handleServerPropertiesUpdatedMessage(data: IServerPropertiesUpdatedMessage) { - console.log("handleServerPropertiesUpdated", data); - const connection: IConnection | undefined = this.dataHandler.getConnectionById(data.payload.connectionId); if (connection !== undefined) { // Update existing connection @@ -180,8 +167,6 @@ export class TS5MessageHandler implements ITS5MessageHandler { } handleConnectStatusChangedMessage(data: IConnectStatusChangedMessage) { - console.log("handleConnectStatusChanged", data); - if (data.payload.status === 0) { // Disconnected from server const connection: IConnection | undefined = this.dataHandler.getConnectionById(data.payload.connectionId); @@ -201,19 +186,11 @@ export class TS5MessageHandler implements ITS5MessageHandler { } handleChannelsMessage(data: IChannelsMessage) { - console.log("handleChannels", data); - // Wait a bit for the connection to be added setTimeout(() => { - console.log(this.dataHandler.localConnections); - console.log(data.payload.connectionId) - console.log(this.dataHandler.localConnections.filter((connection: IConnection) => connection.id === data.payload.connectionId)[0]); - console.log(this.dataHandler.localConnections.find((connection: IConnection) => connection.id === data.payload.connectionId)); const connection: IConnection | undefined = this.dataHandler.getConnectionById(data.payload.connectionId); - console.log(connection); if (connection !== undefined) { this.parseChannelInfos(data.payload.info, connection); - console.log(data.payload.info) } }, 1000); }