堆栈内存溢出
  繁体   English   中英

使用 Firebase 向另一个用户发送消息

[英]Send messages to another user using Firebase

 原文  2022-09-26 00:49:03  2   1    javascript/ firebase/ firebase-realtime-database

问题描述

我正在尝试向另一个用户发送消息，并将它们保存在该聊天的特定文件夹下。 我现在遇到 function 的两个问题：每次发送新消息时，它都会覆盖之前发送的消息，并且控制台会发送此错误：

ReferenceError: onChildAdded 未定义

另外，当我向不同的用户发送新消息时，如何让不同的聊天框出现？

我在下面提供了我的 JavaScript 代码。

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Initialize variables
const database = firebase.database();
const auth = firebase.auth();

firebase.auth().onAuthStateChanged((user) => {
    if (user) {
        // ...
        submit.addEventListener('click', (e) => {
            var message = document.getElementById('message').value;

            firebase
                .database()
                .ref("/studiopick/studio/users/" + user.uid + "/messages")
                .set({
                    message: message


                });
            document.getElementById('message').value = "";
            alert('message has sent');
        });

        const newMsg = database.ref(user.uid + 'messages/');
        onChildAdded(newMsg, (data) => {
            if (data.val().studioName != studioName) {
                var divData = '<div class="d-flex justify-content-start mb-4" id="fromDiv">\n' +
                    '                        <div class="img_cont_msg">\n' +
                    '                            <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"\n' +
                    '                                 class="rounded-circle user_img_msg">\n' +
                    '                        </div>\n' +
                    '                        <div class="msg_cotainer" >\n' +
                    '                            ' + data.val().message + '' +
                    '                            <span class="msg_time"></span>\n' +
                    '                        </div>\n' +
                    '                    </div>';
                var d1 = document.getElementById('bodyContent');
                d1.insertAdjacentHTML('beforebegin', divData);
            } else {
                var divData = '<div class="d-flex justify-content-end mb-4">\n' + '<div class="msg_cotainer_send" id="sendDiv">\n' + '' + data.val().message + '' + '<span class="msg_time_send">8:55 AM, Today</span>\n' + '</div>\n' + '<div class="img_cont_msg">\n' + 'class="rounded-circle user_img_msg">\n' + '</div>\n' + '</div>';

                var d1 = document.getElementById('bodyContent');
                d1.insertAdjacentHTML('beforebegin', divData);
            }
        });



    } else {
        window.location.href = "login.html?error";
        alert("No active user please sign or sign up.");
    }
});

$(document).ready(function () {
    $('#action_menu_btn').click(function () {
        $('.action_menu').toggle();
    });
});

body, html {
    height: 100%;
    margin: 0;
    background: #ffffff;
}

.chat {
    margin-top: auto;
    margin-bottom: auto;
}

.card {
    height: 500px;
    border-radius: 15px !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
}

.contacts_body {
    padding: 0.75rem 0 !important;
    overflow-y: auto;
    white-space: nowrap;
}

.msg_card_body {
    overflow-y: auto;
}

.card-header {
    border-radius: 15px 15px 0 0 !important;
    border-bottom: 0 !important;
}

.card-footer {
    border-radius: 0 0 15px 15px !important;
    border-top: 0 !important;
}

.container {
    align-content: center;
}

.search {
    border-radius: 15px 0 0 15px !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 0 !important;
    color: white !important;
}

.search:focus {
    box-shadow: none !important;
    outline: 0px !important;
}

.type_msg {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 0 !important;
    color: white !important;
    height: 60px !important;
    overflow-y: auto;
}

.type_msg:focus {
    box-shadow: none !important;
    outline: 0px !important;
}

.attach_btn {
    border-radius: 15px 0 0 15px !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 0 !important;
    color: white !important;
    cursor: pointer;
}

.send_btn {
    border-radius: 0 15px 15px 0 !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 0 !important;
    color: white !important;
    cursor: pointer;
}

.search_btn {
    border-radius: 0 15px 15px 0 !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 0 !important;
    color: white !important;
    cursor: pointer;
}

.contacts {
    list-style: none;
    padding: 0;
}

.contacts li {
    width: 100% !important;
    padding: 5px 10px;
    margin-bottom: 15px !important;
}

.active {
    background-color: rgba(0, 0, 0, 0.3);
}

.user_img {
    height: 70px;
    width: 70px;
    border: 1.5px solid #f5f6fa;

}

.user_img_msg {
    height: 40px;
    width: 40px;
    border: 1.5px solid #f5f6fa;

}

.img_cont {
    position: relative;
    height: 70px;
    width: 70px;
}

.img_cont_msg {
    height: 40px;
    width: 40px;
}

.online_icon {
    position: absolute;
    height: 15px;
    width: 15px;
    background-color: #4cd137;
    border-radius: 50%;
    bottom: 0.2em;
    right: 0.4em;
    border: 1.5px solid white;
}

.offline {
    background-color: #c23616 !important;
}

.user_info {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 15px;
}

.user_info span {
    font-size: 20px;
    color: white;
}

.user_info p {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
}

