Jump to content
Adriano_MSB

Ajax em background

Recommended Posts

Pessoal eu tenho uma aplicação com uma pagina que faz uma chamada ajax para meu server o tempo todo a cada 5 segundos. A pagina em si funciona muito bem, mas tem um grande problema a qual não sei o que fazer.

 

A cada 5 seg, eu faço uma chamada no server para verificar se chegou alguma mensagem, pois o usuário tem por obrigação responder imediatamente. Então quando o server responde com novas mensagens eu toco um som para que o usuário saiba que chegou mensagem e faça o trabalho dele.

 

Isso funciona, mas tem um porem, o usuário não fica la olhando pra tela do sistema, ele minimiza a tela do navegador e vai fazer outras coisas, nessa que ele minima o navegador depois de alguns minutos as chamadas ajax param, é como se o navegador parasse de executar os scripts, mas se ele volta para a tela as chamadas voltam a acontecer.

 

Devido a esse problema, a tela não esta atingindo o proposito, pois não esta alertando o usuário.

 

A linguagem, por de traz é asp.net mvc, mas acho que esse problema não é na programação uma vez que ele funciona sem erros. Eu devo fazer alguma configuração para que a pagina continue executando os scripts enquanto estiver minimizada ou o usuário estiver em outra aba?

Share this post


Link to post
Share on other sites

Olá amigo.

 

Na verdade a maior parte dos navegadores modernos não interrompe a execução dos scripts JS enquanto a janela perde o foco ou é minimizada. A única coisa que eles fazem é limitar o processamento e o uso de recursos.

O Chrome e o Firefox por exemplo, se não me falha a memória, limitam as chamadas de setTimeout e setInterval para cerca de 1000ms, mas como você pode imaginar, isso não faria muita diferença no seu código, que teoricamente roda um setInterval de 5000ms.

 

Exemplo: se você recebe um e-mail, o Gmail vai notificar você e alterar o título da janela, então a sua aplicação deveria seguir funcionando normalmente também, concorda?

 

Algumas sugestões:

1 - Procure deixar de fazer essa verificação a cada 5 segundos. Existem soluções mais eficientes para isso, como o WebSocket.

 

2 - Tente inserir um console.log() com a hora atual dentro da parte da sua aplicação que faz as chamadas AJAX no momento. Assim você poderá verificar se as funções estão sendo chamadas de fato e analisar melhor o problema.

 

3 - Teste com navegadores diferentes. Cada um possui uma implementação e um comportamento próprio.

 

4 - Talvez seja interessante tentar portar sua aplicação para Desktop. Por exemplo, sabia que o aplicativo do Spotify Desktop é feito em JS? Você pode fazer o mesmo, com soluções como o Electron: https://electronjs.org/

