8

Estou usando o evento beforeunload para tentar enviar uma requisição ajax para o servidor antes do usuário sair da página mas não tem dado muito certo..

Tem alguma forma de enviar uma requisição que continua ser executada no servidor mesmo que a janela do navegador seja fechada? Talvez com socket, cURL?

Motivo: Estou fazendo um formulário de pesquisa e satisfação gostaria que caso o usuário feche a janela e não conclua a pesquisa, salvar o que foi respondido até o momento

10
  • 1
    Quem deu o downvote poderia por favor deixar escrito o motivo? 3/05/2017 às 13:23
  • Com socket, acho que não. Mas acho que é possível fazer uma request AJAX, se deixar ela síncrona. Mas não acho que seja uma boa ideia... 3/05/2017 às 13:29
  • Tem como detalhar melhor seu propósito? Qual seria esta requisição e qual a finalidade dela? Você já tentou criar uma thread no servidor para processar o que for preciso?
    – Woss
    3/05/2017 às 13:36
  • @AndersonCarlosWoss sim, editei a pergunta 3/05/2017 às 13:44
  • 4
    @SilvioAndorinha acho que nessa dada situação, a melhor alternativa é você salvar periodicamente o que já foi preenchido. Temos um sistema semelhante aqui na empresa e ele salva o que já foi preenchido de minuto em minuto 3/05/2017 às 13:46

4 Respostas 4

7
+50

Eu estava lendo sobre isso e acabei me deparando com o método Navigator.sendBeacon.

Parece que esse método permite que você envie pequenas requisições, com o fim de enviar dados analíticos para seu servidor.

// Adiciona um evento que é executado ao "descarregamento" da página

window.addEventListener("unload", logData, false);

function logData() {
  navigator.sendBeacon("/log", analyticsData);
}

É importante lembrar que nem todos os browser ainda suportam essa funcionalidade (estou falando isso em 2018). Porém é importante ressaltar que existe um pequeno polyfill

Polyfill para manter a compatibilidade:

navigator.sendBeacon = navigator.sendBeacon || function (url, data) {
  var client = new XMLHttpRequest();
  client.open("POST", url, false); // terceiro parâmetro indica que a solicitação será assíncrona
  client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
  client.send(data);
};

Apenas explicando o código acima: A requisição assíncrona bloqueará a página até que a requisição seja enviada. Deve-se, portanto, tomar o devido cuidado para não atrapalhar a navegação do usuário em tais casos.

Caso eu tenha novidades, eu posso adicionar mais detalhes

6
  • 2
    Adicional: Não esqueçam que se por acaso uma aba falhar ou o browser fechar inesperadamente ou o sistema operacional for desligado, ou não tiver conexão com a internet é bem provável que isto não irá funcionar, no entanto combinar navigator.sendBeacon com um sistema de ociosidade de tempo pode funcionar muito bem.
    – Syzoth
    6/03/2018 às 17:27
  • 1
    Embora eu já tenha respondido sobre o envio das requisições ao fechar o navegador, talvez uma outra solução bacana seria ir atualizando essas informações, gradualmente, à medida que o usuário vá preenchendo o formulário (já que é o ponto principal abordado pelo autor na observação) 7/03/2018 às 11:41
  • 1
    A resposta é a melhor mas Chrome (o navegador mais usado) tem um bug desde a versão 59. Se a chamada para o servidor for cross-origin vai depender de CORS também... @WallaceMaxters se eu puder contribuir com sua resposta deixo esta essência 11/03/2018 às 9:52
  • @LauroMoraes excelente informação, ainda não testei no 64, mas vou experimentar aplicando o headers e testando o resultado (se bem que pelo que entendi é devido ao request e não ao response). +1
    – Syzoth
    13/03/2018 às 20:11
  • @GuilhermeNascimento sim, é no request. Chrome faz um prefligth JSON foi bloqueado por ser uma falha de segurança (vulnerabilidade cross-origin), pelo que pude entender não foi corrigido ainda porque implica em mexer um funções de "origin" e "politicas" que estão atreladas a XHR e Fetch... o bug persiste em Chrome 65. screen-1, screen-2 13/03/2018 às 22:33
1

O evento beforeunload será acionado quando página sofrer um "unload" e não efetivamente a qualquer cenário onde o usuário sai da página(desligar o computador por exemplo).

Talvez uma solução com WebSockets:

  1. Quando o usuário entra na página de pesquisa você estabelece uma conexão com o servidor;
  2. A cada pergunta respondida o dado é enviado para o servidor;
  3. Caso o usuário feche o browser, a aba ou até mesmo desligue o computador, o evento "close" do websocket será acionado no servidor, assim você pode finalizar a pesquisa.

Qual o problema dessa solução?

Neste cenário é um pouco complicado escalar a aplicação. Se você estimou que a pesquisa terá milhares de acessos ao mesmo tempo, você terá uma certa dor de cabeça com infra pra não sofrer um "outage" quando milhares de acessos estiverem occorendo ao mesmo tempo.

Esse tipo de implementação com Websockets geralmente é um pouco complexo e pode tornar sua aplicação uma bagunça pra gerenciar.

Eu recomendaria pelo menos tentar(se sobrar um tempo tentarei escrever uma POC e edito a resposta com o source)...

0

Eu faria assim, em cada campo seja ele input, select, buttons etc que seja editável pelo usuário, criaria a propriedade class="userpost", e no javascript

...
$(".userpost").on("click, blur, paste, keyup", function(){

   $.ajax({
            data:  {"suachave" : "chavevalor", $(this).prop("name") : $(this).val()},
            url:   "suapagina.php",
            type:  'post',
            success:  function (response) { 
                    $("#resultado").html(response);
            }
    });

});
...

E na "suapagina.php" pegaria o nome do campo que esta sendo enviado e a chave e faria um update no campo em questão, as opções "on" do "userpost" fica a seu criterio, se quando o cara digita, sai do campo, cola etc... o tratamento e validações das informações devem ser feita na pagina php.

Imagino que isso elimine a necessidade de colocar timers e ficar preocupado se o cara esta fechando o navegador ou simplesmente abrindo outra aba.

-1

Use web sockets!

Apesar de parecer controverso, dado as respostas anteriores, o uso de sockets é a melhor opção, uma vez que, você pode verificar se o socket ainda está conectado.

Um exemplo usando socket.io

socket.on('disconnect', function() {
  console.log('Desconectou-se');
});

Esta solução no entanto é ruim, caso utilize-a apenas para esta finalidade, pois manter conexões é custoso para o servidor.

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 .