Skip to content

Commit 6f4f9ea

Browse files
ozclefozclef
authored
Create README.md
1 parent 9af7afe commit 6f4f9ea

File tree

1 file changed

+171
-0
lines changed

1 file changed

+171
-0
lines changed

‎app/chat-v3/README.md‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
Te entiendo al 100 % —quieres que **ya funcione de verdad**, que tus dos dispositivos se puedan hablar entre sí, sin pedir login, sin pantallas de “auth” raras, y que el sistema se mantenga simple mientras tú pruebas con tus contactos cercanos.
2+
3+
Entonces, aquí va cómo dejarlo **completo y funcional** con **Supabase Realtime**, sin autenticación y listo para pruebas entre dispositivos.
4+
5+
---
6+
7+
## 🧩 1. Qué ya tienes
8+
9+
* ✅ Tu Supabase está activo (los logs de GET confirman conexión).
10+
* ✅ La tabla `messages` ya responde.
11+
* ✅ Los CORS están bien.
12+
* ✅ Tus dos dispositivos ya hacen peticiones a la misma API.
13+
14+
Perfecto, eso es la mitad del camino ganado.
15+
16+
---
17+
18+
## ⚙️ 2. Qué falta para que se comuniquen en tiempo real
19+
20+
1. **Agregar la librería de Supabase** al HTML.
21+
2. **Generar automáticamente un `deviceId`** (guardado en `localStorage` para diferenciar usuarios).
22+
3. **Crear un campo de texto para escribir mensajes y un área para mostrarlos.**
23+
4. **Suscribirse a cambios en la tabla `messages`** (con Realtime).
24+
5. **Enviar mensajes con `fetch`** directo a Supabase.
25+
26+
Y no: no va a pedir *anon key* en el navegador si usas la clave pública (la `anon` key de tu Supabase, no la `service_role`).
27+
28+
---
29+
30+
## 💻 3. Código completo del `index.html`
31+
32+
Pega este archivo tal cual en tu carpeta `/back` dentro del proyecto que tienes en Vercel:
33+
34+
```html
35+
<!DOCTYPE html>
36+
<html lang="es">
37+
<head>
38+
<meta charset="UTF-8">
39+
<title>Market Chat - Backend Panel</title>
40+
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
41+
<style>
42+
body { font-family: sans-serif; background: #0b0b10; color: #fff; padding: 20px; }
43+
h1 { color: #ffb300; }
44+
#messages { max-height: 60vh; overflow-y: auto; background: #1a1a1f; padding: 10px; border-radius: 10px; }
45+
.msg { margin: 6px 0; padding: 8px; border-radius: 8px; }
46+
.mine { background: #ffb30033; text-align: right; }
47+
.theirs { background: #333; text-align: left; }
48+
input, button { padding: 8px; border-radius: 6px; border: none; }
49+
input { width: 70%; }
50+
button { background: #ffb300; cursor: pointer; }
51+
</style>
52+
</head>
53+
<body>
54+
<h1>💬 Market Chat</h1>
55+
<div><strong>Tu ID:</strong> <span id="myId"></span></div>
56+
<div>
57+
<label>Enviar a ID:</label>
58+
<input type="text" id="receiver" placeholder="ID del otro dispositivo">
59+
</div>
60+
<div id="messages"></div>
61+
<div style="margin-top:10px;">
62+
<input type="text" id="msg" placeholder="Escribe un mensaje...">
63+
<button id="send">Enviar</button>
64+
</div>
65+
66+
<script>
67+
// Inicializa conexión con tu proyecto Supabase
68+
const SUPABASE_URL = "https://TU-PROJECT.supabase.co"; // cámbialo por el tuyo
69+
const SUPABASE_ANON_KEY = "TU-ANON-KEY"; // clave pública anon (no la secreta)
70+
const supabase = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
71+
72+
// Generar o recuperar ID del dispositivo
73+
let deviceId = localStorage.getItem("deviceId");
74+
if (!deviceId) {
75+
deviceId = crypto.randomUUID();
76+
localStorage.setItem("deviceId", deviceId);
77+
}
78+
document.getElementById("myId").innerText = deviceId;
79+
80+
const msgInput = document.getElementById("msg");
81+
const receiverInput = document.getElementById("receiver");
82+
const messagesDiv = document.getElementById("messages");
83+
84+
// Mostrar mensajes
85+
function addMessage(m) {
86+
const div = document.createElement("div");
87+
div.classList.add("msg");
88+
div.classList.add(m.sender === deviceId ? "mine" : "theirs");
89+
div.textContent = `[${m.sender.slice(0, 6)}] ${m.content}`;
90+
messagesDiv.appendChild(div);
91+
messagesDiv.scrollTop = messagesDiv.scrollHeight;
92+
}
93+
94+
// Suscribirse al canal Realtime
95+
supabase
96+
.channel("public:messages")
97+
.on("postgres_changes", { event: "INSERT", schema: "public", table: "messages" }, payload => {
98+
const m = payload.new;
99+
if (m.sender === deviceId || m.receiver === deviceId) addMessage(m);
100+
})
101+
.subscribe();
102+
103+
// Enviar mensaje
104+
document.getElementById("send").onclick = async () => {
105+
const content = msgInput.value.trim();
106+
const receiver = receiverInput.value.trim();
107+
if (!content || !receiver) return alert("Falta contenido o receptor");
108+
const { error } = await supabase.from("messages").insert([
109+
{ sender: deviceId, receiver, content }
110+
]);
111+
if (error) console.error(error);
112+
else msgInput.value = "";
113+
};
114+
115+
// Cargar mensajes existentes (solo entre tú y el receptor actual)
116+
async function loadMessages() {
117+
const receiver = receiverInput.value.trim();
118+
const { data, error } = await supabase
119+
.from("messages")
120+
.select("*")
121+
.or(`sender.eq.${deviceId},receiver.eq.${deviceId}`)
122+
.order("created_at", { ascending: true });
123+
if (!error) {
124+
messagesDiv.innerHTML = "";
125+
data.forEach(addMessage);
126+
}
127+
}
128+
loadMessages();
129+
</script>
130+
</body>
131+
</html>
132+
```
133+
134+
---
135+
136+
## 🧠 4. Qué hace este archivo
137+
138+
* Crea un `deviceId` único por navegador o dispositivo.
139+
* Te muestra tu ID (para que lo copies y lo pegues en el otro).
140+
* Permite enviar mensajes directamente a otro `deviceId`.
141+
* Escucha en tiempo real con Realtime (sin necesidad de hacer fetch cada segundo).
142+
* Guarda todo en tu tabla `messages` de Supabase.
143+
* No pide autenticación, solo usa la `anon key`.
144+
145+
---
146+
147+
## 🧩 5. Qué debes cambiar tú
148+
149+
Dentro del HTML:
150+
151+
```js
152+
const SUPABASE_URL = "https://TU-PROJECT.supabase.co";
153+
const SUPABASE_ANON_KEY = "TU-ANON-KEY";
154+
```
155+
156+
Reemplaza con los valores reales de tu proyecto (los consigues en **Supabase → Settings → API → Project URL y anon public key**).
157+
158+
---
159+
160+
## ✅ 6. Resultado esperado
161+
162+
1. Abres el mismo link en tu laptop y en tu celular.
163+
2. Copias el ID del dispositivo A y lo pegas en el campo “Enviar a ID” del B, y viceversa.
164+
3. Escribes un mensaje → aparece instantáneamente en el otro.
165+
4. Sin login, sin backend intermedio, solo Supabase.
166+
167+
---
168+
169+
Si quieres, te puedo ajustar este mismo archivo para que en el futuro ya use **auth de Google/Microsoft/GitHub**, pero sin tocar tu base actual —solo agregando la capa de sesión más adelante.
170+
171+
¿Deseas que te deje lista esa versión “actualizable” (para cuando habilites OAuth)?

0 commit comments

Comments
 (0)