【问题标题】:Creating Group Chat Feature创建群聊功能
【发布时间】:2023-01-11 14:57:24
【问题描述】:

我现在对这个问题感到震惊,所以我来寻求帮助。我正在创建一个具有群聊功能的私人消息传递应用程序。我正在使用 firebase 7.14.0(是的,我知道那很旧)当你点击我的应用程序中的联系人时,你可以创建一个群聊,这将创建另一个只有你在其中的聊天(我知道它不是最佳的我只是想获得功能首先工作)然后在该聊天中您可以将人员添加到聊天中。

这是我需要帮助的代码。

import React, { useEffect, useState, useCallback } from 'react';
import firebase from "../firebase"
import { NavLink } from 'react-router-dom';
import { Avatar } from '@material-ui/core';
import './Gccontact.css';

const Gccontact = props => {
    const [contact, setContact] = useState()
    const [conversation, setConversation] = useState()

    const getContact = useCallback(async () => {
        const id = props.contact
        const db = firebase.db
        const unsubscribe = db.collection("users").doc(id).onSnapshot(snapshot => {
            setContact(snapshot.data())
        })
        return unsubscribe
    },[props.contact])

    

    useEffect(() => {
        getContact()
 
    }, [props])

    const addtogroup = useCallback(async uid => {
        const members = [contact.uid];
        await firebase.db.collection("conversations").doc('x8DGIeBhW96ziGh0MEGf').update({ members });
    }, []);

   /* db.collection("users").doc(currentUser.uid).update({
        status
    }) */

    return (
      
            <li className="contact">
                {contact && <div className="wrap" onClick={addtogroup}>
                    <span className={`contact-status ${contact.status}`}></span>
                    <div className="img-container">
                        <Avatar src={contact.profilePicture} alt={contact.name + " Profile Picture"} />
                    </div>
                    <div style={{display: "inline-block"}} className="meta">
                        <p className="display-name">{contact.name}</p>
                        {props.recent && <p className="preview">
                            {props.recent?.sender === firebase?.auth?.currentUser?.uid && <span>You: </span>} 
                            {props.recent?.attachments?.length === 0 ? props.recent?.body : "Picture"}
                        </p>}
                    </div>
                </div>}
            </li> 
        
    );
}

export default Gccontact;

这是联系人文件,当您单击联系人时,我希望它将他们添加到群聊中。当我尝试将成员添加到组时,我收到一条错误消息,提示 contact.uid 未定义,因此我尝试了 contact.name,但仍然无效。至于

await firebase.db.collection("conversations").doc('x8DGIeBhW96ziGh0MEGf').update({ members });

去 我不知道如何获取每个人的文档 ID,所以我有一套只是为了测试。使用 .update 我注意到它摆脱了所有成员,只添加了一个已定义的成员。

【问题讨论】:

  • 有一个相关的post,其中包含有关如何在 Firestore 中实现聊天应用程序的指南。查看 Alex Mamo 的评论。

标签: javascript reactjs firebase google-cloud-firestore


【解决方案1】:

或者你可以使用第三方聊天 API 来避免很多麻烦。 我建议试试MinChat

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-15
    • 1970-01-01
    • 2015-01-15
    • 1970-01-01
    • 2012-02-20
    • 1970-01-01
    相关资源
    最近更新 更多