javascript - Jquery/Php 聊天脚本和我有一些问题

Question

我有一个供用户聊天的 Jquery/Php 进程，如果我向在线用户发送消息，然后最小化聊天窗口或关闭它，或者刷新页面，我会遇到一些问题，聊天窗口每次都会弹出时间，我希望关闭窗口永远关闭，并且当我最小化栏上的思维时，即使我刷新页面以在栏上保持最小化，也能保持在那里。

下一个问题是有时当我发送消息并按回车键时，消息不会显示，但当我刷新页面时，消息会显示出来。

Ps:该脚本不是我的，我在 youtube 上找到的。

Jquery 聊天脚本:

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);
});

历史 PHP 文件:

<?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) );
}
?>

提交 PHP 文件:

    <?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';
            }
        }
    }
?>

流式 PHP 文件:

    <?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)));
}
?>

Answer 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");
          }
        }
      });
    }
  });