I have this Jquery/Php process for users chatting and i have some problems if i send a message to an online user and i minimize the chat window or close'it or i refresh the page, the chat window is popping up every time and i want on window close to be closed for good, and when i minimize the mindow on the bar to stay there even when i refresh the page to stay minimized on the bar.
Next problem is sometimes when i send a message and i hit enter the message is not displayed, but when i refresh the page, is there.
Ps: The script is not mine, i found it on youtube.
Jquery Chat script:
jQuery(function(){
var userOnline = Number(jQuery('span.user_online').attr('id'));
var clicou = [];
function in_array(valor, array){
for(var i =0; i<array.length;i++){
if(array[i] == valor){
return true;
}
}
return false;
}
function add_janela(id, nome, status){
var janelas = Number(jQuery('#chats .window').length);
var pixels = (270+5)*janelas;
var style = 'float:none; position:absolute; bottom:0; right:'+pixels+'px';
var splitDados = id.split(':');
var id_user = Number(splitDados[1]);
var janela = '<div class="window" id="janela_'+id_user+'" style="'+style+'">';
janela += '<div class="header_window"><a href="#" class="close">X</a> <span class="name">'+nome+'</span> <span id="'+id_user+'" class="status-lista'+'"></span></div>';
janela += '<div class="body"><div class="mensagens"><div id="typing_on"></div><ul></ul></div>';
janela += '<div class="send_message" id="'+id+'"><input type="text" name="mensagem" class="msg" id="'+id+'"/></div></div>';
jQuery('#chats').append(janela);
}
function retorna_historico(id_conversa){
jQuery.ajax({
type: 'POST',
url: 'sys/historico.php',
data: {conversacom: id_conversa, online: userOnline},
dataType: 'json',
success: function(retorno){
jQuery.each(retorno, function(i, msg){
if(jQuery('#janela_'+msg.janela_de).length > 0){
if(userOnline == msg.id_de){
jQuery('#janela_'+msg.janela_de+' .mensagens ul').append('<li id="'+msg.id+'" class="eu"><p>'+msg.mensagem+'</p></li>');
}else{
jQuery('#janela_'+msg.janela_de+' .mensagens ul').append('<li id="'+msg.id+'"><div class="imgSmall"><img src="'+msg.fotoUser+'" /></div><p>'+msg.mensagem+'</p></li>');
}
}
});
[].reverse.call(jQuery('#janela_'+id_conversa+' .mensagens li')).appendTo(jQuery('#janela_'+id_conversa+' .mensagens ul'));
jQuery('#janela_'+id_conversa+' .mensagens').animate({scrollTop: 230}, '500');
}
});
}
jQuery('body').on('click', '#users_online a', function(){
var id = jQuery(this).attr('id');
jQuery(this).removeClass('comecar');
var status = jQuery(this).next().attr('class');
var splitids = id.split(':');
var idJanela = Number(splitids[1]);
if(jQuery('#janela_'+idJanela).length === 0){
var nome = jQuery(this).text();
add_janela(id, nome, status);
retorna_historico(idJanela);
}else{
jQuery(this).removeClass('comecar');
}
});
jQuery('body').on('click', '.header_window', function(){
var next = jQuery(this).next();
next.toggle(100);
});
jQuery('body').on('click', '.close', function(){
var parent = jQuery(this).parent().parent();
var idParent = parent.attr('id');
var splitParent = idParent.split('_');
var idJanelaFechada = Number(splitParent[1]);
var contagem = Number(jQuery('.window').length)-1;
var indice = Number(jQuery('.close').index(this));
var restamAfrente = contagem-indice;
for(var i = 1; i <= restamAfrente; i++){
jQuery('.window:eq('+(indice+i)+')').animate({left:"-=275"}, 200);
}
parent.remove();
jQuery('#users_online li#'+idJanelaFechada+' a').addClass('comecar');
});
jQuery('body').on('keyup', '.msg', function(e){
if(e.which == 13){
var texto = jQuery(this).val();
var id = jQuery(this).attr('id');
var split = id.split(':');
var para = Number(split[1]);
jQuery.ajax({
type: 'POST',
url: 'sys/submit.php',
data: {mensagem: texto, de: userOnline, para: para},
success: function(retorno){
if(retorno == 'ok'){
jQuery('.msg').val('');
}else{
alert("Ocorreu um erro ao enviar a mensagem");
}
}
});
}
});
jQuery('body').on('click', '.mensagens', function(){
var janela = jQuery(this).parent().parent();
var janelaid = janela.attr('id');
var idConversa = janelaid.split('_');
idConversa = Number(idConversa[1]);
jQuery.ajax({
url: 'sys/ler.php',
type: 'POST',
data: {ler: 'sim', online: userOnline, user: idConversa},
success: function(retorno){}
});
});
function verifica(timestamp, lastid, user){
var t;
jQuery.ajax({
url: 'sys/stream.php',
type: 'GET',
data: 'timestamp='+timestamp+'&lastid='+lastid+'&user='+user,
dataType: 'json',
success: function(retorno){
clearInterval(t);
if(retorno.status == 'resultados' || retorno.status == 'vazio'){
t =setTimeout(function(){
verifica(retorno.timestamp, retorno.lastid, userOnline);
},1000);
if(retorno.status == 'resultados'){
jQuery.each(retorno.dados, function(i, msg){
if(msg.id_para == userOnline){
jQuery.playSound('sys/effect');
}
if(jQuery('#janela_'+msg.janela_de).length === 0){
jQuery('#users_online #'+msg.janela_de+' .comecar').click();
clicou.push(msg.janela_de);
}
if(!in_array(msg.janela_de, clicou)){
if(jQuery('.mensagens ul li#'+msg.id).length === 0 && msg.janela_de > 0){
if(userOnline == msg.id_de){
jQuery('#janela_'+msg.janela_de+' .mensagens ul').append('<li class="eu" id="'+msg.id+'"><p>'+msg.mensagem+'</p></li>');
}else{
jQuery('#janela_'+msg.janela_de+' .mensagens ul').append('<li id="'+msg.id+'"><div class="imgSmall"><img src="'+msg.fotouser+'" border="0"/></div><p>'+msg.mensagem+'</p></li>');
}
}
}
});
jQuery('.mensagens').animate({scrollTop: 230}, '500');
console.log(clicou);
}
clicou = [];
jQuery('#users_online ul').html('');
jQuery.each(retorno.users, function(i, user){
var incluir = '<li id="'+user.id+'"><div class="imgSmall"><img src="'+user.foto+'" border="0"/></div>';
incluir += '<a href="#" id="'+userOnline+':'+user.id+'" class="comecar">'+user.nome+'</a>';
incluir += '<span id="'+user.id+'" class="status '+user.status+'"></span></li>';
jQuery('span#'+user.id).attr('class', 'status-lista '+user.status);
jQuery('#users_online ul').append(incluir);
});
}else if(retorno.status == 'erro'){
alert('Ficamos confusos, atualize a pagina');
}
},
});
}
verifica(0,0,userOnline);
});
History Php file:
<?php
if(isset($_POST['conversacom'])){
include_once "../defines.php";
require_once('../classes/BD.class.php');
BD::conn();
$mensagens = array();
$id_conversa = (int)$_POST['conversacom'];
$online = (int)$_POST['online'];
$pegaConversas = BD::conn()->prepare("SELECT * FROM `mensagens` WHERE (`id_de` = ? AND `id_para` = ?) OR (`id_de` = ? AND `id_para` = ?) ORDER BY `id` DESC LIMIT 10");
$pegaConversas->execute(array($online, $id_conversa, $id_conversa, $online));
while($row = $pegaConversas->fetch()){
$fotouser = '';
if($online == $row['id_de']){
$janela_de = $row['id_para'];
}elseif($online == $row['id_para']){
$janela_de = $row['id_de'];
$pegaFoto = BD::conn()->prepare("SELECT `photo` FROM `mls_users` WHERE `id` = '$row[id_de]'");
$pegaFoto->execute();
while($usr = $pegaFoto->fetch()){
$fotouser = ($usr['photo'] == '') ? 'default.jpg' : $usr['photo'];
}
}
$emotions = array(':)', ':@', '8)', ':D', ':3', ':(', ';)');
$imgs = array(
'<img src="emotions/nice.png" width="14"/>',
'<img src="emotions/angry.png" width="14"/>',
'<img src="emotions/cool.png" width="14"/>',
'<img src="emotions/happy.png" width="14"/>',
'<img src="emotions/ooh.png" width="14"/>',
'<img src="emotions/sad.png" width="14"/>',
'<img src="emotions/right.png" width="14"/>'
);
$msg = str_replace($emotions, $imgs, $row['mensagem']);
$mensagens[] = array(
'id' => $row['id'],
'mensagem' => utf8_encode($msg),
'fotoUser' => $fotouser,
'id_de' => $row['id_de'],
'id_para' => $row['id_para'],
'janela_de' => $janela_de
);
}
die( json_encode($mensagens) );
}
?>
Submit Php file:
<?php
if(isset($_POST['mensagem'])){
include_once "../defines.php";
require_once('../classes/BD.class.php');
BD::conn();
$mensagem = utf8_decode( strip_tags(trim(filter_input(INPUT_POST, 'mensagem', FILTER_SANITIZE_STRING))) );
$de = (int)$_POST['de'];
$para = (int)$_POST['para'];
if($mensagem != ''){
$insert = BD::conn()->prepare("INSERT INTO `mensagens` (id_de, id_para, mensagem, time, lido) VALUES (?,?,?,?,?)");
$arrayInsert = array($de, $para, $mensagem, time(), 0);
if($insert->execute($arrayInsert)){
echo 'ok';
}else{
echo 'no';
}
}
}
?>
Stream Php file:
<?php
if(isset($_GET)){
include_once "../defines.php";
require_once('../classes/BD.class.php');
BD::conn();
$userOnline = (int)$_GET['user'];
$timestamp = ($_GET['timestamp'] == 0) ? time() : strip_tags(trim($_GET['timestamp']));
$lastid = (isset($_GET['lastid']) && !empty($_GET['lastid'])) ? $_GET['lastid'] : 0;
$usersOn = array();
$agora = date('Y-m-d H:i:s');
$expira = date('Y-m-d H:i:s', strtotime('+1 min'));
$upOnline = BD::conn()->prepare("UPDATE `mls_users` SET `limite` = ? WHERE `id` = ?");
$upOnline->execute(array($expira, $userOnline));
$pegaOnline = BD::conn()->prepare("SELECT * FROM `mls_users` WHERE `id` != '$userOnline' ORDER BY `id` DESC");
$pegaOnline->execute();
while($onlines = $pegaOnline->fetch()){
$photo = ($onlines['photo'] == '') ? 'default.jpg' : $onlines['photo'];
$blocks = explode(',', $onlines['blocks']);
if(!in_array($userOnline, $blocks)){
if($agora >= $onlines['limite']){
$usersOn[] = array('id' => $onlines['id'], 'nome' => utf8_encode($onlines['username']), 'foto' => $photo, 'status' => 'off');
}else{
$usersOn[] = array('id' => $onlines['id'], 'nome' => utf8_encode($onlines['username']), 'foto' => $photo, 'status' => 'on');
}
}
}
if(empty($timestamp)){
die(json_encode(array('status' => 'erro')));
}
$tempoGasto = 0;
$lastidQuery = '';
if(!empty($lastid)){
$lastidQuery = ' AND `id` > '.$lastid;
}
if($_GET['timestamp'] == 0){
$verifica = BD::conn()->prepare("SELECT * FROM `mensagens` WHERE `lido` = 0 ORDER BY `id` DESC");
}else{
$verifica = BD::conn()->prepare("SELECT * FROM `mensagens` WHERE `time` >= $timestamp".$lastidQuery." AND `lido` = 0 ORDER BY `id`DESC");
}
$verifica->execute();
$resultados = $verifica->rowCount();
if($resultados <= 0){
while($resultados <= 0){
if($resultados <= 0){
//durar 30 segundos verificando
if($tempoGasto >= 30){
die(json_encode(array('status' => 'vazio', 'lastid' => 0, 'timestamp' => time(), 'users' => $usersOn)));
exit;
}
//descansar o script por um segundo
sleep(1);
$verifica = BD::conn()->prepare("SELECT * FROM `mensagens` WHERE `time` >= $timestamp".$lastidQuery." AND `lido` = 0 ORDER BY `id`DESC");
$verifica->execute();
$resultados = $verifica->rowCount();
$tempoGasto += 1;
}
}
}
$novasMensagens = array();
if($resultados >= 1){
$emotions = array(':)', ':@', '8)', ':D', ':3', ':(', ';)');
$imgs = array(
'<img src="emotions/nice.png" width="14"/>',
'<img src="emotions/angry.png" width="14"/>',
'<img src="emotions/cool.png" width="14"/>',
'<img src="emotions/happy.png" width="14"/>',
'<img src="emotions/ooh.png" width="14"/>',
'<img src="emotions/sad.png" width="14"/>',
'<img src="emotions/right.png" width="14"/>'
);
while($row = $verifica->fetch()){
$fotouser = '';
$janela_de = 0;
if($userOnline == $row['id_de']){
$janela_de = $row['id_para'];
}elseif($userOnline == $row['id_para']){
$janela_de = $row['id_de'];
$pegaUsr = BD::conn()->prepare("SELECT `photo` FROM `mls_users` WHERE `id` = '$row[id_de]'");
$pegaUsr->execute();
while($usr = $pegaUsr->fetch()){
$fotouser = ($usr['photo'] == '') ? 'default.jpg' : $usr['photo'];
}
}
$msg = str_replace($emotions, $imgs, $row['mensagem']);
$novasMensagens[] = array(
'id' => $row['id'],
'mensagem' => utf8_encode($msg),
'fotouser' => $fotouser,
'id_de' => $row['id_de'],
'id_para' => $row['id_para'],
'janela_de' => $janela_de
);
}
}
$ultimaMsg = end($novasMensagens);
$ultimoId = $ultimaMsg['id'];
die(json_encode(array('status' => 'resultados', 'timestamp' => time(), 'lastid' => $ultimoId, 'dados' => $novasMensagens, 'users' => $usersOn)));
}
?>
