Send data to server even if window is closed

Question

I’m wearing the event beforeunload to try to send an ajax request to the server before the user leaves the page but it has not worked out very well..

Is there any way to send a request that continues to be executed on the server even if the browser window is closed? Maybe with socket, Curl?

Reason: I am making a survey form and would like satisfaction that if the user closes the window and does not complete the search, save what has been answered so far

Answer 1

I was reading about it and I came across the method Navigator.sendBeacon.

It seems that this method allows you to send small requests in order to send analytical data to your server.

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

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

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

It’s important to remember that not all browsers still support this feature (I’m saying this in 2018). But it is important to note that there is a small polyfill

Polyfill to maintain compatibility:

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

Just explaining the above code: The asynchronous request will block the page until the request is sent. One should therefore take due care not to disturb the user’s navigation in such cases.

_{In case I have news, I can add more details}

Answer 2

The event beforeunload will be triggered when a page suffers a "Unload" and not effectively to any scenario where the user leaves the page (turn off the computer for example).

Maybe a solution with Websockets:

1. When the user enters the search page you establish a connection to the server;
2. Each question answered the data is sent to the server;
3. If the user closes the browser, tab or even shuts down the computer, the websocket "close" event will be triggered on the server, so you can finish the search.

What’s wrong with this solution?

In this scenario it is a little complicated to scale the application. If you estimated that the research will have thousands of accesses at the same time, you will have a certain headache with infra not to suffer an "outage" when thousands of accesses are happening at the same time.

This kind of implementation with Websockets is usually a bit complex and can make your application a mess to manage.

I would recommend at least trying (if there is time I will try to write a POC and edit the response with the source)...

Answer 3

I would do so, in each field be it input, select, Buttons etc that is editable by the user, create the property class="userpost", and in 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);
            }
    });

});
...

And in "your.php page" would take the name of the field being sent and the key and would update the field in question, the "on" options of "userpost" is up to you, if when the guy type, leaves the field, glue etc... the processing and validations of the information must be done on the php page.

I imagine this eliminates the need to put timers and get worried if the guy is closing the browser or simply opening another tab.

Answer 4

Use web sockets!

Although it seems controversial, given the previous answers, the use of sockets is the best option, since, you can check if the socket is still connected.

An example using socket.io

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

This solution however is bad, if use only for this purpose, because maintaining connections is costly for the server.