如何使聊天室与反应和火力基础？

Question

我正在与博览，反应，火基和材料用户界面工作，我制作了一个社交媒体应用程序，现在我试图在我的应用程序中建立一个聊天室。我找到了一些有趣的文章、教程和文档，并让这段代码工作起来。

Chat.js

 import React, { useState, useEffect, useRef } from 'react'
    import { db, auth } from '../firebase'
    import SendMessages from './SendMessages'
    
        function Chat() {
            const scroll = useRef()
            const [messages, setMessages] = useState([])
            useEffect(() => {
                db.collection('messages').orderBy('createdAt').limit(50).onSnapshot(snapshot => {
                    setMessages(snapshot.docs.map(doc => doc.data()))
                })
            }, [])
            return (
                <div>
                    <div className="msgs">
                        {messages.map(({ id, text, photoURL, uid }) => (
                            <div>
                                <div key={id} className={`msg ${uid === auth.currentUser.uid ? 'sent' : 'received'}`}>
                                    <img src={photoURL} alt="" />
                                    <p>{text}</p>
                                </div>
                            </div>
                        ))}
                    </div>
                    <SendMessages scroll={scroll} />
                    <div ref={scroll}></div>
                </div>
            )
        }
        
        export default Chat

SendMessages.js

import React, { useState, useEffect, useRef } from 'react'
import { db, auth } from '../firebase'
import SendMessages from './SendMessages'

function Chat() {
    const scroll = useRef()
    const [messages, setMessages] = useState([])
    useEffect(() => {
        db.collection('messages').orderBy('createdAt').limit(50).onSnapshot(snapshot => {
            setMessages(snapshot.docs.map(doc => doc.data()))
        })
    }, [])
    return (
        <div>
            <div className="msgs">
                {messages.map(({ id, text, photoURL, uid }) => (
                    <div>
                        <div key={id} className={`msg ${uid === auth.currentUser.uid ? 'sent' : 'received'}`}>
                            <img src={photoURL} alt="" />
                            <p>{text}</p>
                        </div>
                    </div>
                ))}
            </div>
            <SendMessages scroll={scroll} />
            <div ref={scroll}></div>
        </div>
    )
}

export default Chat

现在我可以从我的配置文件中写入消息，Firebase DB也在工作。

但是现在我想知道如何才能让所有的用户都能互相写信呢？我想让它有点像Instagram聊天室，你点击聊天按钮，你看到其他用户，你点击他们，你写他们。

我希望你明白我的意思，哈哈:)

Answer 1

一个常见的建模方法是，让每个聊天室都成为自己的文档，然后将该聊天室的消息存储在子集合中。

因此，在数据结构中，如下所示：

ChatRooms (collection)
  ChatRoom1 (document)
    Messages (collection)
      ...
  ChatRoom2 (document)
    Messages (collection)
      ...  

现在您有两个聊天室，每个聊天室都有自己的消息子集合。在聊天室文档中，您通常会存储更多有关该聊天室的全局信息，例如该聊天室的用户、该聊天室的名称，以及例如最近发送给该聊天室的消息的文本和时间戳。

尽管有更多的方法来建模，所以我建议从这个(或者任何您认为合理的模型)开始，然后在扩展用例时对其进行调整。