Checking Internet Connection using SmartGWT or GWT? - gwt

Question

How can we check if there is Internet connectivity in the application or not in SmartGWT or GWT? I have to determine that whether there is internet connection or not and based on that change the icon for Internet connectivity to either green or red so is there a way to do it in SmartGWT or GWT?

Answer 1

You can create a native method in which you create a new image object (new Image()) and attach handler to it's onload and onerror properties. You can point the image's src property to some URL that you feel indicates being online. Then from your onload and onerror methods you can call methods in your GWT component to update your connectivity indicator. You need to set img.src after you set img.onload and img.onerror.
For example:
native void checkConnectivity(Example obj) /*-{
var img = new Image();
img.onload = function() {
obj.#com.example.client.Example::online()();
}
img.onerror = function() {
obj.#com.example.client.Example::offline()();
}
img.src = "http://exampleapp.com/test.gif";
}-*/;

Answer 2

I think the navigator.onLine will help you:
http://html5demos.com/offline
http://www.html5rocks.com/en/features/offline
You may need to wrap the calls into JSNI and also implement an eventlistener.
public native Boolean isOnline()/*-{
return window.onLine;
}-*/;

Answer 3

Udeleng's solution is the closest i have come to a cross-browser approach. I have been testing it on FF 18 but i believe it will work in any browser.
However, note that the browser pre-loads the image when you call new Image(), caching it such that subsequent calls to the same URL don't make an HTTP call. This kills the effect we want to achieve i.e. transition from offline to online status works but as soon as the browser gets any connection, the image is cached, and end of story, even if you unplug your ethernet cable.
SOLUTION
Add a state parameter to the URL and give it a random number, the idea is to trick the browser into thinking its a new image such that the image is fetched from the server each time, rather than the cache.
Of course you need to add the timer. Here is my code:
import com.google.gwt.core.shared.GWT;
import com.google.gwt.user.client.Timer;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Img;
import com.smartgwt.client.widgets.events.DrawEvent;
import com.smartgwt.client.widgets.events.DrawHandler;
public class WebConnChecker extends Img {
private static final String ONLINE="online_stat.jpg";
private static final String OFFLINE="offline_stat.jpg";
private static final int INTERVAL=10000;
private Timer timer;
public WebConnChecker(){
setSize(16);
timer=new Timer() {
#Override
public void run() {
checkConnectivity(WebConnChecker.this);
}
};
addDrawHandler(new DrawHandler() {
#Override
public void onDraw(DrawEvent event) {
timer.scheduleRepeating(INTERVAL);
}
});
}
private void online(){
log("online detected");
this.setSrc(ONLINE);
}
private void offline(){
log("offline detected");
this.setSrc(OFFLINE);
}
private native void checkConnectivity(WebConnChecker checker) /*-{
var img = new Image();
img.onload = function() {
window.alert("online");
checker.#com.telligent.smap.student.client.util.WebConnChecker::online()();
}
img.onerror = function() {
window.alert("offline");
checker.#com.telligent.smap.student.client.util.WebConnChecker::offline()();
}
img.src = "http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png?v=41f6e13ade69&state="+Math.floor(Math.random() * 100);
}-*/;
}
Hope it works for you