.msg_cotainer {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 10px;
    border-radius: 25px;
    background-color: #82ccdd;
    padding: 10px;
    position: relative;
}

.msg_cotainer_send {
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 10px;
    border-radius: 25px;
    background-color: #78e08f;
    padding: 10px;
    position: relative;
}

.msg_time {
    position: absolute;
    left: 0;
    bottom: -15px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
}

.msg_time_send {
    position: absolute;
    right: 0;
    bottom: -15px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
}

.msg_head {
    position: relative;
}

#action_menu_btn {
    position: absolute;
    right: 10px;
    top: 10px;
    color: white;
    cursor: pointer;
    font-size: 20px;
}

.action_menu {
    z-index: 1;
    position: absolute;
    padding: 15px 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 15px;
    top: 30px;
    right: 15px;
    display: none;
}

.action_menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.action_menu ul li {
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 5px;
}

.action_menu ul li i {
    padding-right: 10px;

}

.action_menu ul li:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.2);
}

@media (max-width: 576px) {
    .contacts_card {
        margin-bottom: 15px !important;
    }
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<!DOCTYPE html>
<html>
<head>
    <title>Chat</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
          integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
    <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script>
            <link rel="stylesheet" href="CSS/testpage.css">
</head>

<!--Coded With Love By Mutiullah Samim-->
<body>
<div class="container-fluid h-100">
    <div class="row justify-content-center h-100">
        <div class="col-md-4 col-xl-3 chat">
            <div class="card mb-sm-3 mb-md-0 contacts_card">
                <div class="card-header">
                    <div class="input-group">
                        <input type="text" placeholder="Search..." name="" class="form-control search">
                        <div class="input-group-prepend">
                            <span class="input-group-text search_btn"><i class="fas fa-search"></i></span>
                        </div>
                    </div>
                </div>
                <div class="card-body contacts_body">
                    <ui class="contacts">
                        <li class="active">
                            <div class="d-flex bd-highlight">
                                <div class="img_cont">
                                    <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
                                         class="rounded-circle user_img">
                                    <span class="online_icon"></span>
                                </div>
                                <div class="user_info">
                                    <span>Tech</span>
                                    <p>Tech is online</p>
                                </div>
                            </div>
                        </li>
                    </ui>
                </div>
                <div class="card-footer"></div>
            </div>
        </div>
        <div class="col-md-8 col-xl-6 chat">
            <div class="card">
                <div class="card-header msg_head">
                    <div class="d-flex bd-highlight">
                        <div class="img_cont">
                            <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
                                 class="rounded-circle user_img">
                            <span class="online_icon"></span>
                        </div>
                        <div class="user_info">
                            <span>Chat with InfoTech</span>
                            <p>1767 Messages</p>
                        </div>

                    </div>
                    <span id="action_menu_btn"><i class="fas fa-ellipsis-v"></i></span>
                    <div class="action_menu">
                        <ul>
                            <li><i class="fas fa-user-circle"></i> View profile</li>
                            <li><i class="fas fa-users"></i> Add to close friends</li>
                            <li><i class="fas fa-plus"></i> Add to group</li>
                            <li><i class="fas fa-ban"></i> Block</li>
                        </ul>
                    </div>
                </div>
                <div class="card-body msg_card_body" id="bodyContent">


                </div>
                <div class="card-footer">
                    <div class="input-group">
                        <div class="input-group-append">
                            <span class="input-group-text attach_btn"><i class="fas fa-paperclip"></i></span>
                        </div>
                        <textarea name="message" id="message" class="form-control type_msg"
                                  placeholder="Type your message..."></textarea>
                        <div class="input-group-append">
                            <button id="submit" class="input-group-text send_btn">
                                <i class="fas fa-location-arrow"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>


<script src="Javascript/testpage.js" type="module"></script>
</body>
</html>

1 个解决方案

解决方案1
 0  2022-10-02 13:27:50

onChildAdded() function 是新模块 SDK的一部分，但似乎您使用的是较旧的命名空间版本，您需要在其中使用.on()方法。 尝试重构代码，如下所示：

const newMsg = database.ref(user.uid + 'messages/');

newMsg.on("child_added", (data) => {
  console.log(data.val())
  // ...
})

确保您指的是文档中的命名空间选项卡。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 当用户使用 firebase 云功能有未读消息/通知时，是否可以向用户发送 email 摘要？ 如何使用 http POST 方法将当前用户（使用应用程序的人）Firebase Id 令牌从 Flutter 应用程序发送到 restapi？ 如何使用 firebase 在 android 中的通知中发送图像？ 在 Swift 中向新的 Firebase 用户发送电子邮件验证电子邮件 使用 Firebase web 的用户信息显示错误 使用 Firebase Stream 作为 Flutter 中另一个 Stream 的输入？ FireBase - 使用用户身份验证时更新字段 iOS Firebase 推送通知：如何提供 Firebase 用户的设备令牌并发送通知 在反应中使用 firebase 检查用户是否登录 如何使用 firebase flutter 显示特定用户的未读消息数，如图所示
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM