已读和未读消息功能

Question

我正在尝试在我的聊天应用程序中创建已读和未读消息功能。

到目前为止，我只能创建未读，这意味着当我将消息发送到 firebase 集合时，我取消了我的 READ 属性字段为FALSE，

我很困惑如果第二个用户检查聊天室，他将如何将“READ: TRUE”的值更改回来，如果第二个用户当前在聊天室中，他仍然应该更改 READ: true。

这是我发送的消息数据：

    sender_id:12233,
    reciever_id: 6767,
    message:'hello please help',
    read: false,

这是我的代码

StreamBuilder(
                      stream: firestore
                          .collection('chat')
                          .doc(widget.peerid)
                          .collection('Messages')
                          .snapshots(),
                      builder: (context, snapshot) {
                        if (snapshot.hasData) {
                          return Center(
                            child: CircularProgressIndicator(),
                          );
                        }
                        if (snapshot.data.docs.isEmpty) {
                          return Center(
                            child: Column(
                              children: [
                                Container(
                                  child: Icon(
                                    FontAwesomeIcons.comments,
                                    size: 40,
                                  ),
                                ),
                                Text(
                                  'Say Hello',
                                  style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                    fontSize: 15,
                                  ),
                                )
                              ],
                            ),
                          );
                        }
                        return ListView.builder(
                            shrinkWrap: true,
                            itemCount: snapshot.data.docs.length,
                            itemBuilder: (context, index) {
                              final authid =
                                  snapshot.data.docs[index].data()['idFrom'];
                              final msg =
                                  snapshot.data.docs[index].data()['content'];
                              bool check =
                                  authid == auth.currentUser.uid ? true : false;
                              return Padding(
                                padding: EdgeInsets.symmetric(
                                  horizontal: 15,
                                  vertical: 10,
                                ),
                                child: Column(
                                  crossAxisAlignment: check
                                      ? CrossAxisAlignment.end
                                      : CrossAxisAlignment.start,
                                  children: [
                                    Container(
                                      padding: EdgeInsets.all(10),
                                      decoration: BoxDecoration(
                                        color: check
                                            ? Colors.indigo
                                            : Colors.white,
                                        borderRadius: check
                                            ? BorderRadius.only(
                                                bottomLeft: Radius.circular(30),
                                                topLeft: Radius.circular(30),
                                                topRight: Radius.circular(30),
                                              )
                                            : BorderRadius.only(
                                                bottomRight:
                                                    Radius.circular(30),
                                                topLeft: Radius.circular(30),
                                                topRight: Radius.circular(30),
                                              ),
                                      ),
                                      child: ConstrainedBox(
                                        constraints:
                                            BoxConstraints(maxWidth: 150),
                                        child: Column(
                                          children: [
                                            Text(
                                              msg,
                                              style: GoogleFonts.raleway(
                                                textStyle: TextStyle(
                                                  color: check
                                                      ? Colors.white
                                                      : Colors.black,
                                                ),
                                              ),
                                            ),
                                            Text('')
                                          ],
                                        ),
                                      ),
                                    )
                                  ],
                                ),
                              );
                            });
                      }),
                ),
              ),
              Container(
                height: Platform.isIOS ? 95 : 80,
                padding: EdgeInsets.only(top: 8.0),
                decoration: BoxDecoration(
                  borderRadius:
                      BorderRadius.only(topRight: Radius.circular(70)),
                  color: Theme.of(context).backgroundColor,
                ),
                child: ListTile(
                  leading: Icon(
                    Icons.add,
                    color: Theme.of(context).primaryColor,
                  ),
                  title: TextFormField(
                    controller: messagesController,
                    onChanged: (value) {
                      messagesController.text = value;
                    },
                    decoration: InputDecoration(
                      hintText: 'Enter your messgae here...',
                      border: InputBorder.none,
                    ),
                    maxLines: null,
                  ),
                  trailing: messagesController.text.trim() == null
                      ? Container(
                          width: 40,
                          height: 45,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            gradient: LinearGradient(
                              begin: Alignment.topRight,
                              end: Alignment.bottomLeft,
                              colors: [
                                Constants.color1,
                                Constants.color2,
                              ],
                            ),
                          ),
                          child: GestureDetector(
                            onTap: () async {
                              await ControllerApi().sendMessage(
                                content: messagesController.text.trim(),
                                chatID: widget.peerid,
                                messageType: 'text',
                                myID: auth.currentUser.uid,
                                selectedUserID: widget.userid,
                              );
                            },
                            child: Icon(
                              Icons.send,
                              size: 20,
                              color: Colors.white,
                            ),
                          ),
                        )
                      : Container(),
                ),
              )
            ],

