Javascript - 在变量

Question

我会尝试尽可能多地解释这一点，但基本上我要做的就是为我的网站创建一个即时消息服务，由一群人私下使用。我已经收到了发送和接收信息，但我似乎无法找到解决通知声音的方法。

我希望收到新消息时播放通知声音。我已经花了大约45分钟摆弄它，我试图寻找解决方案，但我似乎无法找到任何效果。

这是我的Javascript：

function update() {
    var xmlhttp=new XMLHttpRequest();
    var username = "<?php echo $ugt ?>";
    var output = "";
    var number = 0;
    var messages = msgarea.childElementCount / 2;

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            var response = xmlhttp.responseText.split("\n")
            var rl = response.length
            var item = "";
            for (var i = 0; i < rl; i++) {
                item = response[i].split("\\")
                if (item[1] != undefined) {
                    if (item[0] == username) {
                        output += "<div class=\"msgsentby ext\"><div class='imgprop'></div></div><div class=\"msgc\"> <div class=\"msg msgfrom\">" + item[1] + "</div> <div class=\"msgarr msgarrfrom\"></div> </div>";
                    } else {
                        output += "<div class=\"msgsentby\"><img src='https://api.lspd-fibo.com/avatar/?gt=" + item[0] + "'></div> <div class=\"msgc\"> <div class=\"msg\">" + item[1] + "</div> <div class=\"msgarr\"></div></div>";
                        number = msgarea.childElementCount / 2;
                    }
                }
            }
            msgarea.innerHTML = output;

            if (messages < number ) {
                audio.play();

                setTimeout(function() {
                    messages = msgarea.childElementCount / 2;
                }, 500);
            }

            msgarea.innerHTML += "number: " + number;
            msgarea.innerHTML += " messages: " + messages;
        }

    }
    xmlhttp.open("GET","get-messages.php?username=" + username,true);
    xmlhttp.send();
}

function sendmsg() {
    var message = msginput.value;
    var delay = 1500;
    if (message != "") {
        var username = "<?php echo $ugt ?>";
        var xmlhttp=new XMLHttpRequest();
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {}
        }

        message = escapehtml(message)
        msgarea.innerHTML += "<div class=\"msgc\" style=\"margin-bottom: 30px;\"> <div class=\"msg msgfrom sending\">" + message + "</div> <div class=\"msgarr msgarrfrom\"></div> <div class=\"msgsentby msgsentbyfrom\">Sending...</div> </div>";
        msginput.value = "";

        var objDiv = document.getElementById("msg-area");
        objDiv.scrollTop = objDiv.scrollHeight;

        xmlhttp.open("GET","update-messages.php?username=" + username + "&message=" + message,true);
        xmlhttp.send();

        setTimeout(function() {
            var objDiv = document.getElementById("msg-area");
            objDiv.scrollTop = objDiv.scrollHeight;
        }, delay);

        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                var objDiv = document.getElementById("msg-area");
                objDiv.scrollTop = objDiv.scrollHeight;
            }
        }
    }
}

如果它有点乱，我道歉，但这是我必须要处理的事情。我感谢任何人提前提供的任何帮助：）

//编辑1

就个人而言，我的想法可能有用，就是在页面加载时统计所有消息，每次刷新脚本并检测到新号码时，发出声音......我已经尝试过了这种特殊的工作方法也无济于事，但这可能是由于我对这个过程缺乏了解。

//编辑2

我已经用我在此期间尝试过的方式编辑了我的JavaScript。

Answer 1

我已经接受了你的代码，移动了一些变量声明并切换到使用Array.prototype.forEach()，所以我们不必手动递增索引...这对我有用......

function update() {
    var xmlhttp=new XMLHttpRequest();
    var username = "Fred";
    var output = "";
    var number = 0;
    var oldVar; //initialize here instead of after forEach

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            var response = xmlhttp.responseText.split("\n")
            var rl = response.length
            var item;	//just declare array here but don't need to set value
            response.forEach(function(responseLine,index) {
                item = responseLine.split("\\")
                if (item[1] != undefined) {
                    number++;
                    if (item[0] == username) {
                        output += "<div class=\"msgsentby\"><div class='imgprop'></div></div><div class=\"msgc\"> <div class=\"msg msgfrom\">" + item[1] + "</div> <div class=\"msgarr msgarrfrom\"></div> </div>";
                    } else {
                        output += "<div class=\"msgsentby\"><img src='https://api.lspd-fibo.com/avatar/?gt=" + item[0] + "'></div> <div class=\"msgc\"> <div class=\"msg\">" + item[1] + "</div> <div class=\"msgarr\"></div></div>";   
                    }
                }
            });
            if (oldVar != number) {
                var audio = new Audio('notification.mp3');
                audio.play();
            }
            msgarea.innerHTML = output;
            //removed var keyword here so we don't re-declare it each time
            oldVar = number;
        }

    }
    xmlhttp.open("GET","get-messages.php?username=" + username,true);
    xmlhttp.send();
}