4

Como não há a Code Review Stack Exchange em Português e o Stack Overflow PT abrange esse tópico peço ajuda em um código que estou trabalhando: sugestões e críticas a respeito de um script de chat que estou desenvolvendo em JavaScript para dinamizar um já existente em PHP.

Essa ideia acabou tornando-se um desafio para mim pois não posso alterar o código-fonte do PHP já que o script é uma sugestão de melhoria a um site que eu uso diariamente e o responsável por ele nem tem tempo no momento, nem disponibilizou o código.

O script atual trabalha gerando uma tabela onde cada mensagem enviada é composta por duas <tr>, a primeira com três <td> os dados de quem enviou e a segunda com uma única <td> com a mensagem. O envio de mensagens é por uma requisição POST, com a mensagem no campo mensagem e a elas são apagadas com uma requisição GET com o ID da mensagem a ser apagado no campo del.

Para dinamizá-lo decidi implementar uma função que compara a página atual com uma nova carregada via AJAX. São considerados os casos onde mensagens são adicionadas e removidas, além disso há o aviso de novas mensagens por mensagem no topo da página e no título da página. Usei jQuery porque a biblioteca já é usada em outras páginas do site.
A versão atual do código está publicada nesse gist, e aqui também:

// ==UserScript==
// @name        Sugestões de Mudança para a Shoutbox
// @version     1.5.14
// @grant       none
// @updateURL   https://rawgit.com/qgustavor/fc66dc1aa54c2c3a9970/raw/shoutbox.js
// @downloadURL https://rawgit.com/qgustavor/fc66dc1aa54c2c3a9970/raw/shoutbox.js
// ==/UserScript==

