我要在现有应用程序中创建一个聊天应用程序。 我正在使用PHP和Mysql处理后端,对于前端,我正在使用Jquery。
这是html代码,我单击用户后显示消息,假设用户ID从50开始,用户ID到1。
<div class="content">
<!-- MESSAGE CONTENT -->
<div id="msgbox" class="popup-messages"></div>
<!-- BUTTON AND TETX INPUT -->
<div style="width:100%;display:table;position:fixed;bottom:0px">
<div style="width:90%;display:table-cell">
<input type="text" id="sentmessagetext" class="inputform form-control" placeholder="Type your message here">
</div>
<div style="width:10%;display:table-cell;">
<a id="sendBtn'+ id +'" onclick="sendMsg('<?= $id ?>','<?= $fromid ?>')" class="btn btn-primary btn-sm" >
<i style="font-size:20px;margin-top:-2px;" class="fas fa-arrow-right text-white"></i>
</a>
</div>
</div>
</div>
用于获取用户的JS代码
<script>
$(function(){
register_popup('<?= $_GET["uid"] ?>', '<?= $_GET["fromid"] ?>');
});
function register_popup(id,fromuser)
{
$.post('includes/get_user_by_id.php',{ id:id }).done(function(data){
var json = $.parseJSON(data);
if(json.status == '1'){
$('#totalname').html(json.data[0].firstname+' '+json.data[0].lastname);
fetch_msg(fromuser, id);
$('#sentmessagetext').keypress(function (e) {
if (e.which == 13) {
sendMsg(id, fromuser);
return false;
}
});
console.log(json.data);
}
});
}
function check_if_empty(id){
var textfield = $("#sentmessagetext").val();
if(textfield.length > 0){
$('#sendBtn').removeClass('disabled');
console.log(textfield.length);
}else{
$('#sendBtn').addClass('disabled');
}
}
function fetch_msg(from, to){
$('#msgbox').html(' ');
var new_messages = "";
setInterval(function(){
$.post('includes/fetch_msg.php',{toid:to,fromid:from}).done(function(data){
var json = $.parseJSON(data);
if(json.status == '1'){
for(var i = json.data.length-1; i >= 0;i--){
if(json.data[i].from_user == from){
new_messages = new_messages+ '<div class="chatmsgto">'+json.data[i].msg+'<br><i><span style="font-size:9px;float:right">'+json.data[i].sent_on+'</span></i></div>';
} else {
new_messages = new_messages+ '<div class="chatmsgfrom">'+json.data[i].msg+'<br><i><span style="font-size:9px;float:right">'+json.data[i].sent_on+'</span></i></div>';
}
}
}
});
},1000);
//AFTER THIS NOt WORKING
setInterval(function(){
var old_messages = $('#msgbox').html(); // check for old msg
if(new_messages != old_messages){ //check
$('#msgbox').html(new_messages);//show
$('#msgbox').animate({ scrollTop: $('#msgbox').prop("scrollHeight")}, 0);
}
},2000);
}
//
function sendMsg(touser,fromuser){
// alert(touser);
var msgtext = $('#sentmessagetext').val();
if(msgtext.length > 0){
$.post('includes/send_chat_messages.php',{ to:touser, msg:msgtext }).done(function(data){
if(data == '1'){
$('#sentmessagetext').val(' ');
// $("#msgbox"+touser).load(location.href + " #msgbox"+touser);
fetch_msg(fromuser, touser);
}
});
}else{
alert('Enter text to send');
}
}
</script>
我正在逐个获取消息,但是它们每次都不断刷新和添加新消息,并且滚动到底部不起作用。 我只想在输入新消息时刷新结果。