Question

我设法根据点击的用户创建唯一打开的聊天窗口，但我不能在除第一个聊天窗口之外的任何聊天窗口上发送消息。

我正在努力实现这个目标： enter image description here

我正在努力实现^

这是我到目前为止所做的：

<script> //CHAT SYSTEM
    function chatWith(id, status, username){ 
        $("#chats").append('<div class="chat_window" id="chat_'+id+'"><div class="chat_top"><span class="chat_username">'+status+username+'</span><span class="chat_x"><a href="javascript:void(0)" onclick="minChat('+id+')">-</a> <a href="javascript:void(0)" onclick="closeChat('+id+')">X</a>  </span> </div>  <div class="chat_content"></div> <form method="post" name="chat" action=""> <textarea class="chat_text" maxlength="200" name="chat_text" id="chat_text_'+id+'" placeholder="Start typing..."></textarea> </form> </div></dv>'); 
        $("#chat_"+id).slideToggle("fast");             
    } 

    //send messages
    var user_id = '<?php echo $session_user_id;?>';
    var auto_refresh = setInterval(function () {
        var b = $("#chat_"+user_id+":last").attr("id");     
        $.getJSON("chat.php?user_id="+user_id,function(data){
            $.each(data.posts, function(i,data) {               
                if(b != data.id)  { 
                    var div_data="<span id='"+data.id+"'>"+data.user_id+": "+data.msg+"</span>";                        
                    $(div_data).appendTo("#chat_"+user_id);
                }
            });
        });
    }, 2000);   
    $(document).ready(function(){
        $(document).keypress(function(e) {
            if(e.which == 13) {
                var boxval = $(".chat_text").val();                 
                var user_id = '<?php echo $session_user_id;?>';
                var dataString = 'user_id='+ user_id + '&msg=' + boxval;

                if(boxval.length > 0) { 
                    $.ajax({
                        type: "POST",
                        url: "chat.php",
                        data: dataString,
                        cache: false,
                        success: function(html){                     
                            $(".chat_content").append(html);
                            $(".chat_text").val('');
                            $(".chat_text").focus();
                            $(".chat_content").animate({scrollTop: $(".chat_text").offset().top}, 500);
                        }
                    });             
                }
                return false;
            }
        });
    });

</script>

这是我的chat.php

  if($_POST){
    $user_id = $_POST['user_id'];
    $msg = $_POST['msg'];

    mysql_query("INSERT INTO chat(user_id, msg) VALUES ('$user_id', '$msg')");

    $chat_results = mysql_fetch_assoc(mysql_query("SELECT * FROM `users` WHERE user_id='".$user_id."' LIMIT 1"));

    echo '<span style="font-size:0.9em;font-weight:bold;">'.$chat_results['username'].'</span>: <span style="font-size:0.9em;">'.$msg.'</span><br>';
}
if($_GET['user_id']){
    $user_id=$_GET['user_id'];
    $row=mysql_fetch_array(mysql_query("SELECT * FROM chat order by id desc limit 1"));
    $user_idx = $row['user_id'];
    $id = $row['id'];
    $msg = $row['msg'];
    if($user_idx != $user_id){
        echo '{"posts": [{  "id":"'.$id.'", "user_id":"'.$user_idx.'", "msg":"'.$msg.'" },]}';
    } 
}

并且div全部打开：

<div id="chats"> 

</div>

真的很感激任何帮助，现在已经打破了我好几周了！

Answer 1

你的问题在这里：

            var boxval = $(".chat_text").val(); //<-- here it is                
            ...

            $(".chat_content").append(html);//<-- here it is  
            $(".chat_text").val('');//<-- here it is  
            $(".chat_text").focus();//<-- here it is  
            $(".chat_content").animate({scrollTop: $(".chat_text").offset().top}, 500);//<-- here it is

很明显，每个“聊天窗口”都有“。chat_content”，“。chat_text”等类

那么你的js应该如何猜出哪一个是正确的呢？因此，显然只需要第一次出现的解释它只能在第一个窗口中起作用。

所以1000路到罗马

我会推荐一个：

首先纠正chatWith追加，最后一次

 </dv>

是不必要的，必须删除

function chatWith(id, status, username){ 
    $("#chats").append('<div class="chat_window" id="chat_'+id+'"><div class="chat_top"><span class="chat_username">'+status+username+'</span><span class="chat_x"><a href="javascript:void(0)" onclick="minChat('+id+')">-</a> <a href="javascript:void(0)" onclick="closeChat('+id+')">X</a>  </span> </div>  <div class="chat_content"></div> <form method="post" name="chat" action=""> <textarea class="chat_text" maxlength="200" name="chat_text" id="chat_text_'+id+'" placeholder="Start typing..."></textarea> </form> </div>'); 
    $("#chat_"+id).slideToggle("fast");             
}

然后你首先需要发送正确的值你宁愿将按键委托给textareas，而不是像

这样的文件

