live chat using php/jquery/ajax

Question

I have a question regarding the style of my .js script that updates a chatbox on my website.

Currently, the I am polling a .html file which keeps all the chat lines however I would like to change this to only poll the .html file on a new entry.

Currently working via polling every 1500 and updates the chat for all users:

// 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
            }               
        },
    });
}

I tried changing it to call the loadLog() function after a user presses send/enter however I noticed that this would only load the log for the user pressing send/enter and not for other users. and would not show the most recently line (perhaps it is executing the loadLog() faster than the posting to post.php and writing the log file with the new line?

//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;
      }
    });
});

Is there a way to make the second version work but to update for all users not just the user sending the data?

html for chat:

<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);
}

Thanks in advance.