javascript 如何使用 AJAX ,jquery和php制作一个像facebook一样的聊天框

qfe3c7zg  于 2023-01-16  发布在  Java
关注(0)|答案(2)|浏览(127)

看到我几乎只有2个问题的聊天框。我不知道如何解决他们。我尝试绝望的方法,使它正确,但它只是不会工作。我会解释我的代码下面...这里是HTML部分,聊天框,聊天文本区域和聊天成员是存在的.我正在尝试做的是,有一些聊天成员列表在左边.如果我点击任何聊天成员的名字,与该人相关的聊天就会打开。也就是说,它是登录用户和其中一个聊天成员之间的一对一聊天。聊天成员基本上是登录用户的朋友。

<div id="chat_box">
</div>
<div id="input_chat">
    <input type="text" id="input_ur_chat" placeholder="Press ENTER After Writing" name="chat_msg" />
</div>
<div style="background-color:black; position:absolute; height:100%; width:25%; opacity:0.8;">
    <div id="chat_members">
<p id='1' class='chat_members_list'>anurag</p>
<p id='2' class='chat_members_list'>golu</p>
<p id='3' class='chat_members_list'>akash</p>
    </div>
</div>

在div chat_members中,id表示该用户的userid,它是在数据库中唯一标识该用户的属性值。
现在我的聊天框的 AJAX 和jquery代码如下所示:

<script>
$(document).ready(function()
{
    $('.chat_members_list').click(function()
    {
        var chatmember = $(this).attr('id');
        var iusername = "<?php echo $usname; ?>"; //the current logged in user
        //alert(chatmember);
        $(".chat_members_list").css("color","white");
        $("#" + chatmember).css("color","lightskyblue");
        load_data = {'fetch':1, 'username1':iusername, 'receivername1':chatmember};
        $("#chat_box").html("<img src='images/loader3.gif' />loading...");
        window.setInterval(function()
        {
            $.post('shout.php', load_data, function(data)
            {
                $('#chat_box').html(data);
                var scrolltoh = $('#chat_box')[0].scrollHeight;
                $('#chat_box').scrollTop(scrolltoh);
            });
        }, 1000);

        //method to trigger when user hits enter key
        $("#input_ur_chat").keyup(function(evt)
        {
            if(evt.keyCode == 13)
            {
                var imessage = $('#input_ur_chat').val();
                alert(iusername);
                alert(imessage);
                alert(chatmember);
                post_data = {'username':iusername, 'message':imessage, 'receivername':chatmember};

                //send data to "shout.php" using jQuery $.post()
                $.post('shout.php', post_data, function(data)
                {

                    //append data into messagebox with jQuery fade effect!
                    $(data).hide().appendTo('#chat_box').fadeIn();

                    //keep scrolled to bottom of chat!
                    var scrolltoh = $('#chat_box')[0].scrollHeight;
                    $('#chat_box').scrollTop(scrolltoh);

                    //reset value of message box
                    $('#input_ur_chat').val('');

                }).fail(function(err)
                { 

                    //alert HTTP server error
                    alert(err.statusText); 
                });
            }
        });
    });
});

这是我的php代码

<?php
session_start();
$usname=$_SESSION['username'];
$db_username = 'root';
$db_password = '*********';
$db_name = 'anurag';
$db_host = 'localhost';
if($_POST)
{
$sql_con = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database');

//check if its an ajax request, exit if not
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
    die();
} 

if(isset($_POST["message"]) &&  strlen($_POST["message"])>0)
{
    //sanitize user name and message received from chat box
    //You can replace username with registerd username, if only registered users are allowed.
    $username = filter_var(trim($_POST["username"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);
    $message = filter_var(trim($_POST["message"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);
    $user_ip = $_SERVER['REMOTE_ADDR'];
    $r_msg = $_POST['receivername'];
    $result1 = mysqli_query($sql_con,"SELECT uid FROM members WHERE username='$usname' ");
    $row1=mysqli_fetch_array($result1);
    $asd=$row1['uid'];
    //insert new message in db
    if(mysqli_query($sql_con,"INSERT INTO friends_chat values('$asd','$r_msg','$message',NOW())"))
    {
        $msg_time = date('h:i A M d',time()); // current time
        echo '<div class="shout_msg"><time>'.$msg_time.'</time><span class="username">'.$username.'</span><span class="message">'.$message.'</span></div>';
    }
}
elseif($_POST["fetch"]==1)
{
    $username1 = filter_var(trim($_POST["username1"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);
    $r_msg1 = $_POST['receivername1'];
    $result12 = mysqli_query($sql_con,"SELECT uid FROM members WHERE username='$usname' ");
    $row12=mysqli_fetch_array($result12);
    $asd1=$row12['uid'];
    $results = mysqli_query($sql_con,"SELECT s_msg,r_msg,message,time_msg
                            FROM friends_chat
                            WHERE s_msg='$asd1'
                            AND r_msg='$r_msg1'
                            ");
    while($row = mysqli_fetch_array($results))
    {
        $msg_time1 = date('h:i A M d',strtotime($row["time_msg"])); //message posted time
        echo '<div class="shout_msg1"><time>'.$msg_time1.' : '.'</time><span class="username1">'.$row["s_msg"].' := '.'</span> <span class="message1">'.$row["message"].'</span></div>';
    }
}
else
{
    header('HTTP/1.1 500 Are you kiddin me?');
    exit();

}
}
?>

现在我告诉你我的问题。
首先,当我点击一个聊天成员时,与该成员相关的聊天正在打开,当我在输入字段中输入任何值时,只插入一行,即使刷新页面并再次尝试,只有一行正在插入。2问题可能出在脚本启动时的点击事件。3因为只有当点击事件发生时 AJAX 请求才会被启动。4这就是问题所在。我只想为每个成员一个点击事件,然后他们可以聊天。还有一个问题,在这方面,当我刷新页面,并再次开始与其中一个成员的聊天与该点击事件,因为1行是在刷新前插入,没有新行插入。我不知道这个问题的根源。我希望你现在明白我的问题。如果你需要更多的信息,请告诉我并帮助我。

1l5u6lss

1l5u6lss1#

我认为keyup事件应该和click事件分开,这应该是一个单独的事件

$('.chat_members_list').click(function(){
    //code
});

虽然这也应该是一个单独的事件

$("#input_ur_chat").keyup(function(evt){
    //code
});
vs3odd8k

vs3odd8k2#

你可能想看看套接字,比如Socket.js。这有点难,但这就是你要找的。套接字有点复杂,但超级快。你可以用 AJAX 来做这件事,但AJAX比套接字慢得多。
onMessage 事件中,您将消息 * 广播 * 给所有连接的用户,而使用 onConnectonDisconnect,您将连接的用户列表 * 广播 * 给所有人。

相关问题