Question

此代码非常适合聊天。我添加了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 ";
    ?>

Answer 1

我们的想法是在数据库上存储一个标志，并在脚本上有一个.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);

此片段将在几秒后更新您的旗帜

聊天应用与用户键入部分工作

1 个答案: