Hola compañeros!
Durante este gran curso, aprendimos muchisimas cosas, y si no haz empezado te recomiendo empezar, no te arrepentiras 😉
Para finalizar el curso quise hacer una práctica pero no sabía muy bien qué hacer, hasta que se iluminó la mente y me puse a simular una sala de chat o
RoomChat usando TypeScript.
Utilicé, como ya mencioné en el titulo los Proxy y las funciones generadoras, me gustaría primero anexar el repositorio a github y la pagina para que puedan interactuar con él.
Repositorio github
El resultado 😆
No está de más decir que esto no es a gran escala ni algo super increible!. Pero todo lo que te imagines, PROGRAMALO! 😎😆 no hay mejor sensación que la de ver por fin una idea realizada. Ahora si, pasemos al codigo.
Explicaré a grandes rasgos lo que hace.
Tenemos una clase RoomChat, la cual implementé con el Singleton Pattern ya que quería que mis usuarios manejaran una sola instancia.
En ella se encuentran los metodos:
idsGenerator como verán es una Generator function, y simplemente se encarga de retornar un ID para cada usuario que ingresa a la sala.
isUserInRoomChat y esta se encarga de verificar si un usuario ya se encuentra en la sala.
getInUserInRoomChat se encarga de agregar los usuarios a la sala siempre y cuando no haya expirado su tiempo “gratuito”, como ven la establecí como privada porque no quiero que nadie mas pueda ingresar usuarios a la sala.
getOutUserFromRoomChat supongo que no hay mucha explicacion para esta, lo que hace es sacar usuarios.
RemoveUserFromRoomChat esta, a diferencia de la la anterior, se encarga de sacar los usuarios los cuales su tiempo “gratuito” finalice.
addUser Cada que ingresa un usuario, lo que se quiere es que se agregue a una lista pero visual, es lo que hace esta funcion, privada por cierto.
getInstance es el metodo que nos dice el Singleton pattern que se debe usar para crear una instancia de la clase.
class RoomChat {
privatestatic instance:RoomChat;
private users;
private asignId;
private containerUsers:HTMLElement;
private event:any;
privateconstructor() {
this.users = [];
this.asignId = this.idsGenerator();
this.containerUsers = document.querySelector('#users ul');
}
private *idsGenerator(){
let id = 1;
while (true) {
yield id;
id++;
}
}
isUserInRoomChat(user){
const userExist = this.users.find(usr => usr.email === user.email);
if(userExist){
alert(`Hola de nuevo, ${userExist.nickname}`);
} else {
user.id = this.asignId.next().value;
this.getInUserInRoomChat(user);
}
}
private getInUserInRoomChat(user){
if(user.timeExpired){
alert(`El usuario ${user.nickname} ha superado el limite de tiempo gratuito, para continuar, por favor crea una cuenta`);
return;
} else {
this.users.push(user);
// console.log(this.users);this.addUser(user);
}
}
private getOutUserFromRoomChat(user:User, event:any){
const indexUser = this.users.indexOf(user);
this.users.splice(indexUser, 1);
this.containerUsers.removeChild(event.currentTarget.parentNode);
alert(`Hasta luego ${user.nickname} vuelve pronto!`);
}
RemoveUserFromRoomChat(user:User){
const indexUser = this.users.indexOf(user);
if(indexUser !== -1){
const nickname = this.users[indexUser].nickname;
this.users.splice(indexUser, 1);
this.containerUsers.removeChild(this.containerUsers.childNodes[indexUser]);
alert(`El usuario ${nickname} ha superado el limite de tiempo gratuito, para continuar, por favor crea una cuenta`);
}
}
private addUser(user:User){
const li = document.createElement('li');
const spanIcon = document.createElement('span');
li.textContent = user.nickname;
li.appendChild(spanIcon);
spanIcon.addEventListener('click', (event) => {
this.getOutUserFromRoomChat(user, event);
});
this.containerUsers.appendChild(li);
}
static getInstance(){
if(!RoomChat.instance){
RoomChat.instance = new RoomChat();
}
return RoomChat.instance;
}
}
Les presento la clase User, la cual tiene un unico metodo que se encarga de “solicitar” a la RoomChat que permita un usuario, pero antes mediante un Proxy intercepta esa entrada para hacer unas cuantas verificaciones, si el usuario tiene membresia o no y tomas acción.
Con la siguiente linea estoy simulando si es usuario tiene membresia o si no la tiene, no hay mucho que explicar ¿no?
this.membership = Math.floor(Math.random() * 2) === 0 ? false : true;
Claro que tengo fallas al implementar el Proxy, quiero que las encuentres y si puedes me regales tu feedback al respecto jeje 😅
class User {
email:string;
nickname:string;
membership:boolean;
timeExpired:boolean;
constructor(email:string, nickname:string){
this.email = email;
this.nickname = nickname;
// Simular usuario registrado o no registradothis.membership = Math.floor(Math.random() * 2) === 0 ? false : true;
}
getInRoomChat(room:RoomChat){
let userProxy = new Proxy(this, {
get(user){
if(user.membership){
room.isUserInRoomChat(user);
} else {
room.isUserInRoomChat(user);
setTimeout(() => {
room.RemoveUserFromRoomChat(user);
user.timeExpired = true;
}, 10000);
}
}
});
userProxy.membership;
}
}```
Ahora si, la ultima parte del codigo...
Simple, verificar los campos de manera sencilla... Y que el usuario ingrese a la RoomChat. Genial!
Ahora, te invito a que practiques y #NuncaParesDeAprender. 😀
const roomChat:RoomChat = RoomChat.getInstance();
const input_email:HTMLInputElement = document.querySelector(’#email’);
const input_nickname:HTMLInputElement = document.querySelector(’#nickname’);
const button:HTMLElement = document.querySelector(’#enterButton’);
function verifyEmail(value:string):boolean{
const regex = /^([a-zA-Z0-9_.-])+@(([a-z])+.)+([a-z]{2,3})$/;
const match = regex.test(value) ? true : false;
return match;
}
button.onclick = (event) => {
const user = new User(input_email.value, input_nickname.value);
if(input_email.value === ‘’ || input_nickname.value === ‘’){
alert(‘Los campos no pueden estár vacíos’);
} else if(!verifyEmail(input_email.value)){
alert(‘El email no es valido’);
} else {
user.getInRoomChat(roomChat);
input_email.value = ‘’;
input_nickname.value = ‘’;
}
event.preventDefault();
}
