<body>
<div class="opciones">
<div class="left">Hombre</div>
<div class="right">Mujer</div>
</div>
<div class="pantalla">
<div class="usuario1 hide">
<div class="contacto">
<div class="img">
<img src="https://pbs.twimg.com/media/C-Xq00uXYAUUJmE.jpg" alt="img Contacto" class="imgContacto">
</div>
<h3 class="nombreContacto">Contacto</h3>
<button class="ajustes"><i class="fas fa-ellipsis-v"></i></button>
</div>
<div class="dialogo dialogo1"></div>
<div class="envio">
<input type="text" class="mensajeRedactar redacto1" placeHolder="Introduzca un mensaje" spellcheck="false">
<input type="submit" value="Enviar" class="mensajeEnviar">
</div>
</div>
<div class="usuario2 hide">
<div class="contacto">
<div class="img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwMmIswqjw9DvzCAYNHztlSW4WQoCBQYN89X1JN3hfMk101ZLQSm2TvLo_nH4LfMCe5Zs&usqp=CAU" alt="img Contacto" class="imgContacto">
</div>
<h3 class="nombreContacto">Contacto</h3>
<button class="ajustes"><i class="fas fa-ellipsis-v"></i></button>
</div>
<div class="dialogo dialogo2"></div>
<div class="envio">
<input type="text" class="mensajeRedactar redacto2" placeHolder="Introduzca un mensaje" spellcheck="false">
<input type="submit" value="Enviar" class="mensajeEnviar">
</div>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
"use strict"
let usuario1 = document.querySelector(".usuario1");
let usuario2 = document.querySelector(".usuario2");
let usuario0;
let hombre = document.querySelector(".left");
let mujer = document.querySelector(".right");
let btnEnvio = document.querySelectorAll(".mensajeEnviar");
let inputU1 = document.querySelector(".redacto1");
let inputU2 = document.querySelector(".redacto2");
let input = [inputU1, inputU2];
let dialogo1 = document.querySelector(".dialogo1");
let dialogo2 = document.querySelector(".dialogo2");
let dialogos = [dialogo1, dialogo2];
let chat;
let ajustes = document.querySelectorAll(".ajustes");
let usuario = 0;
let mensaje;
let is;
const eleccion = (usuario, numeroUsuario)=>{
hombre.classList.add("hide");
mujer.classList.add("hide");
usuario.classList.toggle("hide");
usuario0 = numeroUsuario;
}
if (navigator.serviceWorker) {
navigator.serviceWorker.register("usuario2.js");
}else{
alert("lo sentimos pero algo esta fallando");
}
hombre.addEventListener("click", ()=>{
eleccion(usuario1, 0);
})
mujer.addEventListener("click", ()=>{
eleccion(usuario2, 1);
})
navigator.serviceWorker.ready.then(res=>{
for (let i = 0; i < btnEnvio.length; i++) {
btnEnvio[i].addEventListener("click", ()=> {
res.active.postMessage(input[i].value);
is = i;
});
}
})
navigator.serviceWorker.addEventListener("message", e=>{
for (let j = 0; j < dialogos.length; j++) {
creacion(e.data, is);
}
})
const creacion = (msg, user)=>{
for (let j = 0; j < dialogos.length; j++) {
chat = document.createElement("DIV");
chat.classList.add("chat");
clases(usuario0, user, j);
chat.textContent = msg;
dialogos[j].appendChild(chat);
}
}
//usuario, mensaje, chat
const clases = (u, m, c)=>{
if (u == m) {
if (m == c){
chat.classList.add("derecha");
}else{
chat.classList.add("izq");
}
}else{
if (m == c){
chat.classList.add("derecha");
}else{
chat.classList.add("izq");
}
}
}
usuario2.js:
"use strict"
self.addEventListener("install", e=>{
console.log("instalando service worker");
})
self.addEventListener("activate", e=>{
console.log("el service worker esta activo");
})
self.addEventListener("error", e=>{
console.log("ups... hubo un error");
})
self.addEventListener("fetch", ()=>{
console.log("Mensaje recibido");
})
self.addEventListener("message", e=>{
console.log("Mensaje recibido del Navegador: ");
console.log(e.data);
e.source.postMessage(e.data);
})
alguien me ayuda xfa??? estoy con un chat online con service workers y no entiendo el xque de dos fallas
- cuando envio un mensaje me escribe dos veces ese mensaje
- x alguna razon cuando abro el chat una pestaña nueva y envio un mensaje desde una de las dos abiertas, no me escribe en las pantallas de ambas pestañas, solo en la que se envio, no se si estoy cometiendo un error de logica o de escritura o que esta pasando (lo estoy abriendo con xampp)