Blocking User's Screen With Personalized Message

Sending notifications to the users while they are on your website is a common scenario in portal type applications. One of the applications that exhibited this behavior was a school portal where instructors should be able to send messages to their students. In this article we are going to see a technique that can be used to send informative messages to the users.

Introduction:

Scenario:

The scenario revolves around students waiting to enter a tutoring room. So, there is a particular webpage on which the students must wait for the availability of the room. The tutor grabs the student and start the tutoring session. But there are some cases when the tutor needs to send a message to the waiting students. The message can be anything from when the room will be opened again to what will be discussed in the next session.

Grabbing Student’s Attention:

If you have worked for a university or a school you will have an idea that grabbing student’s attention is extremely hard. In our application we have set the font size to 16px and still the students complain that they did not see the message. So, you can forget about displaying a small message on the screen because most likely they would not be able to see it. We need some sort of mechanism to freeze up their page and post our message. This way they will be distracted and will be forced to read the message. If they don’t click on the close message link then the message will be popped again and again. I know this is really annoying but trust me it is less annoying when the students complain about not seeing the message.

Implementing the Ping Method:

The Ping method will be called from the tutor side and will send the message to all the students who are waiting for the room. Let’s check out the implementation for the Ping method.

// ping the user
function ping()
{
var msg = document.getElementById("txtMessage").value;

    VirtualTutoringRoomWebApps.VirtualRoomService.ping(msg,function(result)
    {
         alert('The users have been pinged!');
    });

}

The JavaScript ping method simply fires the ping method in the VirtualRoomService class. Let’s check out the web service ping method.

[WebMethod]
        public void ping(string msg)
        {
            int roomId = 26;
            string key = String.Empty;

            var roomSessions = MethodInvoker.Invoke<SQLDataAccess>(typeof(tblWaitingList), "GetAll");
            var waitingList = from r in ((IEnumerable<tblWaitingList>)roomSessions)
                                 where r.RoomID == roomId
                                 orderby r.DateCreated ascending
                                 select r;

            foreach (var item in waitingList)
            {
                key = item.UserName + "_" + "PING";
                HttpContext.Current.Cache[key] = msg;

            }
        }

The ping method retrieves all the students who are waiting for the room. Once, we got all the students we iterate through the list and create a key for each of the student and put the key with the message in the Cache object.

At this point we have the message for all the waiting students stored in the cache object. Now, from the student’s side we need to access the cache object and get the message.

Displaying Message to the Student:

The first thing that we need to do is to continuously poll the cache object for a message. A good idea is to use a master page and initiate the polling from the master page. This way no matter what page the user is on the poll is continuously running.

// initiate the pinger which will check in the cache for the message!
initiatePinger();

</script>

// initialite pinger
function initiatePinger()
{
// fire getPingMessage every 5 seconds!
window.setInterval(getPingMessage,5000);
}

The getPingMessage is responsible for getting the message from the cache objects.

The DIV element parentFadeDiv is used to freeze the user’s page. Freezing means the whole page will be covered with a gray div so the user would not be able to click anywhere on the screen. The element childAfterFade will appear on top of the gray div with the message from the tutor.

Here is the implementation of the getPingMessage method which is included in the web service.

[WebMethod]
        public string getPingMessage()
        {
            string key = HttpContext.Current.User.Identity.Name + "_" + "PING";
            return (HttpContext.Current.Cache[key] as String);
        }

Everything works fine! But wait there should be some mechanism to close the message and remove the entry from the cache. This is because if the entry is not removed from the cache object then the student will be getting the notification again and again.

Here is the closePingMessage which removes the entry for the user from the cache object and also hides the large freeze gray div.

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 effect is shown below:

Conclusion:

In this article we learned how to create informative messages that captures user’s attention.

There is no download for this article please check out the references.

References:

1) Creating a freeze page by AzamSharp