$(document).on('keypress','.chat_text',function(e){ //<-- heres the event context passed as argument now, just like you did (copy) yourself
  if(e.which == 13) {
    //wow,now you have the correct textarea in this-context 
    //dont loose it 
    $current=$(this);
    var boxval = $current.val();
    // and prove it!!
    console.log("the currently entered text is: "+boxval);

    //should be correct, now the requesting and appending part
    var user_id = '<?php echo $session_user_id;?>';
    var dataString = 'user_id='+ user_id + '&msg=' + boxval;
    // prove it ! 
    console.log("dataString is: "+dataString+" and therefore correct");
    if(boxval.length > 0) { 
       $.ajax({
            type: "POST",
            url: "chat.php",
            data: dataString,
            cache: false,
            success: function(html){  
                    // better prove if user_id is really correct:
                    console.log("box that will be filled is from user id: "+html.user_id);   
                    // now you have the userid on which you can match to the 
                    // id of the generated chat windows like in answer above mentioned                   
                    $boxToBeFilled=$("#chat_" + html.user_id);

                    $boxToBeFilled.append(boxval);
                    $boxToBeFilled.find('textarea').val('').focus();
                    $boxToBeFilled.children(".chat_content").animate({scrollTop: $(this).find(".chat_text").offset().top}, 500);
            }
        });             
    }
 } 
});

你去了

Answer 2

当我在我的网站上制作评论系统时，我遇到了类似的问题。

第一件事。

您要将内容附加到具有相同类属性的div中。

像这样更改类属性

<script> //CHAT SYSTEM
function chatWith(id, status, username){ 
    $("#chats").append('<div class="chat_window_'+id+'" id="chat_'+id+'"><div class="chat_top_'+id+'"><span class="chat_username">'+status+username+'</span><span class="chat_x"><a href="javascript:void(0)" onclick="minChat('+id+')">-</a> <a href="javascript:void(0)" onclick="closeChat('+id+')">X</a>  </span> </div>  <div class="chat_content_'+id+'"></div> <form method="post" name="chat" action=""> <textarea class="chat_text_'+id+'" maxlength="200" name="chat_text" id="chat_text_'+id+'" placeholder="Start typing..."></textarea> </form> </div></div>'); 
    $("#chat_"+id).slideToggle("fast");             
} 

//send messages
var user_id = '<?php echo $session_user_id;?>';
var auto_refresh = setInterval(function () {
    var b = $("#chat_"+id).attr("id");     
    $.getJSON("chat.php?user_id="+user_id,function(data){
        $.each(data.posts, function(i,data) {               
            if(b != data.id)  { 
                var div_data="<span id='"+data.id+"'>"+data.user_id+": "+data.msg+"</span>";                        
                $(div_data).appendTo("#chat_"+id);
            }
        });
    });
}, 2000);   
$(document).ready(function(){
    $(document).keypress(function(e) {
        if(e.which == 13) {
            var boxval = $(".chat_text_'+id+'").val();                 
            var user_id = '<?php echo $session_user_id;?>';
            var dataString = 'user_id='+ user_id + '&msg=' + boxval;

            if(boxval.length > 0) { 
                $.ajax({
                    type: "POST",
                    url: "chat.php",
                    data: dataString,
                    cache: false,
                    success: function(html){                     
                        $(".chat_content_'+id+'").append(html);
                        $(".chat_text_'+id+'").val('');
                        $(".chat_text_'+id+'").focus();
                        $(".chat_content_'+id+'").animate({scrollTop:    $(".chat_text_'+id+'").offset().top}, 500);
                    }
                });             
            }
            return false;
        }
    });
});

Answer 3

我将逐一回答您的问题。

我设法根据内容创建独特的聊天窗口单击用户但我无法在任何聊天窗口上发送消息，除了第一个。

当您尝试附加消息时，应将内容分配给特定的聊天框。让我们首先为每个 chat_window 类设置一个唯一的ID属性，例如：

<div id="chats"> 
<div class="chat_window" id="chat_4321"></div> 
</div>

通过这种方式，您可以准确了解哪些窗口特定于哪些用户。返回POST请求的JSON，您告诉客户该内容只需附加到您的ID：

if($_POST){
    $user_id = $_POST['user_id'];
    $msg = $_POST['msg'];
    mysql_query("INSERT INTO chat(user_id, msg) VALUES ('$user_id', '$msg')");

    $chat_results = mysql_fetch_assoc(mysql_query("SELECT * FROM `users` WHERE user_id='".$user_id."' LIMIT 1"));
    $json_response = [
      'user_id' => $user_id,
      'user_name' => $chat_results['username'],
      'message' => $msg
    ];
    echo json_encode($json_response);
}

和你的JavaScript

if(boxval.length > 0) { 
                    $.ajax({
                        type: "POST",
                        url: "chat.php",
                        data: dataString,
                        cache: false,
                        success: function(json){                     
                            $("#chat_" + json.user_id).append(boxval); // Or json.message
                            $("#chat_" + json.user_id).find('textarea').val('').focus();
                            $("#chat_" + json.user_id).children(".chat_content").animate({scrollTop: $(this).find(".chat_text").offset().top}, 500);
                        }
                    });             
                }

这取决于您如何格式化 boxval 变量，当然有很多方法可以满足您的需求。但在使用此聊天系统之前，我建议您查看一些API，例如PubNub或Pusher以及长轮询， WebSockets 等概念， Node.js ， Comet 。但是，如果你有误解，请随时提出。

祝你好运！

JQuery和PHP独特的聊天窗口为每个用户和数据库保存了聊天记录

3 个答案: