Check when the user is both offline and in editing mode
Closed, ResolvedPublic

Description

A simple script (js of course) is needed to check when the user is offline and when he's editing a page.

Just for test purpose you think about a function fired from those the offline event (and the condition of editing mode) that simply puts an alert.

I think we can use this (not tested) code

if(navigator.onLine)
  {
    alert('Online');
  }
  else
  {
    alert('Offline')
  }

to detect the status

grigoletti added a comment.EditedJun 19 2016, 10:21 PM

I think we can use this (not tested) code
to detect the status

Yes, it can work! @srijancse also found this https://github.com/HubSpot/offline that has the ability to wrap the ajax request and send them when the connection is re-estabilished but I don't know if it's really necessary for now

What I did is this:

$('#wpTextbox1').bind('input propertychange', function() {

    alert("User is editing");

}

This alerts the user whenever he types or pastes something in the editor. What i'm trying to do now, is writing a function inside this which will alert the user simultaneously, if he goes offline.

The code suggested by @tomaluca , is not working because I guess it watches the network and not the connection to the server. It only alerts 'online' even if I stop the dockers and turn off the internet connectivity!

Ok, so remember to link here the commit when you think it's ready and we can see if we can close the task :)

The code suggested by @tomaluca , is not working because I guess it watches the network and not the connection to the server. It only alerts 'online' even if I stop the dockers and turn off the internet connectivity!

The code uses the browser internet status, if you shutdown the internet connection is detected but if the server is in the intranet is not detected.
Can be a more efficient way to check the internet status on mobile phone or poor bandwith lines (is checked once by the browser for every application)

Yeah so this the code.

//Function to notify the user if he's editing

$('#wpTextbox1').bind('input propertychange', function() {

//An ajax call is done to server-side page. If the browser is offline, then the connection will fail and,
//thus, the oneerror event will be called. Otherwise, the onload event is called.


    function isOnline(no, yes) {
        var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp');
        xhr.onload = function() {
            if (yes instanceof Function) {
                yes();
            }
        }
        xhr.onerror = function() {
            if (no instanceof Function) {
                no();
            }
        }
        xhr.open("HEAD", "WikiEditor.php", true); //We can change the URL to point to any file that exists on server.
        xhr.send();
    }

    isOnline(
        function() {
            alert("Offline and User is editing");
        },
        function() {
            alert("Online"); //We don't actually need this
        }
    );

});

And it works perfectly!

I think you have to parse the error and check why you got an error.

Because if is the server with an internal error (500) or an http status like 401 or 403 in this way the script detects an offline status of the client.

I think you have to parse the error and check why you got an error.

Because if is the server with an internal error (500) or an http status like 401 or 403 in this way the script detects an offline status of the client.

Okay, but do we actually need to check that? Because how far I read is 401 or 403 occurs either when you're unauthorized or forbidden and error 500 is the server error. But once the user is editing, does the type of error matters?

We can suppose that if the page is loaded and the user is editing a 500 or any other status is negligible for now. I am not sure about the performance of this. You're making an XMLHttp object and request everytime the textarea of the Textbox changes. I will test that and let you know!

So, this is working. I'm attaching the screenshots of its working.

srijancse closed this task as Resolved.Jun 23 2016, 5:48 AM