聊天应用，用户输入部分工作 - chat app with user typing partly working

这段代码非常适合聊天。我添加了ajaxcall.php用于实时通知。问题是;当其他用户输入时，它将显示输入通知，而不是在我输入时显示我自己。请问我怎样才能显示其他用户在打字呢?

index.php
<?php 
    ob_start(); 
    ?>
    <?php
    session_start();
    ?>

    <!doctype>
    <html>
    <head>
    <title>Chat</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script type="text/javascript" src="jscolor.js"></script>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
    $(document).ready(function() {
        $.ajaxSetup(
            {
                cache: false,
                beforeSend: function() {
                    $('#messages').hide();
                    $('#messages').show();
                    $("#messages").animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");
                },
                complete: function() {
                    $('#messages').hide();
                    $('#messages').show();
                    $("#messages").animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");
                },
                success: function() {
                    $('#messages').hide();
                    $('#messages').show();
                    $("#messages").animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");
                }
            });
            var $container = $("#messages");
            $container.load('ajaxload.php?id=<?php echo htmlentities( $_GET['id'], ENT_QUOTES, "UTF-8"); ?>');
            var refreshId = setInterval(function()
            {
                $container.load('ajaxload.php?id=<?php echo htmlentities( $_GET['id'], ENT_QUOTES, "UTF-8"); ?>');
            }, 3000);
        $("#userArea").submit(function() {
            $.post('ajaxPost.php', $('#userArea').serialize(), function(data) {
                $("#messages").append(data);
                $("#messages").animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");
                document.getElementById("output").value = "";
            });
            return false;
        });
    });
    </script>

    <!--Ajax Server Call-->
    <script>
    function getAjaxFromServer(str){
    if (str.length==0){
    document.getElementById("ajaxResponse").innerHTML="";
    return;
    }
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById("ajaxResponse").innerHTML=xmlhttp.responseText;
    }
    }
    xmlhttp.open("GET",'ajaxcall.php?id=<?php echo htmlentities( $_GET['id'], ENT_QUOTES, "UTF-8"); ?>',true);
    xmlhttp.send();
    }
    </script>

    </head>
    <body>
    <div id="chatwrapper">
    <!--display-->
    <!--http://www.youtube.com/watch?v=FyXeOX-uYMc-->
    <div id="messages"></div>
    <!--post-->
    <form id="userArea">
    <div id="usercolor">
    <input name="reciever" type="hidden" value="<?php echo htmlentities($_GET['id'], ENT_QUOTES, "UTF-8");?>"><br>
    <input name="text" class="color" id="text" maxlength="6" value="000000" />
    </div>
    <div id="messagesntry">
    <textarea id="output" name="messages" placeholder="Message" onkeyup="getAjaxFromServer(this.value)"/></textarea>
    </div>
    <div id="messagesubmit">
    <input type="submit" value="Post message" id="submitmessage" />
    </div>
    </form>
    </div>
    </body>
    </html>

    ajaxload.php

    <?php 
    ob_start(); 
    ?>
    <?php
    session_start();
    ?>
    <?php
    include('connect.php');
    $id=$_GET['id'];
    $result = $db->prepare("SELECT * FROM messages ORDER BY id ASC");
    $result->execute();
    for($i=0; $row = $result->fetch(); $i++){
    echo '<div style="color:'.$row['textcolor'].'">' .$row['user'] . ' : '. $row['message'] .'</div>';
    }
    ?>

ajaxcall.php


    <?php 
    ob_start(); 
    ?>
    <?php
    session_start();
    ?>
    <?php
    $txt=strip_tags($_GET['id']);
    $txt1=strip_tags($_SESSION['SESS_MEMBER_ID']);
      echo $txt;
    echo "&nbsp; is typing ";
    ?>

这个想法是在数据库中存储一个标志，并在您的脚本上有一个.setTimeOut，当您的字段标志从0变为1时，它将运行

下面是尝试

的代码片段

$('#txt_message').keyup(function(){
  // Start a flag loop with an id of 'loop' and a counter.
  var i = 1;
  var dataString = 'flag='+ i ;
  $.ajax({
    type: "POST",
    url: "notif.php",
    data: dataString,
    cache: false,
    success: function(url){
        }
     });

这个代码片段将在您键入文本字段

时更新您的数据库。

    var timer;
function AjaxRetrieve()
{
    $.get("type_on.php?flag=0",function(data)
    {
   window.clearTimeout(timer); 
       $("#typing_on").html(data);
        timer=window.setTimeout(function(){AjaxRetrieve()},3100);
           });
}
timer=window.setTimeout(function(){AjaxRetrieve()},1300);

这个代码片段将在几秒钟后更新你的标志