Explication détaillée du code push du message à l'aide de SignaiR et Push.js-Tutoriel C#.Net-php.cn

Explication détaillée du code push du message à l'aide de SignaiR et Push.js

Y2J

Libérer： 2017-05-10 10:44:03

original

2566 Les gens l'ont consulté

ASP.NET SignalR est une bibliothèque destinée aux développeurs ASP.NET qui simplifie le processus d'ajout de fonctionnalités Web en temps réel aux applications. Ceux qui sont intéressés peuvent le découvrir.

1. Utiliser l'arrière-plan

ASP.NET SignalR est une bibliothèque destinée aux développeurs ASP.NET qui simplifie le processus permettant aux développeurs d'ajouter des fonctionnalités Web en temps réel à leurs applications. Les fonctionnalités Web en temps réel sont des capacités dans lesquelles le code du serveur peut envoyer du contenu aux clients connectés dès qu'ils sont disponibles, plutôt que de laisser le serveur attendre que les clients demandent de nouvelles données.

2. Qu'est-ce que Push.js ? [Le navigateur doit prendre en charge H5Notifications]

Les notifications sont traduites par notification. Alors à quoi ressemblent les notifications Push.js ? Voir l'image ci-dessous : la plupart d'entre elles apparaissent dans le coin inférieur droit de l'écran.

Une autorisation est requise :

Souvent, nous ne pouvons utiliser les sondages que pour l'affichage des données Mises à jour. et messages push. J'ai donc réfléchi à l'existence d'un moyen de synchroniser la mise à jour côté client lorsque les données côté serveur sont mises à jour.

2. Commencez à déployer un projet SignalR [en utilisant mvc]

1. Créez un nouveau projet mvc

........................

2. Importez le package du programme [Vs2015]

Outils->NuGet Package Manager-> Console de gestion des packages->Install-Package Microsoft.AspNet.SignalR->En attente

InstallationRéussie

3. Créez une nouvelle classe de hub

Projet->clic droit->Ajouter->Nouvel élément->SignalR->Classe de lien permanent SignalR->Enregistrer -[Prenez MyConnection1 comme exemple] MyConnection1

 public class MyConnection1 : PersistentConnection
  {
    /// <summary>
    /// 发送消息
    /// </summary>
    /// <param name="request"></param>
    /// <param name="connectionId"></param>
    /// <returns></returns>
    protected override Task OnConnected(IRequest request, string connectionId)
    {
      Debug.WriteLine(connectionId);
      return Connection.Send(connectionId, "Welcome!");//单推事列
    }

    /// <summary>
    /// 接受客户端消息
    /// </summary>
    /// <param name="request"></param>
    /// <param name="connectionId"></param>
    /// <param name="data"></param>
    /// <returns></returns>
    protected override Task OnReceived(IRequest request, string connectionId, string data)
    {
      Debug.WriteLine(data);
      return Connection.Broadcast(data);//广播
    }
    /// <summary>
    /// 掉线
    /// </summary>
    /// <param name="request"></param>
    /// <param name="connectionId"></param>
    /// <param name="stopCalled"></param>
    /// <returns></returns>
    protected override Task OnDisconnected(IRequest request, string connectionId, bool stopCalled)
    {
      Debug.WriteLine("掉线");
      return base.OnDisconnected(request, connectionId, stopCalled);
    }

    /// <summary>
    /// 重连
    /// </summary>
    /// <param name="request"></param>
    /// <param name="connectionId"></param>
    /// <returns></returns>
    protected override Task OnReconnected(IRequest request, string connectionId)
    {
      Debug.WriteLine("重连");
      return base.OnReconnected(request, connectionId);
    }
  }

Copier après la connexion

4. Créez une nouvelle classe Owin Startup[SignalR suit le standard Owin, Startup est le démarrage du composant, le Startup. la classe existera par défaut, il suffit de la modifier]

Nous ajoutons le code suivant dans Configuration

public void Configuration(IAppBuilder app)
    {
      app.MapSignalR<MyConnection1>("/myconnection");
    }

Copier après la connexion

Explication : Lors de l'accès à myconnection, MyConnection1 est déclenchée

5. Ajouter le client [h5]

@{
  ViewBag.Title = "Home Page";
  Layout = null;
}
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
</head>
<body>
  <script src="~/Scripts/jquery-1.10.2.js"></script>
  <script src="~/Scripts/jquery.signalR-2.2.1.js"></script>
  <script type="text/javascript">
    var conn = $.connection("/myconnection");

    conn.start().done(function (data) {
      console.log("已连接服务器,当前GUID为" + data.id);
      conn.send("To Admin");//发送给服务器
    });

    //接受服务器的推送
    conn.received(function (data) {
      console.log("服务器返回消息： " + data);
    });
  </script>
</body>
</html>

Copier après la connexion

6.Démarrer le projet Ouvrez la console du navigateur, vous trouverez l'image ci-dessous, ce qui signifie que vous avez terminé la première étape.

7. Ensuite, nous devons préparer push.js

Adresse de téléchargement github.com/Nickersoft/push. js

8. Citer js

<script src="../Js/push.js"></script>

Copier après la connexion

9. Créer une nouvelle démo push js

  function push(data, url, img) {
    var imgurl = img != "" ? img : "../Images/icon.png";
    Push.create("新通知", {
      body: data,
      icon: imgurl,
      requireInteraction: true,
      onClick: function () {
        window.focus();
        this.close();
        window.location.href =url;
      }
    });
  }

Copier après la connexion

Explication. : data : Pour le contenu du message

url : pour le lien renseigné en cliquant sur la notification

img : pour l'

image adresse affichée dans la notification

requireInteraction : lorsqu'elle est définie sur true, la notification ne se fermera pas à moins que l'utilisateur ne ferme ou ne clique manuellement sur la notification. Si vous devez définir l'heure de disparition, veuillez remplacer l'

attribut par un délai d'attente : 5000 millisecondes

Autres

événementsVeuillez lire : www.npmjs.com/package/push .js

10. Combinez les deux

  //实时推送
  var conn = $.connection("/myconnection");

  conn.start().done(function (data) {
    console.log("已连接服务器,当前GUID为" + data.id);
  });

  //接受服务器的推送
  conn.received(function (msg) {
    console.log("服务器返回消息： " + msg);
    if (msg != "") {
      push(msg, "#", "")
    }
  });

Copier après la connexion

11. L'effet est le suivant :

<🎜. >

12. Implémenter le push actif par le serveur Nous introduisons désormais uniquement la diffusion. Le principe de la simple pression est le même.

Il est divisé en deux modes : diffusion et simple pression.

Diffusion :

Push unique :

 var context = GlobalHost.ConnectionManager.GetConnectionContext<MyConnection1>();//获取你当前的Connection连接
  context.Connection.Broadcast("我是一条新的推送消息！");//广播推送

Copier après la connexion

connectionId : est le GUID attribué par le serveur à chaque client

 var context = GlobalHost.ConnectionManager.GetConnectionContext<MyConnection1>();//获取你当前的Connection连接
 context.Connection.Send(connectionId, "Welcome!");//单推事列

Copier après la connexion

13. L'effet est le suivant :

De cette façon, lorsque notre serveur traite une certaine tâche, nous pouvons appeler la diffusion pour la pousser activement vers le client. Mises à jour instantanées des données et transmission des messages.