Yeah I know! the title of this post does not sound good. It seems that I am trying to annoy users by blocking/freezing their screen. But the reality is totally different. The application that I am working on is intended to be used by the students. The idea is that the instructor will send the message to the students and the message has to be easily identified by the students. I have experienced that students don't really notice bold letters or small pop ups on the screen. So, I had to freeze their screen in order for them to notice the message.
The screen shot below shows the students screen locked with the message.
There is a close button which you might not see in the screen shot. The close button allows the user to close the window and get back to his/her work.
First, let's see the ping function which is fired when the instructor write something in the textbox "txtMessage" and press the button.
// ping the user
function ping()
{
var msg = document.getElementById("txtMessage").value;
VirtualTutoringRoomWebApps.VirtualRoomService.ping(msg,function(result)
{
alert('The users have been pinged!');
});
}
And here is the ping method in the Web Service.
[WebMethod]
public void ping(string msg)
{
int roomId = 26; // Convert.ToInt32(HttpContext.Current.Session["RoomId"]);
string key = String.Empty;
var roomSessions = MethodInvoker.Invoke<SQLDataAccess>(typeof(tblWaitingList), "GetAll");
var waitingList = from r in ((IEnumerable<tblWaitingList>)roomSessions)
where r.RoomID == 26
orderby r.DateCreated ascending
select r;
foreach (var item in waitingList)
{
key = item.UserName + "_" + "PING";
HttpContext.Current.Cache[key] = msg;
}
}
The ping method gets all the students who are waiting for a particular room and then insert them in the cache with a unique key. The key is created from the username and the "PING" keyword.
Now, let's see the student side. For students to get the updated message a function is fired periodically. The initiatePinger method set up the method to be fired at regular intervals.
// initialite pinger
function initiatePinger()
{
// fire getPingMessage every 5 seconds!
window.setInterval(getPingMessage,5000);
}
function getPingMessage()
{
VirtualTutoringRoomWebApps.VirtualRoomService.getPingMessage(function(result)
{
if(result != null && result != '' && result != 'undefined')
{
document.getElementById("parentFadeDiv").style.display = 'block';
document.getElementById("childAfterFade").style.display = 'block';
document.getElementById("pingDiv").innerHTML = result;
}
});
}
[WebMethod]
public string getPingMessage()
{
string key = HttpContext.Current.User.Identity.Name + "_" + "PING";
return (HttpContext.Current.Cache[key] as String);
}
The function getPingMessage gets the message from the Cache object and update the DIV HTML on the client side.
The user (student) can delete the message by simply deleting their key from the cache object collection.
function closePingMessage()
{
// hide the fade page and the child after fade
document.getElementById("parentFadeDiv").style.display = 'none';
document.getElementById("childAfterFade").style.display = 'none';
// remove the key from the cache!
VirtualTutoringRoomWebApps.VirtualRoomService.closePingMessage(function(result) { } );
}
[WebMethod]
public void closePingMessage()
{
string key = HttpContext.Current.User.Identity.Name + "_" + "PING";
HttpContext.Current.Cache.Remove(key);
}
The closePingMessage makes sure that the student will not be bothered again with the same message. Off course, if the instructor sends a new message the student will be informed again.
You can use the above code in your application. But use it wisely or your users will be annoyed that their screen is turning gray all the time. :)