;(function functionWrapper(){
  // Coloque `true` para voltar a forma antiga de apagar mensagens:
  var APAGAR_USANDO_CONFIRM = false;
  
  // Para testar só colar o código no console
  // (aperte F12 e ESC que deve abrir)
  // Se for bloqueado siga as instruções do navegador
  
  // Caso queira testar esse script como user script
  // as linhas abaixam lidam com a adaptação.
  if (typeof $ === 'undefined') {
    var el = document.createElement('script');
    el.innerHTML = '(' + functionWrapper  + '());';
    document.head.appendChild(el);
    return;
  }
  
  // Se quiser aplicar as mudanças no site
  // leia os comentários que explicam
  // o que o script altera.

  // Desative o script atual de atualização
  // As linhas abaixo fazem isso, porém
  // não é a melhor maneira e sim removendo.
  $.fn.load = $.noop;

  // Adicione esse código CSS em um arquivo 
  // O código da animação veio do css-spinners.com
  // então processado no AutoPrefixer e finalmente Devilo.us
  $('<style>', {
    html: '@-webkit-keyframes spinner-loader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner-loader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.spinning{-webkit-animation:spinner-loader 1500ms infinite linear;animation:spinner-loader 1500ms infinite linear}.message-alert{position:absolute;text-align:center;background:#bbdefb ;left:0;top:0;right:0;padding:1em}.shoutbox_contain{height:245px/* valor padrão para navegadores antigos */;height:calc(100vh - 45px)}@-webkit-keyframes new-message{0%{background:#bbdefb}100%{background:#f4f4f4!important}}@keyframes new-message{0%{background:#bbdefb}100%{background:#f4f4f4!important}}.highlight{-webkit-animation:new-message 3s ease-in 1;animation:new-message 3s ease-in 1}.history-link-row{text-align:center;background:#f4f4f4}.history-link-row td{padding:1em}.shoutboxform_input{margin-left:10px;margin-right:150px}.shoutboxform_input input{width:100%}.shoutboxform_links{float:right;width:100px;text-align:center;padding:6px 0}.shoutboxform_links a{margin:0 5px}td:only-child a{word-break:break-all}form{margin-top:5px}'
  }).appendTo('head');
  
  // Substitua o formulário baseado em tabelas com um baseado em classes:
  $('form').html('<div class="shoutboxform_links"><a href="#" class="emoticon-link"><i title="Emoticons" class="icon-heart"></i></small></a><a href="?"><i title="Atualizar" class="icon-refresh"></i></a><a href="shoutbox.php?history=1" target="_top"><i title="Histórico" class="icon-book"></i></a></div><div class="shoutboxform_input input-append"><input class="shoutbox_msgbox" placeholder="→ CAMPO DE CHAT ←" type="text" name="message"><button class="btn" type="submit" name="submit">Enviar</button></div>');
  
  var DEFAULT_TITLE = top.document.title;
  var container = $('.shoutbox_contain');
  var containerBody = $('.shoutbox_contain tbody');
  var refreshIcon = $('.icon-refresh').click(loadAjax);
  var unreadMessages = $();
  var timeBetweenReloads;
  var timer;
  
  // Retorna a função de emoticons:
  $('.emoticon-link').on('click', function(evt) {
    evt.preventDefault();
    PopMoreSmiles('shoutboxform', 'message');
  });
  
  // Adiciona um link para ver o histórico de mensagens no final
  // Se for adicionado no HTML é melhor
  containerBody.append('<tr><td></td><td></td><td></td><tr>'); // As <tr> são sempre aos pares
  $('<tr>', {'class': 'history-link-row'}).appendTo(containerBody)
  .append($('<td>',{colspan:3}).append(
    $('<a>', {
    href: 'shoutbox.php?history=1',
    target: '_top', // _blank = nova janela, _top = na janela atual
    text: 'Ver histórico de mensagens' // ou 'Ver mensagens anteriores'
  })));

  setRefreshTimer();
  setMessageDeleteHandlers();
  
  function setMessageDeleteHandlers() {
    $('a[href*="shoutbox.php?del="][onclick]')
    .removeAttr('onclick')
    .on('click', handleMessageDelete);
  }
  
  function handleMessageDelete(evt) {
    var $this = $(this);
    var deleteHref = $this.attr('href').match(/\?(del=\d+)/)[1];
    
    evt.preventDefault();
    
    // Caso queira voltar a forma antiga só
    // alterar o valor dessa constante
    if (APAGAR_USANDO_CONFIRM) {
      if (confirm('Tem certeza que quer deletar esta mensagem?')) {
        loadAjax({ data: deleteHref });
      }
      return;
    }
    
    // Ao invés de confirm, precisa de alguns ajustes...
    showMessage('Você tem certeza? Clique nessa mensagem para confirmar', function() {      
      loadAjax({
        data: deleteHref
      });
    });
  }
  
  $('form').on('submit', handleMessageSent);
  
  function handleMessageSent(evt) {
    // Por praticidade (i.e. não ter que lembrar da documentação)
    // copiei isso do http://ginpen.com/2013/05/07/jquery-ajax-form/
    var $form = $(this),
        $input = $form.find('.shoutbox_msgbox');
        
    evt.preventDefault();
    
    loadAjax({
      url: $form.attr('action'),
      type: $form.attr('method'),
      data: $form.serialize()
    })
    .always(function () {
      $input.removeAttr('disabled').val('');
    });
    
    $input.attr('disabled', true).val('Enviando mensagem...');
  }

  // As duas funções abaixo chamam uma a outra
  // para que seja possível controlar o timer
  // e assim pará-lo quando clicar no .icon-refresh
  function refreshLoop() {
    loadAjax(setRefreshTimer);
  }
  
  function setRefreshTimer() {
    // Usar valor padrão de 30, caso não tenha sido definido
    timer = setTimeout(refreshLoop, timeBetweenReloads || 30e3);
  }

  // Carregar as novas mensagens usando $.ajax
  // Além disso adicionar uma animação de carregando
  // e parar o timer, evitando que a página
  // seja carregada várias vezes seguidas
  function loadAjax(opt) {
    // Se a função for chamada por um evento:
    if (opt instanceof $.Event) {
      opt.preventDefault();
      opt = {};
    }
    
    refreshIcon.addClass('spinning');
    clearTimeout(timer);
    
    return $.ajax('shoutbox.php', opt || {})
      .done(gotNewMessages)
      .fail(failedGettingMessages)
      .always(afterChatLoaded);
  }
  
  // Independente se carrregou ou não
  // parar a animação e agendar para carregar novamente
  function afterChatLoaded() {
    refreshIcon.removeClass('spinning');
    setRefreshTimer();
  }
  
  // Avisar caso as mensagens não carreguem e voltar
  // o tempo entre recarregamentos ao padrão
  function failedGettingMessages() {
    showMessage('Não foi possível carregar novas mensagens');
    timeBetweenReloads = null;
  }

  // Caso a página tenha sido carregada então processá-la
  function gotNewMessages(returnedHtml) {
    // Amarzena estado anterior de scroll antes de aplicar as modificações:
    var firstOldMessage = containerBody.children().first();
    var oldPosition = firstOldMessage.offset().top;
    var scrolledLength = container.scrollTop();
    
    // Tentar adivinhar quantas mensagens são novas
    // comparando a página atual com a carregada
    var currentMessages = $('tr td:only-child');
    var currentMessagesData = currentMessages.map(function (){
      return $(this).html();
    }).get();
    var returnedMessages = $('<div>', {html: returnedHtml})
    .find('.shoutbox_contain tr td:only-child');
    
    var lastIndex = -1;
    var newMessages = $();
    
    returnedMessages.each(function () {
      var $this = $(this);
      var elementData = $this.html();
      // O segundo argumento do indexOf garante a ordem das mensagens:
      var index = currentMessagesData.indexOf(elementData, lastIndex + 1);
      
      // A mensagem já tinha sido registrada:
      if (index !== -1) {
        // Elimina mensagens apagadas:
        if(index - lastIndex > 1) {
          currentMessages.slice(lastIndex + 1, index).each(function (n) {
            // Mais informação sobre essa corrente nas linhas abaixo
            var removedElements = $(this).parent().prev().addBack();
            
            // Remover da lista de mensagens não lidas:
            // Adicionado porque o número de mensagens estava alto
            // Removido por que ficou baixo. Motivo: desconhecido.
            // unreadMessages.find(removedElements).remove();
            
            // Remover da lista de mensagens mostradas:
            removedElements.fadeOut(1200, function(){
              $(this).remove();
            });
          });
        }
        lastIndex = index;
        
      // A mensagem não tinha sido
      // registrada então adicioná-la
      } else {
        // $this é o <td> no segundo <tr>
        // logo para pegar toda a mensagem
        // seleciona o <tr> e o anterior a ele.
        var newMessagesElements = $this.parent().prev().addBack();
        currentMessages.eq(lastIndex + 1).parent().prev().before(newMessagesElements);
        
        // Só considerar mensagens novas aquelas que forem adicionadas anteriormente as já existentes:
        // Por algum motivo está considerando menos mensagens do que deveria
        if (lastIndex + 1 <= newMessages.length) {
          newMessages = newMessages.add(newMessagesElements.prevAll().andSelf());
        }
      }
    });
    
    // Se estiver houvendo uma conversa ativa então
    // carregar mensagens em um intervalo mais rápido
    // se não aumentar o intervalo para aliviar o servidor
    // ajuste os valores se necessário
    timeBetweenReloads = Math.max(
      10, // Intervalo mínimo de 10 segundos
      60 - newMessages.length * 15 // Cada nova mensagem reduz o intervalo em 15 segundos
    ) * 1000; // Finalmente converte para milisegundos

    if (newMessages.length === 0) { return; }
    setMessageDeleteHandlers();
    
    // Se não estiver na página então deixar
    // um aviso pelo título da página
    if (document.hidden) {
      // unreadMessages amarzena os elementos das novas mensagens
      unreadMessages = unreadMessages.add(newMessages);
      // Como cada mensagem é composta de dois elementos logo se divide por dois
      top.document.title = '(' + (unreadMessages.length / 2) + ') ' + DEFAULT_TITLE;
      
      // Se for a primeira vez que isso acontece:
      if (unreadMessages.length === newMessages.length) {
        // O código para detectar quando voltou a página é simplificado,
        // a versão completa dele está nessa página:
        // https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API
        $(document).one('visibilitychange', function () {
          // volta o título ao padrão:
          top.document.title = DEFAULT_TITLE;
          // Seleciona a ultima mensagem e alinha o fundo do scroll com ela:
          scrollToElement(unreadMessages.last(), function () {
            unreadMessages.addClass('highlight');
            // Limpa a fila de mensagens não lidas:
            unreadMessages = $();
          });
        });
      }
    // Se estiver lendo mensagens anteriores
    } else if (scrolledLength !== 0) {
      // Manter o scroll no mesmo ponto,
      // para não interromper a leitura:
      container.scrollTop(scrolledLength + firstOldMessage.offset().top - oldPosition);
      
      // Avisar que há novas mensagens por
      // meio de um aviso no topo da página
      showMessage(newMessages.length === 2 ? 'Há uma mensagem nova' :
        ('Há ' + (newMessages.length / 2) + ' novas mensagens'), function () {
          scrollToElement(newMessages.last(), function () {
            newMessages.addClass('highlight');
          });
        });
    } else {
      newMessages.addClass('highlight');
    }
  }
  
  // Cria uma mensagem de aviso no topo da página
  // Aceita uma função no segundo argumento
  // que é chamada caso a mensagem seja clicada
  function showMessage(message, callback) {
    var el = $('<div>', {
      text: message,
      'class': 'message-alert'
    })
    .appendTo('body')
    .on('mousedown touchstart', function handler(evt) {
      // Evita ser chamado mais de uma vez
      el.off('mousedown touchstart', handler);
      
      // Chama o callback, se definido
      if (typeof callback == 'function') {
        callback();
      }
      
      // Faz a animação de fadeout
      el.stop(true).fadeOut(300, function () {
        el.remove();
      });
    })
    // Usando as animações do jQuery
    // Há CSS3, mas nesse caso tudo bem
    .hide().fadeIn(1000)
    .delay(5e3 /* 5 segundos*/ )
    .fadeOut(1000, function () {
      el.remove();
    });
  }
  
  // Coloca o fundo do scroll no elemento
  // Se não for possível irá o mais próximo
  function scrollToElement(el, callback) {
    container.animate({
      scrollTop: el.position().top - container.height() + container.scrollTop() + el.height()
    }, 600, 'swing', callback || $.noop);
  }
}());

