Display a notification badge using Firestore

Question

Display a notification badge using Firestore

Hey there! I am currently developing a chat application using Firestore. While researching, I found plenty of information on creating badge notifications with cloud messaging, but not much without it. Can anyone help me out with this? I want to display a notification dot on an icon when a user receives an unread message. It would be great if I could also show the total number of unread messages.

Firestore Data Structure

 users
      |
      ---- chatList (subcollection)
              ---- chatFrom: user1_Id
              ---- chatWith: user2_Id
              ---- chatRoomId: smallerUserID_biggerUserID
chatRooms
      |
      ---- smallerUserID_biggerUserID (subcollection)
              ---- content: "Hello"
              ---- id: 1613422354427
              ---- idFrom: user1_Id
              ---- timestamp: 1613422354427

Fetching and Sending Messages in chatRooms Collection

getMessages() {
  this.listMessage = []; 
  
  db.collection('chatRooms').doc(this.chatRoomId).collection(this.chatRoomId)
    .onSnapshot((snapshot) => {
      snapshot.docChanges().forEach((change) => {
        if (change.type === 'added') {
          this.listMessage.push(change.doc.data());
        }
     });
  });
},

async sendMessage(content) {
  if (content.trim() === '') { return }
  
  const timestamp = moment().valueOf().toString();
  const idFrom = this.authUser.userId;
  const idTo = this.currentPeerUser.userId;
  const message = { id: timestamp, idFrom, idTo, timestamp, content };

  const chatRoomRef = db.collection('chatRooms').doc(this.chatRoomId)
                        .collection(this.chatRoomId).doc(timestamp);
  await chatRoomRef.set(message);

  this.inputValue = '';
},

javascript firebase vue.js google-cloud-firestore

Answer 1

Answer №1

After considering @John's suggestion, a more effective approach would involve adding an additional field to your objects indicating whether the message has been read or not. You can implement this through some simple adjustments to your getMessages() function like so:

getMessages() {
  this.listMessage = []; 
  
  db.collection('chatRooms').doc(this.chatRoomId).collection(this.chatRoomId)
    .onSnapshot((snapshot) => {
      snapshot.docChanges().forEach((change) => {
        if (change.type === 'added') {
          this.listMessage.push({
              isNew: true,
              message: change.doc.data()
          });
        }
     });
  });
}

The use of the isNew field allows you to display a new message icon based on its value. To update this value once the message is read, you can utilize the Intersection Observer by following these steps:

//options for the observer
let options = {
  root: document.querySelector('#YOUR_ROOT_ELEMENT_HERE'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

let target = document.querySelector('#YOUR_TARGET_ELEMENT_HERE');
observer.observe(target);

let callback = (entries, observer) => {
    this.listMessage.forEach(function(messageItem) {
        messageItem.isNew = false;
    });
};

In this scenario, replace YOUR_ROOT_ELEMENT_HERE with the parent element and YOUR_TARGET_ELEMENT_HERE with the unread message. When the intersection occurs, all messages will be marked as read, but feel free to customize this logic according to your requirements.

Answer 2

After considering @John's suggestion, a more effective approach would involve adding an additional field to your objects indicating whether the message has been read or not. You can implement this through some simple adjustments to your getMessages() function like so:

getMessages() {
  this.listMessage = []; 
  
  db.collection('chatRooms').doc(this.chatRoomId).collection(this.chatRoomId)
    .onSnapshot((snapshot) => {
      snapshot.docChanges().forEach((change) => {
        if (change.type === 'added') {
          this.listMessage.push({
              isNew: true,
              message: change.doc.data()
          });
        }
     });
  });
}

The use of the isNew field allows you to display a new message icon based on its value. To update this value once the message is read, you can utilize the Intersection Observer by following these steps:

//options for the observer
let options = {
  root: document.querySelector('#YOUR_ROOT_ELEMENT_HERE'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

let target = document.querySelector('#YOUR_TARGET_ELEMENT_HERE');
observer.observe(target);

let callback = (entries, observer) => {
    this.listMessage.forEach(function(messageItem) {
        messageItem.isNew = false;
    });
};

In this scenario, replace YOUR_ROOT_ELEMENT_HERE with the parent element and YOUR_TARGET_ELEMENT_HERE with the unread message. When the intersection occurs, all messages will be marked as read, but feel free to customize this logic according to your requirements.

Display a notification badge using Firestore

Answer №1

Similar questions

What is the correct way to chain Promises for the tasks of creating a new user and hashing their password simultaneously?

Tips for invoking a function to automatically load elements on a jQuery mobile website

substitute a component with a different one if it is present

Require assistance with a hidden file upload element using Webdriver and JavaScript

Is there a way to use jQuery to enable multiple checkboxes without assigning individual IDs to each one?

How can I filter out strings and only keep the numbers in an array using JavaScript?

The Render function in ReactJS is not getting refreshed

Utilizing React to create an infinite loop, where an onClick event triggers an image change that updates the source of

How can you ensure the dynamic search parameter is accurately configured within the URL?

An error in Typescript is indicating that a semicolon is expected. The identifier 'EventNameString' is currently being used as a value, even though it only refers to a type

What is the reason behind the absence of unwrapping when utilizing a ref as an element within a reactive array or reactive Map?

- Utilize bullet points to exhibit keywords within a D3.js div by appending them

What is the best way to position a tooltip near an element for optimal visibility?

Find keys in an array based on a specified value

The grpc client is not able to receive the data being streamed from the

Node.js JSON parser encountering an unexpected undefined error

Dynamically defined type literals in Typescript

jQuery problem: Unable to access a property that is undefined

What is the reason for the directive being available in $rootScope?

Using an if statement to run a script in Npm