JQuery和PHP独特的聊天窗口为每个用户和数据库保存了聊天记录
我设法根据点击的用户创建唯一打开的聊天窗口，但我不能在除第一个聊天窗口之外的任何聊天窗口上发送消息。
我正在努力实现这个目标：
我正在努力实现^
这是我到目前为止所做的：
<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>
真的很感激任何帮助，现在已经打破了我好几周了！
3 个答案:
答案 0 :(得分：5)
你的问题在这里：
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
那么你的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);
}
});
}
}
});
你去了
答案 1 :(得分：3)
当我在我的网站上制作评论系统时，我遇到了类似的问题。
第一件事。
您要将内容附加到具有相同类属性的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;
}
});
});
答案 2 :(得分：2)
我将逐一回答您的问题。
我设法根据内容创建独特的聊天窗口 单击用户但我无法在任何聊天窗口上发送消息，除了 第一个。
当您尝试附加消息时，应将内容分配给特定的聊天框。让我们首先为每个 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 。但是，如果你有误解，请随时提出。
祝你好运！
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？