使用 Firestore 显示徽章通知答案

【问题标题】：Show a badge notification with Firestore使用 Firestore 显示徽章通知
【发布时间】：2021-02-16 02:08:16
【问题描述】：

您好，我正在使用 Firestore 创建一个聊天应用。我看到了很多关于使用云消息创建徽章通知的信息，但没有看到很多关于创建没有云消息的徽章通知的信息。有谁知道如何做到这一点？当用户收到他们尚未阅读的消息时，我试图在图标上显示一个点。如果我能知道他们还没有读过的消息的总数，那就更好了。

Firestore 结构

 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

在聊天室集合中获取和发送消息

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 = '';
},

【问题讨论】：

我认为您需要在邮件上添加一个附加属性，说明收件人是否阅读了邮件。由前端决定何时读取。
我认为我需要它，但我还没有决定如何确定是否有人阅读了一条消息。我遇到的最大问题是当有人在聊天室中并且发送了一条新消息时。我不确定如何判断该消息是否已被阅读。你有什么想法吗？
您可以使用 Intersection Observer 来确定消息是否已进入收件人的视口，然后在 Firestore 中更新消息，标记为例如readByUsers:[user1]?或类似的东西
@Alex 你能分享你已有的用于显示新消息的代码吗？
@John 这听起来很酷。我将研究交叉路口观察员。感谢您的帮助

标签： javascript firebase vue.js google-cloud-firestore

【解决方案1】：

正如@John 所提到的，一个更好的选择是在您的对象中添加一个额外的字段来告诉您消息是否已被阅读，并且可以通过像这样对您进行一些简单的更改来完成getMessages():

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()
          });
        }
     });
  });
}

您可以使用 isNew 来显示或不显示 newMessage 图标，并在阅读消息时更改它的值，您可以使用 Intersection Observer 将以下内容添加到您的代码中：

//options to your 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;
    });
};

在此示例中，YOUR_ROOT_ELEMENT_HERE 将是您元素的父元素，我假设在这种情况下它可能是一个 Scroll 而YOUR_TARGET_ELEMENT_HERE 将是未读消息。当交叉点发生时，所有消息都将被标记为已读，但您可以根据需要优化该逻辑。

【讨论】：