使用php / jquery / ajax进行实时聊天

Question

我对我的.js脚本的样式有疑问，该脚本会更新我网站上的聊天框。

目前，我正在查询保存所有聊天行的.html文件，但是我想将其更改为仅在新条目上轮询.html文件。

目前通过每1500次轮询工作并更新所有用户的聊天：

// jQuery Document
$(document).ready(function(){
    //If user submits the form
    $("#submitmsg").click(function(){
        var clientmsg = $("textarea#usermsg").val();
        $.post("post.php", {text: clientmsg});              
        $("#usermsg").attr("value", "");
        clientmsg = "";
        $("textarea#usermsg").val('');
        return false;
    });

    $("textarea#usermsg").keydown(function (e) {
      if (e.keyCode == 13) {
        var clientmsg = $("textarea#usermsg").val();
        $.post("post.php", {text: clientmsg});              
        $("#usermsg").attr("value", "");
        clientmsg = "";
        $("textarea#usermsg").val('');
        return false;
      }
    });
});

setInterval (function(){ loadLog() }, 1500);

//Load the file containing the chat log
function loadLog(){     
    var oldscrollHeight = $("#chatbox").prop("scrollHeight") - 20; //Scroll height before the request
    $.ajax({
        url: "log.html",
        cache: false,
        success: function(html){        
            $("#chatbox").html(html); //Insert chat log into the #chatbox div   

            //Auto-scroll           
            var newscrollHeight = $("#chatbox").prop("scrollHeight") - 20; //Scroll height after the request
            if(newscrollHeight > oldscrollHeight){
                $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
            }               
        },
    });
}

我尝试在用户按下send / enter后更改它以调用loadLog（）函数但是我注意到这只会为用户按下send / enter而不是其他用户加载日志。并且不会显示最近的行（也许它比发布到post.php并使用新行写日志文件更快地执行loadLog（）？

//Load the file containing the chat log
function loadLog(){     
    var oldscrollHeight = $("#chatbox").prop("scrollHeight") - 20; //Scroll height before the request
    $.ajax({
        url: "log.html",
        cache: false,
        success: function(html){        
            $("#chatbox").html(html); //Insert chat log into the #chatbox div   

            //Auto-scroll           
            var newscrollHeight = $("#chatbox").prop("scrollHeight") - 20; //Scroll height after the request
            if(newscrollHeight > oldscrollHeight){
                $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
            }               
        },
    });
}

// jQuery Document
$(document).ready(function(){
    //If user submits the form
    $("#submitmsg").click(function(){
        var clientmsg = $("textarea#usermsg").val();
        $.post("post.php", {text: clientmsg});              
        $("#usermsg").attr("value", "");
        clientmsg = "";
        $("textarea#usermsg").val('');
        loadLog();
        return false;
    });

    $("textarea#usermsg").keydown(function (e) {
      if (e.keyCode == 13) {
        var clientmsg = $("textarea#usermsg").val();
        $.post("post.php", {text: clientmsg});              
        $("#usermsg").attr("value", "");
        clientmsg = "";
        $("textarea#usermsg").val('');
        loadLog();
        return false;
      }
    });
});

有没有办法让第二个版本工作，但是为所有用户而不仅仅是发送数据的用户进行更新？

用于聊天的HTML：

<div id="chatbox"><?php
    if(file_exists("log.html") && filesize("log.html") > 0){
        $handle = fopen("log.html", "r");
        $contents = fread($handle, filesize("log.html"));
        fclose($handle);

        echo $contents;
    }
    ?>
</div>
<form name="message" action="">
    <?php if($loggedIn) { 
        echo '
        <textarea name="usermsg" id="usermsg" rows="2"></textarea>
        <input name="submitmsg" type="submit"  id="submitmsg" value="Send" />';
    } 
    ?>
</form>

post.php中

if(isset($steamprofile['steamid'])){
    $text = $_POST['text'];

    $fp = fopen("log.html", 'a');
    fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$steamprofile['personaname']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>");
    fclose($fp);
}

提前致谢。