0

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:

introducir la descripción de la imagen aquí

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.

0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies