[SIGNALR chapter of the ASP] Topic VI: Implementing message reminders with SIGNALR

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. The SIGNALR server push message to the client is implemented by calling the client's ReceiveMessage method to attach the message to the chat record, so we can implement the frame logic in the client's ReceiveMessage method.
2. After finding 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 see QQ or the message reminds, the message is usually 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

 varActive =true; Window.onfocus= Window.onblur =function(e) {active= (E | | event). Type = = = "Focus"; }; //Receiving MessagesSystemHub.client.receivePrivateMessage =function(Fromuserid, userName, message) {//the code in topic two            //code for message Reminders    if(Active = =false) {                varin =NewiNotify ({effect:' Flash ', Interval:500, Audio: {file: ['/music/msg.mp3 ']}, notification: {title:Notification ", 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.

Iv. Summary

　　This is where the content of this article ends. After this blog post, the SIGNALR series will be over, and then you may share some of the series or architecture design series related to ASP.

　　This article all source code download: signalrmessagenotify

[SIGNALR chapter of the ASP] Topic VI: Implementing message reminders with SIGNALR