如何使用 React 和 Firebase 创建聊天室？

Question

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

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 数据库也能正常工作了。

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

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

Answer 1

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

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

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

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

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

如何使用 React 和 Firebase 创建聊天室？

How to make a Chat room with react and firebase?

chat

firebase

reactjs

expo

google-cloud-firestore