如何使用 react 和 firebase 创建聊天室？

Posted 2023-02-19

【中文标题】如何使用 react 和 firebase 创建聊天室？

【英文标题】：How to make a Chat room with react and firebase?

【发布时间】：2021-11-04 10:56:02

【问题描述】：

我正在使用 Expo、React、Firebase 和 Material UI，我制作了一个社交媒体应用程序，现在我正在尝试在我的应用程序中创建一个聊天室。我找到了一些有趣的文章、教程和文档，并让这段代码工作。

聊天.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  />
                                    <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  />
                            <p>text</p>
                        </div>
                    </div>
                ))
            </div>
            <SendMessages scroll=scroll />
            <div ref=scroll></div>
        </div>
    )


export default Chat

现在我可以从我的个人资料中写入消息，并且 Firebase 数据库也在工作。

但现在我想知道如何让所有用户互相写作？ 我想让它像 Instagram 聊天室一样，你点击聊天按钮，你会看到其他用户，你点击他们，你写他们。

我希望你知道我的意思哈哈:)

【问题讨论】：

嘿，是的，您的回答很有帮助。我确定我点击了复选标记，但显然我错了。对不起，谢谢！ :)

【参考方案1】：

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

所以在一个看起来像这样的数据结构中：

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

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

虽然有很多方法可以对此进行建模，所以我建议从这个（或您认为合理的任何模型）开始，然后在您扩展用例时对其进行调整。