谢谢。

Answer 1

使用这个颤振库 visibility_detector

请看下面的代码，它将帮助您实现已读和未读消息。

@override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemBuilder: (ctx, index) {
        ChatModel chatModel =
            ChatModel.fromJson(snapshot.data.docs[index].data());
        switch (chatModel.messageType) {
          case MessageType.TEXT:
            {
              return VisibilityDetector(
                key: Key(snapshot.data.docs[index].id),
                onVisibilityChanged: (VisibilityInfo visibilityInfo) {
                  var visiblePercentage = visibilityInfo.visibleFraction * 100;
                  if (visiblePercentage == 100 &&
                      !chatModel.isSeen &&
                      chatModel.sender != userController.userModel.value.uid) {
                    FirebaseFirestore.instance
                        .collection(FirebaseKeys.chatRoom)
                        .doc(AppHelper.getChatID(
                            userController.userModel.value.uid, userModel.uid))
                        .collection(FirebaseKeys.messages)
                        .doc(snapshot.data.docs[index].id)
                        .update({
                      "isSeen": true,
                    });
                  }
                },
                child:
                    TextMessage(chatModel, snapshot.data.docs[index].reference),
              );
            }
          case MessageType.GIF:
            {
              return GifMessage(chatModel, userModel.uid);
            }
          case MessageType.IMAGE:
            {
              return ImageMessage(snapshot.data.docs[index].reference,
                  chatModel, userModel.uid);
            }
          case MessageType.AUDIO:
            {
              break;
            }
          case MessageType.VIDEO:
            {
              break;
            }
          case MessageType.PDF:
            {
              break;
            }
          case MessageType.FILE:
            {
              break;
            }
          case MessageType.OTHER:
            {
              break;
            }
        }
        return FlutterLogo();
      },
      shrinkWrap: true,
      itemCount: snapshot.data.docs.length,
      controller: scrollController,
      reverse: true,
      physics: ClampingScrollPhysics(),
      separatorBuilder: (BuildContext context, int index) {
        return Container(
          height: 5,
          margin: EdgeInsets.only(top: 2, bottom: 2),
        );
      },
    );
  }

Answer 2

让我们编写一个函数，将对手的消息标记为已读。

Future<void> seeMsg(int peerId) async{
     final query = await FirebaseFirestore.instance
        .collection('chat')
        .doc(peerId)
        .collection('Messages')
        .where('sender_id', isEqualTo: peerId)
        .where('read', isEqualTo: false)
        .get();

    query.docs.forEach((doc) {
      doc.reference.update({'read': true});
    });
}

然后，在StreamBuilder body 中调用这个函数。 每次，此聊天集合中都会生成一条新消息，此函数会检查来自您的同伴的未读消息并将其标记为已读。

Answer 3

在您的聊天应用程序中，当您向用户加载消息时，假设您已经加载了消息并拥有List<Message> messages。 假设您使用ListView.builder 显示消息：

return ListView.builder(
                shrinkWrap: true,
                controller: _controller,
                reverse: true,
                itemCount: messages.length,
                itemBuilder: (context, index) {
                  final message = messages[index];
                  // We check if message is new (dont know your entity so lets say it has boolean `read`, that false when new.
                  final bool isNew = !message.read;
                  // Given that you store your fire id in myId variable we check if message is received and not sent.
                  final bool toMe = message.recieverId == myId;
                  // Check that we need to mark message as read
                  if (isNew && toMe) {
                    return FutureBuilder<void>(
                        future: markAsRead(), // markAsRead is a Future function to change your FIELD value in firestore.
                         builder: (context, snapshot) {
                          if (snapshot.connectionState ==
                              ConnectionState.done) {
                            return YourMessageWidgetThatWasSeen()
                            }
                            return YourMessageWidgetThatWasNotSeen();}); //FutureBuilder ends here.
                  return MessageBubble(); // or this message is already seen by user and we return message bubble like usually do.

markAsRead() 函数的实现取决于数据库的结构，例如，当您的每个用户都有自己的消息集合要存储时，并且如果您有一个用于显示最后一条消息的对话框预览的集合，您将需要创建一个包含 4 个更新操作的批处理。