Considerei também que com somente essas informações talvez não seria suficiente para vocês terem uma ideia do que estou trabalhando pensei em fazer um fiddle, mas não seria possível fazer um que simulasse o servidor. Dessa forma implementei uma simulação usando Service Workers (testei no Google Chrome) e assim espero que sirva para a melhor compreensão.

Estou pedindo ajuda pois alguns usuários estão reportando os seguintes problemas: mensagens desaparecendo, duplicadas e contagem errada de mensagens novas. Já fiz vários testes, nessa simulação, no servidor de desenvolvimento e no de produção, sem resultados. Finalmente caso eu não tenha dado informações suficientes comentem e caso a pergunta não esteja de acordo com o estilo correto editem.

4
  • 1
    Eu acho isso inviável de resolver num ambiente informal devido ao custo de tempo.. e, tempo é dinheiro. Quando abri o código, pensei que teria umas 2 ou 3 funções e no máximo umas 30 linhas. Na verdade não tem nada muito complexo, mas, de qualquer forma custa tempo. 31/08/2015 às 23:45
  • 1
    @GustavoRodrigues, por mais que eu acredite que NodeJS com SocketIO ou ASP.NET com SignalR sejam mais apropriados para um chat, acredito que PHP com Ratchet deve permitir a criação de um Broadcast, assim simplificando o seu server-side... outra coisa a se considerá, é o seu server-side receber e enviar apenas JSON, e montar as mensagens usando algo como Handlebars 1/09/2015 às 11:30
  • Entendo seu dilema, mas sinto em informar que ninguém tem o direito de lhe dizer o que e como você vai desenvolver fica tudo baseado em opiniões, se quer alguma direção acho que os comentários já foram suficientes NodeJs, ASP.NET e Ratchet tem exemplos prontos para esse sua dúvida basta escolher uma testa-la adapta-la ou descarta-la. 1/09/2015 às 11:45
  • Não sei se chegaram a ver o código-fonte da simulação: ele é baseado em Handlebars, como sugeriram. Estou acostumado com Node, mas como eu disse na pergunta não estou em posição de sugerir alterações no servidor. As respostas atuais já são de grande ajuda mesmo assim. 1/09/2015 às 12:49

