Connection Setup

let connectionOptions = null;
/* default values
connectionOptions = {
onConnectionErrorReconnect: true,
authCallbackOnReconnect:true,
reconnectionTimeout: 2_000,
maxReconnectionAttempts: 20,
logConnectionTry: false,
}
*/

let Logger = null;
/* default values
Logger = {
log: console.log,
error: console.error,
warn: console.warn,
info: console.info,
debug: console.debug
}

use this to log all incoming messages
*/
export const wsClient = new WebSocketBrowserClient(connectionOptions,Logger);

let authCredentials = {
//... your credentials
}
// set what to do if authentication is successful
wsClient.whenConnected = () => {
console.log('WebSocketClient Connected');
// ... now you can use the client in other parts of your application
AfterConnectedProcedure();
};
// set what to do if authentication fails
wsClient.ifAuthenticationFails = (authenticationError) => {
console.error({authenticationError});
}
// set what to do if connection is lost
wsClient.onConnectionError = (connectionLostError,connectionLostInfo) => {
// error types:
// invalidIncomingData: the server sent invalid format data
// connectionError: connection failed
// maxReconnectionAttempts: the client tried to reconnect maxReconnectionAttempts times to the server but the server is not available
console.error({connectionLostError,connectionLostInfo});
}

const AfterConnectedProcedure = () => {
// after connection is done, you can read de session data return by the server
let sessionData = wsClient.session
// send a echo message to the server and wait for a response
wsClient.echo({msg:'testing connection ...'},(error,response) => {
console.log({error,response});
});
// send a request message to the server and wait for a response to get an array of users
wsClient.request('getUsers',{},(error,users) => {
if(error) {
console.log('Error:',error);
return;
} else {
globalUsers = users;
}
});

// send a broadcast message to all clients in the group1, except the sender, no matter the group the sender is in
wsClient.Broadcast("newUser","group1" ,{name:"John Doe"});
// send a broadcast message to all clients
wsClient.Broadcast("keepAlive",null ,{name: sessionData["..."]});
// join the group1 to receive messages from the server for this group

let connectedClients:{uuid:string,publicAlias:string,isAvailable:boolean,publicInmutableData:any,connected:boolean}[] = []

// get all connected ws-clients
wsClient.getAvailableClients((err:any,clients:{uuid:string,publicAlias:string,isAvailable:boolean,publicInmutableData:any,connected:boolean}[]) =>{
connectedClients = clients;
})
// set the public availability of this client as true (available to receive direct messages from other clients)
wsClient.updatePublicAvailability(true,(error: any, response: {currentAvailability:boolean}) => {
if(error) {
console.log('Error:',error);
return;
} else {
console.log({currentAvailability});
}
});

// listen to all clients updates
// when a client connects or disconnects, this listener will be called
// when a client updates its public alias, this listener will be called
// when a client updates its public availability, this listener will be called
ws.onClientUpdate((incomingData: {uuid:string,publicAlias:string,isAvailable:boolean,publicInmutableData:any,connected:boolean}) =>{
// get the public alias of the client that sent the message
let {uuid,publicAlias,isAvailable,publicInmutableData,connected} = incomingData;
let findClient = connectedClients.find(client => client.uuid === uuid);
if(findClient) {
findClient.publicAlias = publicAlias;
findClient.isAvailable = isAvailable;
findClient.publicInmutableData = publicInmutableData;
findClient.connected = connected;
} else {
connectedClients.push({uuid,publicAlias,isAvailable,publicInmutableData,connected});
}

connectedClients = connectedClients.filter(client => client.connected);
})

// set the public availability of this client as true (available to receive and send direct messages from other clients, and receive update client broadcast messages from the server)
ws.setAvailable((error: any, response: {currentAvailability:boolean})=>{
console.log({currentAvailability});
});

// set the public availability of this client as false (not available to receive and send direct messages from other clients, and receive update client broadcast messages from the server)
ws.setUnavailable((error: any, response: {currentAvailability:boolean})=>{
console.log({currentAvailability});
});

btnNewUser.addEventListener('click',() => {
let newUser:User = { }
// send a request message to the server and wait for a response to create a new user
wsClient.request('createUser',newUser,(error,response:NewUserResponse) => {
if(error) {
console.log('Error:',error);
return;
} else {
console.log('new user created');
}
});
});

btnLogout.addEventListener('click',() => {
// close the connection
wsClient.close();
});