meghlashomoy meghlashomoy - 5 months ago 44
jQuery Question

Play Real-time Notification Sound to all the users logged in the Webapp Without reloading the page

I know there are many solutions can be found in the web regarding my problem, but none of them are working for me. That's why I'm asking this question.

First let me explain what I'm looking to achieve -

-> I'm developing a multi-user Web application [ASP.Net]
-> I'm using SignalR to get real-time database change notifications and SignalR instantly transmit the change notifications to all the users logged in the application.
-> Now in addition what I want to do is to play a notification sound for all the logged in users so that they can understand a new notification need attention.

This is what I've done so far -

JavaScript

<script>
function playSound(mysound) {
//thisSound = document.getElementById(mysound);
//thisSound.Play();
var audio = new Audio(mysound);
audio.play();
}

</script>


Code Behind -

ScriptManager.RegisterClientScriptBlock(Me, [GetType](), "OpenWindow", "javascript: playSound('./audio/notification.wav')", True)


The problem with this solution is that the user need to reload the page to hear the notification sound, which I think is pointless if the user can't hear them instantly like the SignalR processing notifications.

Is it possible to push the sound to all the clients so that they don't need to reload the page?

Any help would be highly appreciated. If you need any further clarification please let me know.

Answer

Finally I got it worked. I had to change the jquery a little bit -

<script type="text/javascript">
        function playSound(mysound) {
            //thisSound = document.getElementById(mysound);
            //thisSound.Play();
            var audio = new Audio(mysound);
            audio.play();                
        }

        $(function () {
            var notify = $.connection.notificationsHub;
            var audio;

            notify.client.displayNotification = function (s_Not, s_Path) {
                $("#newNot").html(s_Not);
                audio = new Audio(s_Path);
                var iLevel = "<%=System.Web.HttpContext.Current.Session("USER_LEVEL")%>";
                var i_OldNot = "<%=System.Web.HttpContext.Current.Session("NOT_COUNT")%>";
                if (iLevel == 2) {
                    //alert(i_OldNot  + " " + s_Not);
                    if (i_OldNot < i_Not) {
                        playSound("/audio/notification.wav");
                        //i_OldNot == Number(s_not);
                    }
                }
            };

            $.connection.hub.start();                                
        });
    </script>

In the code behind I had to set a Session Variable to store the number of last notification before update. If the previous and present number of notification is higher than the session value then notification sound play -

System.Web.HttpContext.Current.Session("NOT_COUNT")= i_LastNotCount

Now the sound if playing without reloading the page. Special thanks to rdans, because of his below comments I got this idea -

Then in a comment you say:

I already have implemented SignalR. So it's not the problem at all.

This suggests to me that you probably don't understand what signalR is doing because the whole point of signalR is to push to the browser without having to post back or use an ajax call.