Introduction:
AJAX technology allows you to call the server side methods without causing the server postbacks. In AJAX applications it is very important for the user to know that the application is connected to the internet since there are no postbacks. In this article I will demonstrate a very easy technique to find out if the user is connected to the internet.
The Idea:
The idea is to start polling from the client side which will download a simple webpage. If the page is downloaded successfully then user is connected to the internet else he is not connected. Your dummy page (The page that you are going to download) should be very small to get good performance.
ASP.NET Client Callbacks:
I will be using ASP.NET 2.0 Client Callbacks in this article but you can use any AJAX framework that you like. The first step is to register the callbacks. I have demonstrated this procedure in most of my Client Callback articles hence I am simply going to paste the code for the RegisterCallbacks method.
|
private void RegisterCallbacks()
{
string sbReference = ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");
string cbScript = String.Empty;
// check if the script is already registered or not
if (!ClientScript.IsClientScriptBlockRegistered("CallServer"))
{
cbScript = @" function CallServer(arg,context) { " + sbReference + "}";
ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", cbScript, true);
}
} |
Your page class must implement the ICallbackEventHandler interface in order to use the Client Callback feature.
Next, we need to implement the code which is used to download the dummy page.
|
public string GetCallbackResult()
{
if (CanDownloadData())
return "Connected";
else return "Not Connected";
}
private bool CanDownloadData()
{
WebClient client = new WebClient();
byte[] data = null;
try
{
data = client.DownloadData("http://www.google.com");
}
catch (Exception ex)
{
}
if (data != null && data.Length > 0) return true;
else return false;
} |
The method CanDownloadData is used to download the data from the URL. I am using www.google.com as my dummy page but you can use any custom page with very small amount of data. The GetCallbackResult method returns the status of the download.
JavaScript Implementation:
Now, let’s check out the JavaScript. First, we need to start a polling mechanism that will call a server side method at regular intervals. The polling is initiated when the page loads as shown below:
|
<body onload="startPolling()"> |
We have placed a DIV element which is used to show the status of the connectivity.
|
<div id="divStatus" style="position:absolute; top:30%; left:40%; display:none; border:2px solid; font-family:Verdana; padding:1em"> |
And here is the rest of the JavaScript.
|
<script language="javascript" type="text/javascript">
function startPolling()
{
window.setInterval("CallServer('','')",5000);
}
function ReceiveServerData(response)
{
if(response == 'Connected')
{
document.getElementById("divStatus").style.display = 'block';
document.getElementById("divStatus").innerHTML = 'You are connected to the internet';
}
else if(response == 'Not Connected')
{
document.getElementById("divStatus").style.display = 'block';
document.getElementById("divStatus").innerHTML = 'You are not connected to the internet';
}
}
</script> |
The server method is called every 5 seconds which tries to download a dummy page. If the server was able to download the page then we displays “Connected” else “Not Connected”.
I hope you liked this article, happy programming!