mirror of
https://github.com/DerTyp7/teamspeak-obs-overlay.git
synced 2025-10-30 05:07:12 +01:00
[feature] created class structure
This commit is contained in:
Janis
358
src/teamspeak5Handler.ts
Normal file
358
src/teamspeak5Handler.ts
Normal file
@@ -0,0 +1,358 @@
|
||||
import { IAuthMessage, IAuthSenderPayload, IChannel, IClient, IClientInfo, IClientMovedMessage, IClientPropertiesUpdatedMessage, IClientSelfPropertyUpdatedMessage, IConnection, ITalkStatusChangedMessage } from "interfaces/teamspeak";
|
||||
|
||||
|
||||
// Establish connection to TS5 client
|
||||
// Main class
|
||||
export class TS5Connection {
|
||||
ws: WebSocket; // Websocket connection to TS5 client
|
||||
dataHandler: TS5DataHandler; // Handles data/lists and states
|
||||
messageHandler: TS5MessageHandler; // Handles messages received from TS5 client
|
||||
|
||||
constructor(
|
||||
// Port of TS5 client
|
||||
remoteAppPort: number,
|
||||
|
||||
// State setters for dataHandler
|
||||
setConnections: React.Dispatch<React.SetStateAction<IConnection[]>>,
|
||||
setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>,
|
||||
setClients: React.Dispatch<React.SetStateAction<IClient[]>>
|
||||
) {
|
||||
// Create websocket connection to TS5 client
|
||||
this.ws = new WebSocket(`ws://localhost:${remoteAppPort}`);
|
||||
|
||||
// Create dataHandler and messageHandler
|
||||
this.dataHandler = new TS5DataHandler(setConnections, setChannels, setClients);
|
||||
this.messageHandler = new TS5MessageHandler(this.ws, this.dataHandler);
|
||||
}
|
||||
|
||||
|
||||
// Connect to TS5 client
|
||||
connect() {
|
||||
console.log('Connecting to TS5 client...');
|
||||
|
||||
// Create authentication payload
|
||||
const initalPayload: IAuthSenderPayload = {
|
||||
type: "auth",
|
||||
payload: {
|
||||
identifier: "de.tealfire.obs",
|
||||
version: "1.0.0",
|
||||
name: "TS5 OBS Overlay",
|
||||
description: "A OBS overlay for TS5 by DerTyp876",
|
||||
content: {
|
||||
apiKey: localStorage.getItem("apiKey") || "",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
this.ws.onopen = () => {
|
||||
// Send authentication payload to TS5 client
|
||||
console.log("Sending auth payload...")
|
||||
this.ws.send(JSON.stringify(initalPayload));
|
||||
};
|
||||
|
||||
// Handle messages received from TS5 client
|
||||
// See TS5MessageHandler class
|
||||
this.ws.onmessage = (event) => {
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
switch (data.type) {
|
||||
case "auth":
|
||||
this.messageHandler.handleAuthMessage(data);
|
||||
break;
|
||||
case "clientMoved":
|
||||
this.messageHandler.handleClientMovedMessage(data);
|
||||
break;
|
||||
case "clientPropertiesUpdated":
|
||||
this.messageHandler.handleClientPropertiesUpdatedMessage(data);
|
||||
break;
|
||||
case "talkStatusChanged":
|
||||
this.messageHandler.handleTalkStatusChangedMessage(data);
|
||||
break;
|
||||
case "serverPropertiesUpdated":
|
||||
this.ws.close();
|
||||
break;
|
||||
case "clientSelfPropertyUpdated":
|
||||
this.messageHandler.handleClientSelfPropertyUpdatedMessage(data);
|
||||
break;
|
||||
default:
|
||||
console.log(`No handler for event type: ${data.type}`);
|
||||
break;
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class TS5DataHandler {
|
||||
// Local lists of connections, channels and clients
|
||||
// These lists are used to keep track of the data independent of the App.tsx state
|
||||
localConnections: IConnection[];
|
||||
localChannels: IChannel[];
|
||||
localClients: IClient[];
|
||||
|
||||
// State setters for App.tsx
|
||||
setConnections: React.Dispatch<React.SetStateAction<IConnection[]>>;
|
||||
setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>;
|
||||
setClients: React.Dispatch<React.SetStateAction<IClient[]>>;
|
||||
|
||||
constructor(
|
||||
// State setters for App.tsx
|
||||
setConnections: React.Dispatch<React.SetStateAction<IConnection[]>>,
|
||||
setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>,
|
||||
setClients: React.Dispatch<React.SetStateAction<IClient[]>>
|
||||
) {
|
||||
this.setConnections = setConnections;
|
||||
this.setChannels = setChannels;
|
||||
this.setClients = setClients;
|
||||
|
||||
this.localConnections = [];
|
||||
this.localChannels = [];
|
||||
this.localClients = [];
|
||||
}
|
||||
|
||||
// Update App.tsx states
|
||||
private updateConnectionsState() {
|
||||
this.setConnections([...this.localConnections]);
|
||||
}
|
||||
|
||||
private updateChannelsState() {
|
||||
this.setChannels([...this.localChannels]);
|
||||
}
|
||||
|
||||
private updateClientsState() {
|
||||
this.setClients([...this.localClients]);
|
||||
}
|
||||
|
||||
// Add data to local lists and update states
|
||||
addConnection(connection: IConnection) {
|
||||
console.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")
|
||||
} else {
|
||||
console.log("Connection already exists")
|
||||
}
|
||||
}
|
||||
|
||||
addChannel(channel: IChannel) {
|
||||
console.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")
|
||||
} else {
|
||||
console.log("Channel already exists")
|
||||
}
|
||||
}
|
||||
|
||||
addClient(client: IClient) {
|
||||
console.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")
|
||||
} else {
|
||||
console.log("Client already exists")
|
||||
}
|
||||
}
|
||||
|
||||
// Update data in local lists and update states
|
||||
updateConnection(connection: IConnection) {
|
||||
console.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")
|
||||
} else {
|
||||
console.log("Connection does not exist")
|
||||
}
|
||||
}
|
||||
|
||||
updateChannel(channel: IChannel) {
|
||||
console.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")
|
||||
} else {
|
||||
console.log("Channel does not exist")
|
||||
}
|
||||
}
|
||||
|
||||
updateClient(client: IClient) {
|
||||
console.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")
|
||||
} else {
|
||||
console.log("Client does not exist")
|
||||
}
|
||||
}
|
||||
|
||||
// Remove data from local lists and update states
|
||||
removeConnection(connection: IConnection) {
|
||||
console.log("Removing connection...", connection)
|
||||
const existingConnection: IConnection | undefined = this.localConnections.find((localConnection: IConnection) => localConnection.id === connection.id);
|
||||
|
||||
if (existingConnection !== undefined) {
|
||||
this.localConnections.splice(this.localConnections.indexOf(existingConnection), 1);
|
||||
this.updateConnectionsState();
|
||||
console.log("Connection removed")
|
||||
} else {
|
||||
console.log("Connection does not exist")
|
||||
}
|
||||
}
|
||||
|
||||
removeChannel(channel: IChannel) {
|
||||
console.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) {
|
||||
this.localChannels.splice(this.localChannels.indexOf(existingChannel), 1);
|
||||
this.updateChannelsState();
|
||||
console.log("Channel removed")
|
||||
} else {
|
||||
console.log("Channel does not exist")
|
||||
}
|
||||
}
|
||||
|
||||
removeClient(client: IClient) {
|
||||
console.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")
|
||||
} else {
|
||||
console.log("Client does not exist")
|
||||
}
|
||||
}
|
||||
|
||||
// Helper functions
|
||||
getChannelById(id: number, connectionId: number): IChannel | undefined {
|
||||
return this.localChannels.find((channel: IChannel) => channel.id === id && channel.connection?.id === connectionId);
|
||||
}
|
||||
|
||||
getClientById(id: number, connectionId: number): IClient | undefined {
|
||||
return this.localClients.find((client: IClient) => client.id === id && client.channel?.connection.id === connectionId);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
// Handle incoming messages from TS5 client
|
||||
class TS5MessageHandler {
|
||||
ws: WebSocket;
|
||||
dataHandler: TS5DataHandler;
|
||||
|
||||
constructor(ws: WebSocket, dataHandler: TS5DataHandler) {
|
||||
this.ws = ws;
|
||||
this.dataHandler = dataHandler;
|
||||
}
|
||||
|
||||
|
||||
// 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
|
||||
data.payload.connections.forEach((connection: IConnection) => {
|
||||
this.dataHandler.addConnection(connection);
|
||||
|
||||
// Add channels
|
||||
connection.channelInfos.rootChannels.forEach((channel: IChannel) => {
|
||||
this.dataHandler.addChannel({ ...channel, connection: connection });
|
||||
|
||||
if (connection.channelInfos.subChannels !== null && channel.id in connection.channelInfos.subChannels) {
|
||||
connection.channelInfos.subChannels[channel.id].forEach((subChannel: IChannel) => {
|
||||
this.dataHandler.addChannel(subChannel);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Add clients
|
||||
connection.clientInfos.forEach((clientInfo: IClientInfo) => {
|
||||
const clientChannel: IChannel | undefined = this.dataHandler.getChannelById(clientInfo.channelId, connection.id);
|
||||
|
||||
if (clientChannel !== undefined) {
|
||||
this.dataHandler.addClient({
|
||||
id: clientInfo.id,
|
||||
channel: { ...clientChannel, connection: connection },
|
||||
properties: clientInfo.properties,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
const newChannel: IChannel | undefined = this.dataHandler.getChannelById(data.payload.newChannelId, data.payload.connectionId);
|
||||
if (newChannel === undefined) return;
|
||||
|
||||
if (client !== undefined) { // Client already exists
|
||||
|
||||
if (+data.payload.newChannelId == 0) { // Client left
|
||||
console.log("---> Client left")
|
||||
this.dataHandler.removeClient(client);
|
||||
return;
|
||||
}
|
||||
|
||||
// Client moved
|
||||
console.log("---> Client moved")
|
||||
|
||||
this.dataHandler.updateClient({
|
||||
...client,
|
||||
channel: newChannel,
|
||||
});
|
||||
|
||||
} else { // Client does not exist
|
||||
// Client joined
|
||||
console.log("---> New Client joined")
|
||||
this.dataHandler.addClient(
|
||||
{
|
||||
id: data.payload.clientId,
|
||||
channel: newChannel,
|
||||
properties: data.payload.properties,
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
handleClientPropertiesUpdatedMessage(data: IClientPropertiesUpdatedMessage) {
|
||||
// console.log("handleClientPropertiesUpdate", data);
|
||||
}
|
||||
handleTalkStatusChangedMessage(data: ITalkStatusChangedMessage) {
|
||||
//console.log("handleTalkStatusChanged", data);
|
||||
console.log(this.dataHandler.localConnections);
|
||||
console.log(this.dataHandler.localChannels);
|
||||
console.log(this.dataHandler.localClients);
|
||||
|
||||
}
|
||||
handleClientSelfPropertyUpdatedMessage(data: IClientSelfPropertyUpdatedMessage) {
|
||||
// console.log("handleClientSelfPropertyUpdated", data);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user