2014-03-27 43 views
0

此代碼適用於聊天。我已經添加了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 "; 
    ?> 

回答

0

的想法是存儲在數據庫中的標誌,並且對你的腳本的一個.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); 

這段代碼會在幾秒後更新你的國旗

+0

不要在你的工作上實現這一點,只是嘗試它首先得到的想法=) – KimDev