Asp.net uses SignalR to implement message reminders

1. Introduction
In the previous article, I introduced how to use SignalR to transfer images, and for instant messaging applications, message reminders are essential. Many websites now have new message reminder functions. Naturally, the implementation of this function is indispensable for the SignalR series. In this article, we will introduce how to use the SignalR+iNotify library to implement sounds and pop-up reminders for new messages.

2. The idea of ​​implementing message reminder
Message reminder means that when the customer has new messages, a pop-up box will be reminded in the lower right corner of the client. The idea to implement this function is:

1. The way the SignalR server pushes messages to the client is to call the client's receiveMessage method to attach the message to the chat record, so we can implement the pop-up box in the client's receiveMessage method. logic.
2. After finding the location where the method is defined, it is natural to find a better JS library for the pop-up effect. The iNotify library is used here to implement it. The github address of the library is: https://github.com/jaywcjlove/iNotify, and the online test address is: http://jslite.io/iNotify/
3. Look at the message reminders on QQ or WeChat. The message reminders are usually The current Tab page will pop up when you are not chatting. We can use the Html5 visibilitychange event to achieve this, but here I use the method of losing focus, which is the focus event.
3. Specific implementation code
　The specific implementation code implemented here is based on the code in the second article, and the JS code for message reminder is added on top of it.

　Here you need to introduce the JS file of the INotify library into the Index.cshtml page first. 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 receivePrivateMessage method

var active = true;
 window.onfocus = window.onblur = function(e) {
  active = (e || event).type === "focus";
 };
 
 // 接收消息
  systemHub.client.receivePrivateMessage = function(fromUserId, userName, message) {
  // 专题二中的代码
   
  // 消息提醒的代码
 if (active == false) {
    var iN = new iNotify({
     effect: 'flash',
     interval: 500,
     audio: {
      file: ['/Music/msg.mp3']
     },
     notification: {
      title: "通知！",
      body: '您有一条新消息'
     }
    });
 
    iN.setTitle(true).player();
    iN.setFavicon(true).setTitle(true).notify();
   }
  };
}

After the above 2 steps, the new message sound and pop-up reminder are completed, but this pop-up function is not supported IE browser, because the pop-up effect is implemented using the Html5 Notification API, this feature is not supported in IE browser, so it cannot be implemented. It can be seen that Microsoft's IE browser is really a pit, so Microsoft decisively gave up on it and launched Edge. I have not tested Edge myself, but many friends commented that it is still a pit.

Next let’s take a look at the specific operating results.

This is the end of this article. After this blog post, the SignalR series has come to an end. Thank you everyone for reading.

For more articles related to Asp.net using SignalR to implement message reminders, please pay attention to the PHP Chinese website!