Edited by Matheus Tavares
Acrescentar a sugestão #4

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By viniciusfroner
      Boa noite, gostaria de saber se alguém conhece algum plug-in que gere esse tipo de mapa, no caso a antiga API do google que fazia isso está off..
       
       
      <div> <iframe style="border:0; width: 100%; height: 350px;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12097.433213460943!2d-74.0062269!3d40.7101282!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xb89d1fe6bc499443!2sNome+SegundoNome!5e0!3m2!1smk!2sbg!4v1539943755621" frameborder="0" allowfullscreen></iframe> </div>  
    • By b2black
      Estava vendo para atualizar o Windows pro 11, e notei isso no site da Microsoft, alguém sabe qual repositorio, ou como pesquisar para desenvolver algo similar?
      Quando você rola a página, o menu fica transparente.
       
      Explore Windows 11 OS, Computers, Apps, & More | Microsoft
    • By viniciusfroner
      Bom dia, quero fazer um botão onde ao der o click pelo pc leve a uma página de contato para o whatsapp e pelo celular leve o número de contato a discagem direta.
      Procurei em alguns lugares mas o método de implementação que encontrei dependeria de codigos javascript que pra mim ainda são muito complexos, como por exemplo:
       
      function detectar_mobile() { var check = false; //wrapper no check (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); return check; } <a href="" class="get-started-btn scrollto">Ligue para nós</a>  
    • By klasss
      Olá a todos, 

      Gostaria de saber se alguem conhece um layout para efetuar o registo de folha de ponto. 

      Algo do género :  Mês - Dias do mês em questão - Possibilidade de colocar as horas trabalhadas. 

      Deixo uma imagem de exemplo. 
      Obrigado!
       

    • By Air-Gear
      Olá, na parte de enviar eu conseguir, mas manter até terminar o cadastro eu não conseguir. Eu vou contar toda a história para ficar mais claro possível.
       
      Eu precisei implementar um Upload de qualquer imagem ou PDF na página de solicitar compras. O site utiliza AngularJS, a primeira versão do Angular. Eu tentei fazer sem depender de PHP, mas na internet achava só a parte de Front-End e ninguém sabia fazer no Back-End. Então eu resolvi fazer com PHP mesmo.
       
      Nó código PHP, ele aceita todos as extensões de imagens mais o PDF e é possível envia-los todos de uma vez na quantidade que quiser. Todos os arquivos serão renomeados, contendo no nome o ID do usuário logado pego pela função javascript, o dia do mês, o mês, o ano, o dia da semana, a hora, o minuto, o segundo, se é AM ou PM e uma numeração aleatório. O arquivo PDF vai continuar sendo PDF e todas as imagens serão JPG. No final, todos serão enviados para uma pasta chamada upload.
       
      Só que agora eu preciso jogar de volta para página para salvar os novos nomes dos arquivos para continuar o cadastro da solicitação de compras. Como AngularJS utiliza Javascript, eu tentei usa-lo dentro do PHP utilizando EOF, mas não tive resultado. Eu só consigo com HTML com as diretivas do AngularJS. Na parte do API, nos atributos, eu declarei "nomeArquivo: []," , para salvar os nomes dos arquivos.
       
      Seguem o código.
      <div class="row"> <div class="col-sm-12 col-md-6 "> <div class="upload_form_cont"> <form id="upload_form" enctype="multipart/form-data" method="post" action="/profile-upload"> <div> <div><label for="image_file">Selecione o arquivo de imagem</label></div> <div><input type="file" name="image_file" id="image_file" accept="image/*" onchange="fileSelected();" /></div> </div> <div> <input type="button" value="Upload" onclick="startUploading()" /> </div> <div id="fileinfo"> <div id="filename"></div> <div id="filesize"></div> <div id="filetype"></div> <div id="filedim"></div> </div> <div id="error">Você deve selecionar apenas arquivos de imagem válidos!</div> <div id="error2">Ocorreu um erro ao enviar o arquivo</div> <div id="abort">O upload foi cancelado pelo usuário ou o navegador interrompeu a conexão</div> <div id="warnsize">Seu arquivo é muito grande. Não podemos aceitar isso. Selecione arquivos pequenos</div> <div id="progress_info"> <div id="progress"></div> <div id="progress_percent">&nbsp;</div> <div class="clear_both"></div> <div> <div id="speed">&nbsp;</div> <div id="remaining">&nbsp;</div> <div id="b_transfered">&nbsp;</div> <div class="clear_both"></div> </div> <div id="upload_response"></div> </div> </form> </div> </div> </div> upload.php
      <?php function bytesToSize1024($bytes, $precision = 2) { $unit = array('B','KB','MB'); return @round($bytes / pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i]; } //Pega o id do usuário logado $id_url = $_GET['id']; // Numero de campos de upload $numeroCampos = count($_FILES['image_file']['name']); // Tamanho máximo do arquivo (em bytes) $tamanhoMaximo = 1024*1024*2; // Extensões aceitas $extensoes = array(".jpg", "jpeg", ".gif", ".png", ".pdf", ".bmp", ".pdf", ".tiff"); //Local da pasta $_UP['pasta'] = '../upload/'; $substituir = false; for ($i = 0; $i < $numeroCampos; $i++) { // Informações do arquivo enviado $sFileName = $_FILES['image_file']['name'][$i]; $sSize = $_FILES['image_file']['size'][$i]; $sFileSize = bytesToSize1024($sSize, 1); $nomeTemporario = $_FILES['image_file']['tmp_name'][$i]; // Verifica se o arquivo foi colocado no campo if (!empty($sFileName)) { $erro = false; // Verifica se o tamanho do arquivo é maior que o permitido if ($sSize > $tamanhoMaximo) { $erro = "O arquivo " . $sFileName . " não deve ultrapassar " . $tamanhoMaximo. " bytes"; } // Verifica se a extensão está entre as aceitas elseif (!in_array(strrchr($sFileName, "."), $extensoes)) { $erro = "A extensão do arquivo <b>" . $sFileName . "</b> não é válida"; } // Verifica se o arquivo existe e se é para substituir elseif (file_exists($_UP['pasta'] . $sFileName) and !$substituir) { $erro = "O arquivo <b>" . $sFileName . "</b> já existe"; } else{ //Pega a extensão do arquivo $TipoExtensao = pathinfo($sFileName, PATHINFO_EXTENSION); // O arquivo passou em todas as verificações, hora de tentar movê-lo para a pasta // Primeiro verifica se deve trocar o nome do arquivo $unixTime = time(); $timeZone = new \DateTimeZone('America/Sao_Paulo'); $time = new \DateTime(); $time->setTimestamp($unixTime)->setTimezone($timeZone); $formattedTime = $time->format('d-m-Y_l_h-i-s-a'); $aleatorio = rand(); if($TipoExtensao == 'pdf'){ $nome_final = $id_url .'_'. $formattedTime .'_'. $aleatorio .'.pdf'; }else{ $nome_final = $id_url .'_'. $formattedTime .'_'. $aleatorio .'.jpg'; } // Depois verifica se é possível mover o arquivo para a pasta escolhida if (move_uploaded_file($nomeTemporario, $_UP['pasta'] . $nome_final)) { // Upload efetuado com sucesso, exibe uma mensagem e um link para o arquivo echo "Upload do arquivo ".$sFileName." foi efetuado com sucesso!"; echo "</br>"; echo<<<EOF <p>Eu tentei implementar o retorno da página aqui!</p> <p></br></p> <p></br></p> EOF; } else { // Não foi possível fazer o upload, provavelmente a pasta está incorreta echo "Não foi possível enviar o arquivo, tente novamente"; echo "</br>"; } } } else { echo "Selecione algum arquivo de imagem ou PDF para fazero upload."; } } ?>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.