ASP. NET uses SIGNALR to implement message reminders

Source: Internet
Author: User
Tags inotify
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.