Question

我想在我的应用程序中添加聊天功能，但是问题是在使用react-native-gifted-chat和firebase作为后端及其安全规则时，该错误给出了_id和用户缺失的错误。

我尝试使用Firebase数据库且未使用安全规则，但问题是它看起来像是群聊，而不是一对一（私人）聊天。

    async UNSAFE_componentWillMount() {

        const name = auth().currentUser.displayName;

        const friendName = this.state.friendName;

        this.setState({ name: name });

        const ref = await database().ref(`chatmessages/`);

        // Fetch the data snapshot
        const snapshot = await ref.once('value');

        console.log(snapshot, "Snapshot")

        console.log(ref, "database");
    }

    componentDidMount() {
        this.on(message => {
            console.log(this.state.messages, 'old message')
            this.setState(previousState => ({
                messages: GiftedChat.append(previousState.messages, message),
            })
            )
        });
    }
    componentWillUnmount() {
        this.off();
    }

    get uid() {
        return (auth().currentUser || {}).uid;
    }

    get ref() {
        return database().ref(`chatmessages/`)
        // .set();
    }

    parse = async snapshot => {
        const data = snapshot.val();

        const userID = auth().currentUser.uid;
        const friendID = this.state.friendID;
        const validate = data.friend === friendID && data.user._id === userID ||
            data.user._id === friendID && data.friend === userID;

        console.log(data.user, data.user._id, data.user.name, "MEssage Data")

        if (validate) {

            const { timestamp: numberStamp, text, user, friend } = await data;

            const { key: _id } = snapshot;
            console.log(_id, user,'Firebase Message Id')
            const timestamp = new Date(numberStamp);
            const message = {
                _id,
                timestamp,
                text,
                user: data.user,
                friend
            };
            console.log(message, "Gifted")
            return message;
       }
    };

    on = callback =>
        this.ref
            .limitToLast(20)
            .on('child_added', snapshot => callback(this.parse(snapshot)));

    get timestamp() {
        return firebase.database.ServerValue.TIMESTAMP;
    }

    // send the message to the Backend
    send = messages => {

        for (let i = 0; i < messages.length; i++) {
            const { text, user } = messages[i];
            const message = {
                text,
                user,
                friend: this.state.friendID,
                timestamp: this.timestamp,
            };

            this.append(message);
        }
    };

    append = message => this.ref.push(message);

    // close the connection to the Backend
    off() {
        this.ref.off();
    }
    get user() {
        return {
            name: auth().currentUser.displayName,
            _id: this.uid
        };
    }

    render() {

                <GiftedChat
                    text={this.state.text}
                    onInputTextChanged={text => this.setState({ text: text })}
                    messages={this.state.messages}
                    isAnimated
                    onSend={messages => this.send(messages)}
                    user={this.user}
                    renderActions={this.renderCustomActions}
                />
                );
    }
}

我想要使用firebase创建一个一对一的聊天，并进行react-native-gifted-chat

Answer 1

除了将其限制为两个人之外，其他基本相同。本文详细介绍了如何处理一对一聊天https://medium.com/@edisondevadoss/react-native-chat-using-firebase-d4c0ef1ab0b5

如何使用fire-base作为后端在React Native中构建一个一对一（私有）聊天应用程序？

1 个答案: