FireChat Technical Documentation

FireChat is a robust real-time chat application designed for secure, fast, and interactive messaging. This documentation outlines the core functionalities, architecture, and code snippets for developers to understand how FireChat operates under the hood.

---

Message Handling System

Send Message Logic

The sendMessage function handles sending messages to the database and triggering real-time notifications via Firebase Cloud Messaging (FCM).

const sendMessage = async (chatId, message, type = 'text') => {
  const messageData = {
    chatId,
    senderId: currentUser.uid,
    text: message,
    type,
    timestamp: serverTimestamp(),
    status: 'sent'
  };

  // Add to Firestore
  const docRef = await addDoc(collection(db, "messages"), messageData);

  // Trigger FCM notification
  await triggerNotification(chatId, messageData);

  return docRef.id;
};

---

Firebase Cloud Messaging (FCM) Server Integration

To ensure users receive push notifications, FireChat integrates FCM for sending notifications to multiple devices simultaneously.

const sendFCMNotification = async (tokens, data) => {
  const message = {
    notification: {
      title: data.title,
      body: data.body
    },
    data: {
      chatId: data.chatId,
      type: data.type
    },
    tokens: tokens
  };

  return await admin.messaging().sendMulticast(message);
};

---

Real-Time Updates

Message Listener

The setupMessageListener function listens for real-time updates in a chat, ensuring users receive new messages instantly.

const setupMessageListener = (chatId) => {
  const q = query(
    collection(db, "messages"),
    where("chatId", "==", chatId),
    orderBy("timestamp", "desc"),
    limit(50)
  );

  return onSnapshot(q, (snapshot) => {
    snapshot.docChanges().forEach((change) => {
      if (change.type === "added") {
        handleNewMessage(change.doc.data());
      }
    });
  });
};

---

User Status Tracking

To show accurate user availability, FireChat tracks user status in real-time.

const updateUserStatus = async (status) => {
  const userStatusRef = doc(db, "users", currentUser.uid);

  await setDoc(userStatusRef, {
    status,
    lastSeen: serverTimestamp()
  }, { merge: true });
};

---

Media Handling

File Upload System

Uploading media in chats is handled with Firebase Storage.

const uploadChatMedia = async (file, chatId) => {
  const storageRef = ref(storage, `chats/${chatId}/${Date.now()}_${file.name}`);

  const uploadTask = uploadBytesResumable(storageRef, file);

  uploadTask.on('state_changed', (snapshot) => {
    const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    updateUploadProgress(progress);
  });

  const downloadURL = await getDownloadURL(storageRef);
  return downloadURL;
};

---

Group Chat Management

Create Group

FireChat supports private groups with member management capabilities.

const createGroup = async (groupData) => {
  const groupRef = await addDoc(collection(db, "groups"), {
    name: groupData.name,
    description: groupData.description,
    creator: currentUser.uid,
    members: [currentUser.uid],
    admins: [currentUser.uid],
    created: serverTimestamp(),
    photoURL: groupData.photoURL || null
  });

  return groupRef.id;
};

---

Message Encryption

End-to-End Encryption

Messages are encrypted for secure communication using RSA-OAEP.

const encryptMessage = async (message, recipientPublicKey) => {
  const encryptedData = await window.crypto.subtle.encrypt(
    {
      name: "RSA-OAEP"
    },
    recipientPublicKey,
    new TextEncoder().encode(message)
  );

  return arrayBufferToBase64(encryptedData);
};

---

Notification System

Push Notification Handler

FireChat uses browser notifications to alert users of new messages.

const handlePushNotification = async (message) => {
  if (!("Notification" in window)) return;

  const permission = await Notification.requestPermission();

  if (permission === "granted") {
    const notification = new Notification(message.title, {
      body: message.body,
      icon: message.icon,
      tag: message.chatId
    });

    notification.onclick = () => {
      window.focus();
      navigateToChat(message.chatId);
    };
  }
};

---

Data Syncing

Offline Support

FireChat ensures usability during network interruptions by enabling offline persistence.

const enableOfflineSupport = () => {
  enableNetwork(db).then(() => {
    enablePersistence(db, {
      synchronizeTabs: true
    }).catch((err) => {
      if (err.code == 'failed-precondition') {
        // Multiple tabs open
      } else if (err.code == 'unimplemented') {
        // Browser doesn't support persistence
      }
    });
  });
};

---

Performance Optimizations

Message Pagination

Efficiently load large chat histories with message pagination.

const fetchMoreMessages = async (chatId, lastMessageId, limit = 25) => {
  const lastMessageDoc = await getDoc(doc(db, "messages", lastMessageId));

  const messages = await getDocs(
    query(
      collection(db, "messages"),
      where("chatId", "==", chatId),
      orderBy("timestamp", "desc"),
      startAfter(lastMessageDoc),
      limit(limit)
    )
  );

  return messages.docs.map(doc => ({
    id: doc.id,
    ...doc.data()
  }));
};

---

Best Practices

1. Error Handling: Handle errors gracefully.
2. Security: Use proper encryption and secure APIs.
3. Optimization: Use pagination for heavy data loads.
4. Notifications: Implement fallback mechanisms for notifications.
5. Documentation: Ensure proper code documentation for maintainability.

This documentation provides a solid foundation for developers to understand and extend FireChat’s functionality. With these robust systems in place, FireChat ensures a secure, efficient, and feature-rich chat experience.

FireChat Webiste -Click here