1.1

campainha.html

@@ -40,26 +40,28 @@
 </div>
 
 <script>
-const servidor = "wss://echo.websocket.events"; // servidor público de teste
+const servidor = "wss://ws.ifelse.io"; // WebSocket que aceita múltiplos clientes
 let ws, codigoSala;
 
 function iniciarHost() {
   document.getElementById("areaHost").style.display = "block";
   document.getElementById("areaVisitante").style.display = "none";
 
-  codigoSala = "campainha_" + Math.floor(Math.random() * 100000);
-  new QRCode(document.getElementById("qrcode"), window.location.href + "?sala=" + codigoSala);
+  codigoSala = "camp_" + Math.floor(Math.random() * 100000);
+  const link = window.location.origin + window.location.pathname + "?sala=" + codigoSala;
+  new QRCode(document.getElementById("qrcode"), link);
+
+  document.getElementById("statusHost").textContent = "Sala: " + codigoSala;
 
   ws = new WebSocket(servidor);
-  ws.onopen = () => {
-    ws.send(JSON.stringify({tipo:"entrar", sala:codigoSala}));
-    document.getElementById("statusHost").textContent = "Sala: " + codigoSala;
-  };
+  ws.onopen = () => console.log("Host conectado");
   ws.onmessage = (msg) => {
-    if (msg.data.includes("TOCAR")) {
-      document.getElementById("som").play();
-      piscarTela();
-    }
+    try {
+      const data = JSON.parse(msg.data);
+      if (data.sala === codigoSala && data.acao === "tocar") {
+        tocarSom();
+      }
+    } catch {}
   };
 }
 
@@ -68,9 +70,8 @@ function iniciarVisitante() {
   document.getElementById("areaHost").style.display = "none";
 
   const url = new URL(window.location.href);
-  if (url.searchParams.get("sala")) {
-    document.getElementById("codigoInput").value = url.searchParams.get("sala");
-  }
+  const sala = url.searchParams.get("sala");
+  if (sala) document.getElementById("codigoInput").value = sala;
 }
 
 function tocarCampainha() {
@@ -78,15 +79,18 @@ function tocarCampainha() {
   if (!codigo) return alert("Digite o código da sala!");
   ws = new WebSocket(servidor);
   ws.onopen = () => {
-    ws.send("TOCAR_" + codigo);
+    ws.send(JSON.stringify({ sala: codigo, acao: "tocar" }));
     document.getElementById("statusVisitante").textContent = "Campainha enviada!";
   };
 }
 
-function piscarTela() {
+function tocarSom() {
+  const som = document.getElementById("som");
+  som.currentTime = 0;
+  som.play();
   document.body.style.background = "#ffe4e4";
-  setTimeout(() => document.body.style.background = "#f4f4f4", 400);
+  setTimeout(() => document.body.style.background = "#f4f4f4", 500);
 }
 </script>
 </body>
-</html>
+</html>