Question

我正在为我的学生小组聊天，我正在使用AJAX来获取这样的消息

//Initial call i make so user do not wait 2 seconds for messages to show
function marko() {
    $("#porukice").load("messages.php"); //Load the content into the div
}

marko();

//autorefresh every 2 seconds
var auto_refresh = setInterval(
(function () {
    $("#porukice").load("messages.php"); //Load the content into the div
}), 2000);

要发送消息，我也使用ajax，就像这样

var frm = $('#form1');
    frm.submit(function (ev) {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                document.getElementById("message").value = "";
                document.getElementById('play').play();
            }
        });

        ev.preventDefault();
    });

这是message.php（生成消息）的一部分

$sql = $conn->query('(SELECT * FROM chat ORDER BY time desc limit 0, 10) ORDER BY time');

while($row = mysqli_fetch_array($sql))
{
    $rows[] = $row;
}

foreach($rows as $row){ 
    $time = date('H:i:s', strtotime($row['2']));
    echo '['.$time.'] <b>'.$row['0'].'</b>: '.stripslashes($row['1'])."<br/>";
}

我正试图在新消息到达时发出声音＆gt; 我想出的唯一解决方案就是在用

发送消息时播放声音

document.getElementById('play').play();

正如您在上面的代码中看到的那样。当消息来临时，我不知道如何在更新mysql行时播放它。我在stackoverflow上看到了其他答案，但他们没有帮助我。

注意： $row['1']是留言，$row['0']是用户名，$row['2']是时间。

Answer 1

您可以从获取消息的PHP脚本中传递您获得的最后一个ID的值。然后，将其存储在jQuery变量中，重新加载消息后，检查id是否不同，如果是（表示新消息出现），则播放声音。

例如，在foreach循环之后：

return json_encode(array('last_time' => $rows[count($rows)-1][2]));

关于你的jQuery：

var last_time = 0; // <--- New
var new_time = 0; // <--- New

// Initial call i make so user do not wait 2 seconds for messages to show
function marko() {
    $("#porukice").load("messages.php"); //Load the content into the div

    // New
    if (last_time < new_time) {
        document.getElementById('play').play(); 
        last_time = new_time;       
    }
}

marko();

//autorefresh every 2 seconds
setInterval(function () { // <--- Some edits here
    marko(); // <--- Some edits here
}, 2000);

// ....

var frm = $('#form1');
frm.submit(function (ev) {
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
            document.getElementById("message").value = "";

            last_time = new_time; // <--- New
            new_time = data.last_time; // <--- New
        }
    });

    ev.preventDefault();
});

我没有对此进行过测试，但您可以自由地做到这一点并让我知道。

已编辑使用time代替id

Answer 2

我通过创建名为sound.php的单独文件来解决此问题 Sound.php正在回答请求json响应，包括上一条消息的日期和时间

{"last_time":"2017-02-25 17:45:55"}

然后我用ajax每隔2秒调用一次这个文件，如果last_time改变了，我发出声音

var skipped_once = false;
var old_time = 0

var auto_refresh = setInterval(function() {
$.get("sound.php", function(data) {
            // if old_time different than last_time play sound
        if (old_time != data.last_time) {
            //do not play sound on first page load
            if (skipped_once) {
                document.getElementById('play').play(); 
out.scrollTop = out.scrollHeight - out.clientHeight;
            }
            skipped_once = true;
            old_time = data.last_time;       
        }
    });
}, 2000);

新消息进入时播放声音

2 个答案: