Asp.net utilise SignalR pour implémenter des rappels de messages

1. Introduction
Dans l'article précédent, j'ai présenté comment utiliser SignalR pour transmettre des images, et pour les applications de messagerie instantanée, les rappels de messages sont essentiels. De nombreux sites Web disposent désormais de nouvelles fonctions de rappel de messages. Naturellement, la mise en œuvre de cette fonction est indispensable pour la série SignalR. Dans cet article, nous présenterons comment utiliser la bibliothèque SignalR iNotify pour implémenter des sons et des rappels contextuels pour les nouveaux messages.

2. L'idée de mise en œuvre du rappel de message
Le rappel de message signifie que lorsque le client reçoit de nouveaux messages, une boîte contextuelle sera rappelée dans le coin inférieur droit du client. L'idée pour implémenter cette fonction est la suivante :

1. La façon dont le serveur SignalR transmet les messages au client est d'appeler la méthode containMessage du client pour joindre le message à l'enregistrement de discussion, afin que nous puissions l'ajouter à celui du client. Méthode recevoirMessage. Implémentez la logique de la boîte contextuelle.
2. Après avoir trouvé l'emplacement où la méthode est définie, il est naturel de trouver une meilleure bibliothèque JS pour l'effet pop-up. La bibliothèque iNotify est utilisée ici pour l'implémenter. L'adresse github de la bibliothèque est : https://github.com/jaywcjlove/iNotify, et l'adresse du test en ligne est : http://jslite.io/iNotify/
3. Vous pouvez voir le message de rappel sur QQ. ou WeChat. Généralement, il apparaîtra lorsque vous ne discutez pas sur la page de l'onglet actuelle. Nous pouvons utiliser l'événement de changement de visibilité Html5 pour y parvenir, mais ici, j'utilise la méthode de perte de focus, qui est l'événement de focus.
3. Code d'implémentation spécifique
Le code d'implémentation spécifique implémenté ici est basé sur le code du deuxième article, et le code JS pour le rappel de message est ajouté par-dessus.

Ici, vous devez d'abord introduire le fichier JS de la bibliothèque INotify dans la page Index.cshtml. C'est-à-dire :

<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>

Ajoutez ensuite le code JS suivant à la méthode recevoirPrivateMessage

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();
   }
  };
}

Après les 2 étapes ci-dessus, le nouveau son du message et le rappel contextuel sont terminés. Cependant, cette fonction contextuelle ne prend pas en charge le navigateur IE car l'effet pop-up est implémenté à l'aide de l'API de notification Html5. La fonctionnalité n'est pas prise en charge dans les navigateurs IE. Le serveur ne la prend pas en charge, elle ne peut donc pas être implémentée. On peut voir que le navigateur IE de Microsoft est vraiment un gouffre, alors Microsoft l'a définitivement abandonné et a lancé Edge. Je n'ai pas testé Edge moi-même, mais de nombreux amis ont commenté que c'est toujours un gouffre.

Examinons ensuite les résultats opérationnels spécifiques.

C'est la fin de cet article. Après cet article de blog, la série SignalR est terminée. Merci à tous d'avoir lu.

Pour plus d'articles sur Asp.net utilisant SignalR pour implémenter des rappels de messages, veuillez faire attention au site Web PHP chinois !