como estan? Les cuento. Estoy realizando un trabajo para un examen de la carrera. El siguiente codigo es el del profe que usó para explicarnos. Si bien el codigo a el le funcionaba, no se porque en mi pc no me está funcionando, o si me estoy olvidando de algo. Se trata de un chat entre usuarios usando Firebase. En Firebase uso Authentication para lo que es la autenticacion (email y contraseña), y uso Firestore para la base de datos. Dentro de la base de datos tengo a los usuarios (con email y displayName), y un chat privado (que la idea es que se genere solo una vez iniciado un primer chat). Y es lo que no se porque no se esta creando.
Voy a dejar lo que es el codigo de la vista del chat entre usuarios, el codigo de como funcionan los chats internamente, el error en sí que me sale por consola, y las reglas usadas en Firestore.
VISTA DE CHATS PRIVADOS:
<template>
<h1 class="mb-4">Chat privado con {{ otherUser.email }}</h1>
<!-- TODO: Cambiar este style pedorro por un CSS. -->
<div class="p-3 mb-3 border rounded" style="min-height:400px">
<div
v-for="message in messages" :key="message"
class="mb-2"
>
<b>(<DateFormatted :date="message.created_at" />) <router-link :to="`/usuario/${message.user}`">{{ message.user }}</router-link> dijo</b>: {{message.message}}
</div>
</div>
<form
action="#"
@submit.prevent="sendMessage"
>
<div class="d-flex justify-content-start">
<label for="message" class="visually-hidden">Mensaje</label>
<input
type="text"
id="message"
class="form-control me-3"
v-model="formMessage"
>
<button type="submit" class="btn btn-primary">Enviar</button>
</div>
</form>
</template>
<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import {useRoute} from "vue-router";
import {useAuth} from "../composition/functions.js";
import {getUserProfileByEmail} from "../users/index.js";
import {listenForIncomingPrivateMessages, savePrivateMessage} from "../chat/chat.js";
import DateFormatted from "../components/DateFormatted.vue";
const route = useRoute();
const {user} = useAuth();
const otherUser = ref({
id: '',
email: '',
displayName: '',
});
/*
|--------------------------------------------------------------------------
| Mensajes privados
|--------------------------------------------------------------------------
*/
const formMessage = ref('');
async function sendMessage() {
const currentMessage = formMessage.value;
formMessage.value = '';
await savePrivateMessage(user.value.email, otherUser.value.email, currentMessage);
}
/*
|--------------------------------------------------------------------------
| Chat mensajes
|--------------------------------------------------------------------------
*/
const messages = ref([]);
let unsubscribe = () => {};
onMounted(async () => {
otherUser.value = await getUserProfileByEmail(route.params.email)
.catch(err => console.error('[UserChat] getUserProfileByEmail - Error: ', err));
unsubscribe = await listenForIncomingPrivateMessages(user.value.email,
otherUser.value.email, data => messages.value = data)
.catch(err => console.error('[UserChat] listenForIncomingPrivateMessages - Error: ',
err));
});
onUnmounted(() => {
unsubscribe();
})
</script>
CODIGO INTERNO DE CHATS:
// Armamos un objeto "chat" que represente el "módulo" del chat, que incluya los elementos de
HTML,
// los métodos de funcionamiento, etc.
import {
getFirestore,
addDoc,
collection,
onSnapshot,
orderBy,
query,
serverTimestamp,
where,
limit, doc, getDocs
} from "firebase/firestore";
const db = getFirestore();
/*
|--------------------------------------------------------------------------
| Chat común
|--------------------------------------------------------------------------
*/
/**
* Graba un mensaje en la base de datos.
*
* @param {{user: string, message: string}} data
* @returns {Promise<void>}
*/
export async function saveMessage({user, message}) {
// Creamos la referencia a la collection "chat", donde almacenamos los mensajes.
const chatRef = collection(db, 'chat');
const data = {
user,
message,
// Pedimos que se guarde la fecha del servidor en la que se graba el mensaje.
// Esto nos va a permitir ordenar los mensajes por su fecha de creación.
timestamp: serverTimestamp(),
};
try {
return await addDoc(chatRef, data);
} catch(err) {
console.error('Error al grabar el mensaje. ', err);
}
}
/**
* Escucha los mensajes que llegan.
*
* @param {function} callback - Callback que se ejecuta cuando haya nuevos mensajes.
Automáticamente va a recibir como argumento un array con los mensajes.
* @returns {function} - Función para cancelar la suscripción.
*/
export function listenForIncomingMessages(callback) {
// Definimos la referencia a la collection.
const chatRef = collection(db, 'chat');
// Definimos el "query" para traer los mensajes.
const q = query(chatRef, orderBy('timestamp'));
// Seteamos el "observer" para esperar los nuevos mensajes, y retornamos la función para
cancelar la
// suscripción.
return onSnapshot(q, snapshot => {
const messages = snapshot.docs.map(doc => doc.data());
// console.log("Observer del chat ejecutado.");
// Ejecutamos el callback que recibimos.
callback(messages);
});
}
/*
|--------------------------------------------------------------------------
| Chat privado
|--------------------------------------------------------------------------
*/
/*
¿Cómo vamos a guardar los mensajes privados?
La idea es usar esta estructura:
collection chats-private {
id#ejhwejhfuisdejhf document {
users: {
email1: true,
email2: true,
}
created_at: Timestamp
collection messages {
id#ajskhdfajkshfkjwe document {
created_at: Timestamp,
user: email,
message: ....
}
}
}
}
*/
const privateChatRef = collection(db, 'chats-private');
const privateRefCache = [
// Estructura:
// {
// users: {email1: true, email2: true},
// ref: collection(...)
// }
];
/**
* Crea un nuevo chat privado.
*
* @param {string} from
* @param {string} to
* @returns {Promise<CollectionReference<DocumentData>>}
*/
async function createPrivateChatRef(from, to) {
const users = {
[from]: true,
[to]: true,
};
const docRef = await addDoc(privateChatRef, {
// Los [] en el nombre de una propiedad de un objeto sirven para poder usar el valor
de una variable
// como nombre de propiedad.
/*
// Ej:
const propName = 'nombre';
const persona = {
[propName]: 'Santiago';
}
console.log(persona); // Object {nombre: 'Santiago'}
*/
users,
created_at: serverTimestamp(),
});
const id = docRef.id;
// Creamos la referencia a los mensajes de este chat.
const chatRef = collection(db, `/chats-private/${id}/messages`);
// La agregamos al caché.
addRefToCache(users, chatRef);
return chatRef;
}
/**
* Retorna la referencia del chat entre los usuarios indicados.
* Si no existe, retorna null.
*
* @param {string} from
* @param {string} to
* @returns {Promise<CollectionReference<DocumentData>>}
*/
async function getPrivateChatRef(from, to) {
const users = {
[from]: true,
[to]: true,
};
// Antes de buscar en Firebase la referencia, verificamos que no la tengamos en caché.
const cachedRef = getCachedRef(from, to);
if(cachedRef) return cachedRef;
const queryChat = query(privateChatRef, where('users', '==', users), limit(1));
const snap = await getDocs(queryChat);
// Si no existe la referencia, entonces la creamos.
if(snap.empty) {
// Creamos el documento.
return await createPrivateChatRef(from, to);
}
const id = snap.docs[0].id;
const chatRef = collection(db, `/chats-private/${id}/messages`);
// La agregamos al caché.
addRefToCache(users, chatRef);
return chatRef;
}
/**
*
* @param {{}} users
* @param {{}} ref
*/
function addRefToCache(users, ref) {
privateRefCache.push({
users,
ref,
});
// console.log("Referencia agregada al caché. Stack actual: ", privateRefCache);
}
/**
* Retorna la referencia cacheada para el chat privado entre los dos usuarios.
*
* @param {string} from
* @param {string} to
* @returns {*}
*/
function getCachedRef(from, to) {
for(let refData of privateRefCache) {
if(refData.users[from] && refData.users[to]) {
// console.log("Usando referencia del caché: ", refData);
return refData.ref;
}
}
return null;
}
/**
* Graba un mensaje de chat privado.
* Si el chat no existe, primero se crea.
*
* @param {string} from - El que envía el mensaje
* @param {string} to - Quien recibe el mensaje
* @param {string} message
* @returns {Promise<void>}
*/
export const savePrivateMessage = async (from, to, message) => {
// Para grabar un mensaje, tenemos que verificar si este es el primer mensaje que se
envían estos
// usuarios, en cuyo caso tenemos que crear el documento de este chat privado, o ya se han
comunicado
// antes, en cuyo caso tenemos que buscar el documento que corresponde.
const currentChatRef = await getPrivateChatRef(from, to);
await addDoc(currentChatRef, {
message,
user: from,
created_at: serverTimestamp(),
});
}
/**
*
* @param {string} from
* @param {string} to
* @param {function} callback
* @returns {Promise<Unsubscribe>}
*/
export const listenForIncomingPrivateMessages = async (from, to, callback) => {
const ref = await getPrivateChatRef(from, to);
// console.log("Ref: ", ref);
const queryMessages = query(ref, orderBy('created_at'));
return onSnapshot(queryMessages, snapshot => {
const docs = snapshot.docs.map(item => item.data());
// console.log(docs);
callback(docs);
});
}
EL ERROR QUE ME APARECE POR CONSOLA:
Dice algo de permisos insuficientes, por las dudas dejo tambien lo que tengo de reglas en Firestore:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
function userBelongsToChat(chat) {
return request.auth.token.email in get(/databases/$(database)/documents/chats-
private/$(chat)).data.users
}
match /chat/{document=**} {
allow read, write: if
request.auth != null;
}
match /chats-private/{chat} {
allow read, write: if
request.auth.token.email in resource.data.users;
match /messages/{message} {
allow read, write: if
userBelongsToChat(chat);
}
}
match /users/{user} {
allow read: if
request.auth != null;
allow create, update: if
request.auth.token.email == resource.data.email;
}
}
}
No se ya si es por algo que escribí mal en el codigo (que no creo porque estoy usando el codigo del profe); o si configuré algo mal en Firebase; o algun problema de versiones de algo. Agradecería su ayuda. Muchas gracias.