asp.net use SIGNALR to implement message reminders _ Practical Tips

First, the introduction
In the previous article I introduced how to use SIGNALR to implement picture transmission, and then for instant messaging applications, message reminders are essential. Now a lot of Web sites have new messages to remind the function. Nature for the SIGNALR series is also indispensable to the realization of this function. In this article, we will describe how to use the Signalr+inotify Library to implement sound and balloon reminders for new messages.

Second, the realization idea of message reminding
A message reminder is when a customer has a new message, a balloon reminder is made at the lower-right corner of the client. The idea to achieve this is:

1, the SIGNALR service-side push message to the client implementation way is to call the client's ReceiveMessage method to attach the message to the chat record, so we can implement the logic of the frame in the client's ReceiveMessage method.
2, find a way to define the location, nature is to find a better frame effect JS class Library, where the use of inotify library to achieve. The GitHub address of the library is: https://github.com/jaywcjlove/iNotify, online test address is: http://jslite.io/iNotify/
3, you see QQ or micro-letter message reminders, message reminders are generally in your chat is not in the current tab page will pop up, we can use the HTML5 Visibilitychange event to achieve, but I am here through the loss of focus, that is, focusing events.
third, the specific implementation code
The implementation of the implementation of the code here is based on the code of the second article, on its basis to add a message to remind the JS code.

Here you need to first in the Index.cshtml page to introduce the INotify library JS file. 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 messages
  SystemHub.client.receivePrivateMessage = function (Fromuserid, userName, message) {
  //Topic II Code
  
  // Message Reminder Code
 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 completes, but this frame function does not support IE browser, because the frame effect uses the HTML5 notifination API to realize, this characteristic in IE browser does not support, therefore also cannot realize. So you can see that Microsoft's IE browser is really a pit ah, so Microsoft decisively abandoned it, launched Edge,edge specific How I have not tried, but many friends commented that it is still a pit.

Let's take a look at the actual effect of the operation.

SOURCE Download: Use SIGNALR to implement message reminders

The content of this article ends here. After this blog post, the SIGNALR series will be over, thank you for your reading.