1 Resposta 1

2

Um desafio interessante, mas infelizmente estou sem tempo para analisar todo o código em detalhes e propor melhorias.

Cuidado com a concorrência

Em linhas gerais, quando ocorrem problemas aleatórios, como essas mensagens duplicadas ou que desaparecem, o problema é relacionado à concorrência, por isso em testes simples isso não ocorre, mas quando vários usuários usam o sistema os erros aparecem.

Uma forma de determinar melhor o problema é adicionar algum tipo de log em produção. Quando alguém reclamar, revise o log e veja quais as mensagens foram exibidas e quando. Assim pode-se facilmente isolar o problema.

Cuidado com a Rede

Outro cenário possível é que uma conexão ruim faça com que algumas chamadas Ajax sejam perdidas e outras duplicadas. Esse é mais um caso onde não se encontra problemas nos testes, mas os mesmos aparecem nos clientes.

Supondo que não haja um erro bobo ou de lógica no código, minha sugestão é usar algum valor que possa identificar cada mensagem individualmente ao invés de confiar na ordem e quantidade de mensagens e tentar adivinhar (como está no código) quais são as novas mensagens.

Afaste-se um pouco do HTML

Outra possível melhoria seria diminuir a quantidade de código que manipula e seleciona diretamente o HTML.

Talvez usar uma biblioteca como AngularJS ou ReactJS seja um pouco mais fácil nesse caso, pois aí você pode se preocupar apenas em obter os dados e deixa a cargo da biblioteca mostrar as mensagens corretamente.

Considerações

Enfim, eu sei que foram dicas abstratas e que tomam algum tempo para se implementar, mas espero que tenha sido de alguma ajuda.

1
  • Vou entrar em contato com o desenvolvedor do site para ver se consigo ter acesso ao código da página e criar uma saída em JSON, então dessa forma conseguir os valores que não são expostos no HTML, assim não precisando adivinhar os dados. De princípio considerei usar as bibliotecas, mas pessoalmente estou evitando-as no momento (nunca gostei de AngularJS e ReactJS eu fiz um projeto inteiro com ele para então nunca mais querer usá-lo), preferindo módulos pequenos e vanilla js (mas como já usavam jQuery então mantive ele). 1/09/2015 às 13:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .