ASP. NET uses SIGNALR to implement message reminders

First, Introduction
In the previous article I described how to use SIGNALR to implement image transfer, and then for instant messaging applications, message reminders are essential. Many websites now have reminders for new messages. Naturally for the SIGNALR series is also the realization of this feature. In this article, you will learn how to use the Signalr+inotify Library to implement sound and pop-up reminders for new messages.

Second, the idea of realizing the message reminding
A message reminder is that when a customer has a new message, a pop-up box is alerted at the bottom right corner of the client. The idea to implement this function is:

1, SIGNALR server push message to the client's implementation method to call the client's ReceiveMessage method to attach the message to the chat record, so we can in the client's ReceiveMessage method to implement the frame logic.
2, to find a way to define the location, it is natural to find a better frame effect JS class Library, where the use of inotify library to achieve. The GitHub address for this library is: https://github.com/jaywcjlove/iNotify, online test address: http://jslite.io/iNotify/
3, you look at QQ or the message reminds, the message is generally not in the chat of the current tab page will pop up, we can use the HTML5 Visibilitychange event to achieve, but I here is through the loss of focus, that is, the focus event.
Third, the specific implementation of the Code
The implementation code implemented here is based on the code of the second article, and adds the JS code of the message alert based on it.

Here you need to first introduce the JS file of the INotify library on the index.cshtml page. That

<script type= "Text/javascript" src= "~/scripts/jquery-1.10.2.min.js" ></script><script src= "~/ Scripts/jquery.signalr-2.2.0.min.js "></script><script src=" ~/signalr/hubs "></script>< Script src= "~/scripts/layer/layer.min.js" ></script><script src= "~/scripts/inotify.js" ></script >

Then add the following JS code to the Receiveprivatemessage method

var active = true; Window.onfocus = Window.onblur = function (e) {  active = (E | | event). Type = = = "Focus";};  Receive Message  SystemHub.client.receivePrivateMessage = function (Fromuserid, userName, message) {  //The code in topic two     // The code for the message reminder if (active = = False) {    var in = new INotify ({     effect: ' Flash ',     interval:500,     audio: {      file: [ '/music/msg.mp3 '     },     notification: {      title: ' Notice! ",      body: ' You have a new message '     }    }";     In.settitle (True). Player ();    In.setfavicon (True). Settitle (True). Notify ();   }  };}

After the above 2 steps, the new message sound and the frame reminder is complete, but this frame function does not support IE browser, because the frame effect uses the HTML5 notifination API to implement, this feature is not supported in IE browser, so it can not be implemented. So you can see that Microsoft's IE browser is really a pit ah, so Microsoft decisively abandon it, launched Edge,edge specifically how I have not tried, but many friends commented that still is a pit.

Let's take a look at the specific operating effect now.

This is where the content of this article ends. After this blog post, the SIGNALR series will be over, thank you for reading.