php 用jQuery实现个人消息系统的实时消息计数

kkih6yb8  于 2023-05-12  发布在  PHP
关注(0)|答案(2)|浏览(179)

我正在为我的网站创建一个个人信息系统。为此,我想实时显示和更新每个聊天中的新消息数量,类似于下面屏幕截图中显示的红色“框”:

目前,消息计数没有写在提供的div中,我不知道为什么。
下面是相关的HTML代码:

<div class="chat_body"> 
    <a href="index.php?section=pn&mode=loadConversation&ConversationID=<?php echo $conversation['id']; ?>">
        <div class="user" id='<?php echo $i ?>' data-user-id='<?php echo $user_id?>' data-conv-id='<?php echo $conversation['id'] ?>'>
            // Displaying the name, etc...
        <?php                   
            echo "<div class='rightCountUnreadMessages'>";
                /* Showing the actual counter */
                echo '<div class="badge" id="badge-'.$i.'"></div>';
            echo "</div>";
        ?>
        </div>
    </a>
</div>

jQuery函数,它应该确定每500ms新消息的数量:

jQuery(document).ready(function() {
    //jQuery(setInterval(function() {
        friends_count = document.getElementsByClassName("user").length;
        for(var i=1; i < friends_count+1; i++) {
            el = document.getElementById(i);
            conv_id = el.getAttribute("data-conv-id");
            user_id = el.getAttribute("data-user-id");
            test = i;

            jQuery.post('./Bauteile/Accounts/loadCounts/loadPNCount.php', {user_id_loadPN: user_id, conv_id: conv_id}, function(result){
                console.log(result);
                if(result > 99) result = "99+";

                if(result > 0 || result == "99+") {
                    document.getElementById("badge-"+test).innerHTML = result;
                }
            })
        }
    //}, 500));
});

并在Javascript中请求的文档中有以下内容:

<?php
    $conv_id = $_POST['conv_id'];
    $from_id = $_POST['user_id_loadPN'];

    echo (int)mysql_result(mysql_query("SELECT COUNT(*) FROM `messages` WHERE `group_id` = $chat_id AND `from_id` = $from_id AND `read_on` is NULL"), 0);
?>
a64a0gku

a64a0gku1#

问题是你的循环中有一些异步的东西。为了解决这个问题,你需要一个关闭。您需要将for循环的内容 Package 在一个以i为参数的函数中,然后在循环中调用该函数。
所以试试这样的方法:

function doClosure(i) {
    var el = document.getElementById(i),
        conv_id = el.getAttribute("data-conv-id"),
        user_id = el.getAttribute("data-user-id"),
        test = i;

    jQuery.post('./Bauteile/Accounts/loadCounts/loadPNCount.php', {user_id_loadPN: user_id, conv_id: conv_id}, function(result){
        console.log(result);
        console.log(test);

        if(result > 99) {
            result = "99+";
        }

        if(result > 0 || result == "99+") {
            document.getElementById("badge-"+test).innerHTML = result;
        }
    });
}

for (var i = 1; i < document.getElementsByClassName("user").length+1; i++) {
    doClosure(i);
}
rm5edbpk

rm5edbpk2#

添加到我的帖子:

我换了

jQuery.post('./Bauteile/Accounts/loadCounts/loadPNCount.php', {user_id_loadPN: user_id, conv_id: conv_id}, function(result){

console.log(user_id + " " + i);     
jQuery.post('./Bauteile/Accounts/loadCounts/loadPNCount.php', {user_id_loadPN: user_id, conv_id: conv_id}, function(result){
    console.log(result + " " + i);

用于调试...
控制台输出为:

  • 211行:254(=在该示例中的第一console.log)
  • 26 2线:254
  • 27 3线:254
  • 26 4行:256(=秒console.log(在本例中)
  • 27 4线:256
  • 214线:256

所以,正如我所怀疑的,For-loop和jQuery函数不能很好地一起工作...

相关问题