Question

我正在两个用户之间进行聊天，并想在div中显示它。但发送消息应始终保留在右侧，接收消息应保留在左侧。

<html>  
<head>  
           <title>Live Table Data Edit</title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
      </head>  
      <body>  
           <div class="container">  
                <br />  
                <br />  
                <br />  
                <div class="table-responsive">  
                     <h3 align="center">You Are : <?php echo $_SESSION['name']; ?></h3><br />  
                     <div id="live_data"></div>                 
                </div>  
                <div id="messages" style="    border: 1px solid #ccc;
    width: 250px;
    height: 210px;
    padding: 10px;
    overflow-y:scroll;
    display:none;"></div> 
                <div class="area" style="display:none">
                <textarea id="text" name="text"style="    border: 1px solid #ccc;
    width: 250px;
    height: 50px;
    padding: 10px;" ></textarea>
                <input type="submit" id="sub" name="sub" value="Send" />
                </div>
           </div>  


<script>
var currentID = null;
var chatTimer = null;
var scrolled;
function fetch_data() {
  $.ajax({
    url: "select.php",
    method: "POST",
    success: function(data) {
      $('#live_data').html(data);
      //fetch_chat();
    }
  });
}

function fetch_chat() {

  $.ajax({
    url: "fetch_chat.php",
    method: "POST",
    data: {
      id: currentID
    },
    dataType: "text",
    success: function(data) {
      $("#messages").show();
      $('#messages').html(data);
      $("div.area").show();
      //chatTimer = setTimeout(fetch_chat, 500); //request the chat again in 2 seconds time
      if(!scrolled){
        $("#messages").animate({ scrollTop: $(document).height() }, "fast");
        scrolled=true;
      }

    }

  });

}

$(document).ready(function() {
        $("#messages").on('scroll',function(){
        scrolled=true;
    });
 fetch_data();

  $(document).on('click', '.first_name', function() {
      scrolled=false;
    currentID = $(this).data("id1");
    //immediately fetch chat for the new ID, and clear any waiting fetch timer that might be pending
    //clearTimeout(chatTimer);
    fetch_chat(); 
  });

  function scrollToBottom() {
    $("#messages").scrollTop(1e10); // Lazy hack
}

setInterval(function() {
    fetch_chat();
}, 500);

  $("#sub").click(function() {
      scrolled=false;
    var text = $("#text").val();

    $.post('insert_chat.php', {
      id: currentID,
      msg: text
    }, function(data) {
      $("#messages").append(data);
      $("#text").val('');
      if(!scrolled){
        $("#messages").animate({ scrollTop: $(document).height() }, "fast");
        scrolled=true;
      }
      //scrollToBottom();
    });
  //  alert(text);
  });

  //this will also trigger the first fetch_chat once it completes
});
</script>
      </body>  
 </html>

就像大多数聊天应用程序一样。我想在我的代码中实现同样的功能。因此，对于这两个用户而言，它变得很好并且易于理解。

设计聊天框

0 个答案: