[SignalR of Asp.net Development Series] Topic 6: Use SignalR for Message notification, asp. netsignalr

[SignalR of Asp.net Development Series] Topic 6: Use SignalR for Message notification, asp. netsignalr
I. Introduction

In the previous article, I introduced how to use SignalR to transmit images. Then, message reminders are essential for instant messaging applications. Many websites now have the reminder feature for new messages. Naturally, this function is indispensable for the SignalR series. This article describes how to use the SignalR + iNotify library to implement the sound and pop-up notifications of new messages.

II. Implementation of message reminders

A message reminder is a pop-up notification in the lower right corner of the client when the customer has a new message. The idea for implementing this function is:

Iii. Specific implementation code

The specific implementation code here is based on the Code of the second article, on which the JS Code for message reminder is added.

Here, we need to first introduce the INotify library JS file on the Index. cshtml page. That is:

  <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 javaseprivatemessage method.

Var active = true; window. onfocus = window. onblur = function (e) {active = (e | event ). type = "focus" ;}; // receive the message systemHub. client. export eprivatemessage = function (fromUserId, userName, message) {// code iN Topic 2 // code of message reminder if (active = false) {var iN = new iNotify ({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 two steps, the new message sound and pop-up reminder are complete, but this pop-up box function does not support IE browser, because the pop-up effect is implemented using the Html5 Notifination API, this feature is not supported in IE browser, so it cannot be implemented. As a result, we can see that Microsoft's IE browser is really a pitfall, So Microsoft decisively gave up it and launched Edge. I have not tried it myself, but many friends commented that it is still a pitfall.

Next, let's take a look at the specific running effect.

Iv. Summary

At this point, the content of this article is over. After this blog post, the SignalR series will come to an end. Next we may share some series or architecture design series related to Asp.net MVC. Please pay more attention and support.

Download all source code in this article: signalrmessagenoworkflow