如何有效地满足该用例？

Question

I have a web app that is written using Python and Flask. This web app runs only when the user is connected to the internal VPN. Now let's say that the user is connected to internet and VPN and is browsing the web app and his VPN gets disconnected. In this case he will no longer be able to access the web app. I want to notify the user through my app to connect his VPN again. I have written a Javascript wherein I am making a HEAD ajax call to the app and depending on the status of the response tell whether he is connected to VPN or not. Below are the two functions.

function isConnectedToVpn(){
    var xhr = new (window.ActiveXObject || XMLHttpRequest)("Microsoft.XMLHTTP");
    var status;
    xhr.open("HEAD", "//" + window.location.hostname , false);
    try{
        xhr.send();
        return (xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304));
    }catch (error){
       return false;
    }
}

function isOnline()
{
    return navigator.onLine;
}

Now how can I let the end user download this JS and then run it till his entire session and alert him whenever the site cannot be connected. Also , how will I be able to reduce false positives for instance , if he is connected to VPN and there is a real problem in the app. Any pointers would be useful.

Answer 1

Put your js code on the static folder, then change your js code for isOnline

document.onload = function isOnline()
{
    if !(isConnectedToVpn())
    {
        alert('Your not connected to the VPN');
    }
}

Now make all your templates inherit from a main (base.html) template that import the js:

on base.html

`<script src="{{url_for('yourapp.static',filename='js/yourjsfile.js')}}"></script>`

Put on all your templates this:

{% extends "yourapp/base.html" %}
..
..
..