看到我已经制作了几乎只有两个问题的聊天框。我不知道如何解决它们。我正在尝试无望的方法来使其正确,但它就是行不通。我将在下面解释我的代码... 这是 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();
}
}
?>
现在我会告诉你我的问题。
首先,当我点击某个聊天成员时,与该成员相关的聊天就会打开。当我在输入字段中输入任何值时,仅插入一行。即使刷新页面并再次尝试,也只插入一行。问题可能是脚本开头的单击事件。因为只有当点击事件发生时才会发起ajax请求。这就是问题所在。我只想为每个成员单击一次事件,然后他们就可以聊天。还有一个问题是,当我刷新页面并再次开始与具有该单击事件的成员之一聊天时,因为在刷新之前插入了 1 行,所以没有插入新行。我不知道这个问题的根源。 我希望你现在明白我的问题。如果您需要更多信息,请告诉我并帮助我。
我认为 keyup 事件应该与 click 事件分开。 这应该是一个单独的活动
$('.chat_members_list').click(function(){
//code
});
虽然这也应该是一个单独的活动
$("#input_ur_chat").keyup(function(evt){
//code
});
您可能想检查套接字,例如 Socket.js。这有点困难,但这就是您正在寻找的。套接字有点复杂,但速度超级快。您可以使用 AJAX 来实现此目的,但与套接字相比,AJAX 非常慢。
在 onMessage 事件中,您可以向所有已连接的用户广播消息,并通过 onConnect 和 onDisconnect 您可以向所有人广播已连接的用户列表。