Introduction à SignalR et introduction à son utilisation

Le contenu partagé avec vous dans ce chapitre consiste à utiliser le framework Signal R pour créer une simple fonction de discussion de groupe. Il explique principalement comment utiliser ce framework dans le MVC de .Net puisque ce projet dispose de documents officiels (le tout en anglais de. bien sûr), il n'y aura pas de suite. Je prévois d'écrire un article de partage. Le but principal est de permettre à mes amis d'avoir plus de solutions lorsqu'ils ont besoin d'utiliser la communication Web en temps réel. Après tout, c'est l'une des solutions principalement promues. par Microsoft.

Introduction en ligne de SignalR

ASP.NET SignalR est une bibliothèque pour les développeurs ASP.NET qui simplifie le processus d'ajout de fonctionnalités Web en temps réel aux 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.

Bien entendu, SignalR fournit également une API de haut niveau très simple et facile à utiliser, qui permet au serveur d'appeler des fonctions JavaScript sur le client individuellement ou par lots, et il est très pratique de gérer les connexions , comme la connexion du client au serveur, ou la déconnexion, le regroupement de clients et l'autorisation du client sont tous très faciles à mettre en œuvre à l'aide de SignalR.

SignalR apporte la communication en temps réel avec les clients à ASP .NET. Bien sûr, cela est facile à utiliser et offre une évolutivité suffisante. Dans le passé, les utilisateurs devaient actualiser la page ou utiliser l'interrogation Ajax pour obtenir un affichage des données en temps réel. Ils peuvent désormais simplement utiliser SignalR. La chose la plus importante est que vous n'avez pas besoin de recréer le projet, vous pouvez utiliser SignalR de manière transparente en utilisant votre projet ASP .NET existant.

Effet d'instance de discussion de groupe

Jetons d'abord un coup d'œil à l'effet du cas de test Voici le lien de l'effet en ligne : Godox Chat Room(:1001/home. /shenniuchat), rendu :

L'interface est extrêmement simple, le style ne sera pas considéré ici, principalement pour montrer son usage, les fonctions impliquées ici sont :

1. Comptez le nombre de personnes en ligne

2. Affichez le pseudo et la méthode de connexion des personnes en ligne (ce cas de test prend en charge les webSockets et longPolling (connexion longue))

3. Informations sur les discussions de groupe

Comment utiliser SignalR dans MVC

Tout d'abord, nous créons généralement un projet Web MVC, puis utilisons la commande de la console Nuget : Install-package Microsoft.AspNet.SignalR Rejoignez les dépendances SignalR, les packages ajoutés automatiquement sont les suivants :

  <package id="Microsoft.AspNet.SignalR" version="2.2.2" targetFramework="net45" />
  <package id="Microsoft.AspNet.SignalR.Core" version="2.2.2" targetFramework="net45" />
  <package id="Microsoft.AspNet.SignalR.JS" version="2.2.2" targetFramework="net45" />
  <package id="Microsoft.AspNet.SignalR.SystemWeb" version="2.2.2" targetFramework="net45" />

et ajoutez automatiquement les fichiers js associés au dossier Script du projet MVC :

jquery.signalR-2.2.2.min.js
jquery.signalR-2.2.2.js

Ensuite, nous devons créer une classe avec le nom de fichier Startup.cs dans le répertoire de premier niveau du projet, avec le contenu principal complété :

 1 [assembly: OwinStartup(typeof(Stage.Api.Extend.Startup))] 2 namespace Stage.Api.Extend 3 { 4     public class Startup 5     { 6         public void Configuration(IAppBuilder app) 7         { 8             app.MapSignalR("/chat", new Microsoft.AspNet.SignalR.HubConfiguration 9             {10                 EnableDetailedErrors = true,11                 EnableJavaScriptProxies = true12             });13         }14     }15 }

Nous analysons d'abord les points à noter de haut en bas :

1 OwinStartup(Type) Le constructeur passe un type, et ce type correspond à la classe Startup que nous avons créée. . Cela se fait via cette construction Function class mark start position;

2 namespace Stage.Api.Extend est l'espace de noms de mon projet, cela peut être défini. avec désinvolture;

3. public void Configuration (application IAppBuilder) La fonction est fixe et nécessaire Ici, le programme entrera d'abord cette méthode. pour exécuter le code logique à l'intérieur ;

4. app.MapSignalR est une méthode d'interface IAppBuilder étendue. Elle a de nombreuses formes d'expression. > static IAppBuilder MapSignalR(this IAppBuilder builder, string path, configuration HubConfiguration); , ici cela ressemble un peu à notre routage MVC, le La principale chose à laquelle il faut prêter attention ici est le paramètre Path, ce chemin doit être utilisé sur la page front-end La configuration requise dans le backend a en fait été effectuée ici. Voici l'opération spécifique requise ; Classe de traitement de logique métier

, créez une nouvelle classe (Ici je l'ai nommée

ChatHub) et héritée du Hub (qui est fourni par le framework SignalR), et la logique le code à l'intérieur est le suivant :

上面的3个方法分别做了：添加聊天人到List，发送信息到客户端，某个连接失效后通知各个有效的聊天人重新加载信息；这里值得关注的是通过重新 public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled) 方法来实现捕获并移除失效连接（这里是聊天人的信息）;整篇测试用例通过Context.ConnectionId来保证连接的唯一性，只要有新的链接请求，那么服务端就会分配一个唯一串给这个链接，当客户端关闭页面或关闭链接这个是有就能在OnDisconnected方法中捕获到这个失效的链接的ConnectionId，这样就达到了移除失效聊天人的要求了；为了代码的方便性，这里创建了一个聊天人信息类：

1  public class MoHubUser2     {3 4         public string Id { get; set; }5         public string NickName { get; set; }6         public string TransportMethod { get; set; }7     }

到这里后台的聊天室代码就完成了就是这么简单；我们再来看试图中如何来写代码，这里我先给出我的html布局代码：

 1 @{ 2     ViewBag.Title = "神牛聊天室 - SignalR"; 3 } 4 <style type="text/css"> 5     .div_left { 6         width: 70%; 7         float: left; 8     } 9 10     .div_right {11         width: 28%;12         float: left;13     }14 15     .ul {16         list-style: none;17         border: 1px solid #ccc;18         height: 500px;19         overflow-y: scroll;20         color: black;21     }22 23         .ul li {24             padding-top: 5px;25             padding-right: 25px;26         }27 28     .ul_user {29         list-style: none;30     }31 32         .ul_user li {33             padding-top: 5px;34         }35 36     .send {37         position: relative;38         background: #eae7e7;39         border-radius: 5px; /* 圆角 */40         padding-top: 4px;41         padding-left: 5px;42         margin-top: 13px;43     }44 45         .send .arrow {46             position: absolute;47             top: -16px;48             font-size: 0;49             border: solid 8px;50             border-color: #fff #fff #eae7e7 #fff;51         }52 </style>53 <h3>@ViewBag.Title 在线人数：<span id="sapnUserTotal">0</span>人</h3>54 <div class="container text-left">55     <div class="div_left">56         <ul class="ul" id="discussion"></ul>57         <textarea rows="5" class="form-control" id="message" maxlength="500" placeholder="开始聊天. . ." style="max-width: 100%"></textarea><br />58         <input type="button" id="sendmessage" value="发 送" class="btn btn-default" />59         <input type="hidden" id="displayname" />60     </div>61     <div class="div_right">62         <ul id="users" class="ul_user"></ul>63     </div>64 </div>65 66 <script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>67 @*<script src="~/chat/hubs"></script>*@

客户端这里写法大致有两种选择，一种直接使用生成的代理来操作，一种不用自动生成的代理采用手动创建代理的方式；为了内容的简洁性，这里只简单讲解下自动生成的代理方式，而更多的是分享手动创建代理链接的方式；

使用生成的代理获取链接

首先，我们需要通过Script标签来引用一下自动生成代理的路径：  ，注意啦这里的路径/chat对应的就是咋们在前面Startup.cs文件中配置 app.MapSignalR("/chat" 路径，而后面/hubs固定的写法(至少目前我还没更多的试验过)，只有先应用了这个~/chat/hubs，才能在后面使用生成的代理，先上段代码：

 1  var chat = $.connection.chatHub; 2         chat.client.newUser = function (user) { 3             $("#users").append(' <li><strong>' + user.NickName + '[' + user.TransportMethod + ']</strong></li>'); 4         }; 5  6         chat.client.userList = function (users) { 7             console.log(users); 8             $("#sapnUserTotal").html(users.length); 9             $.each(users, function (i, item) {10                 $("#users").append(' <li>[' + item.TransportMethod + '] <strong>' + item.NickName + '</strong>(' + item.Id + ')</li>');11             });12         };13         chat.client.addNewMessageToPage = function (user, message) {14             console.log(user);15             $("#discussion").append(' <li ><span><strong>' + user.NickName + '[' + user.TransportMethod + ']</strong>：</span><div class="send">' + message + '<div class="arrow"></div></div></li>');16         };17    //connection.hub.start({ transport: ['webSockets', 'longPolling'] }).done(function () {18         //    my.TransportMethod = connection.hub.transport.name;19         //    chat.server.addUser(my);20 21         //    $('#sendmessage').click(function () {22         //        //console.log(chat);23         //        var content = $.trim($('#message').val());24         //        if (content.length <= 0) { $('#message').val('').focus(); return; }25         //        chat.server.sendAll(my, content);26         //        $('#message').val('').focus();27         //    });28         //}).fail(function () {29         //    alert("链接聊天室失败，请重新刷新页面。");30         //});

咋们逐步来解析下代码注意点：

1.  var chat = $.connection.chatHub; 这里的chatHub对应的就是咋们创建的并继承Hub的ChatHub类，由于js变量开头都是小写，所以这里是chatHub，这句活就表示链接到咋们后端了ChatHub类了，然后就可以使用里面的方法啦（这种有点类似于早期的webform中某种ajax请求的写法）

2. 通过chat.client.xxx来接收服务端通知的消息，而这个xxx对应的方法名称和咋们后端的Clients.All.xxx，本章实例对应的是：chat.client.userList = function (users){}对应Clients.All.userList(_Users);这样后端就能直接通知客户端的对应方法了；注意这里我后端Clients.All用的是通知全部客户端的意思，如果您需要通知指定的链接需要用到的是： T Client(string connectionId); 方法

3. chat.client是后端调用客户端，那相对的chat.server就是客户端请求服务端，和上面一样通过chat.server.xxx来指定请求的服务端方法，注意这个时候服务端方法指的是继承类Hub的子类的公共方法（本篇对应的是：chat.server.sendAll(my, content)对应ChatHub.cs文件中的 public void SendAll(MoHubUser user, string message) 函数）

4.  connection.hub.start({ transport: ['webSockets', 'longPolling'] }) 来指定运行的交互协议

以上就是使用生成代理的方式，按照上面的注意点来写应该不是问题；

使用手动创建反向代理来链接

不采用生成的代码的方式，我们只需要修改前端就行了，后台代码不用变或设置不用变动；首先我们把上面说的Script引用自动代理的代码去掉，因为这个时候不需要了，我们还是先上代码：

 1 var my = { NickName: "神牛001", TransportMethod: "" }; 2         var connection = $.hubConnection("/chat/hubs"); 3         var chat = connection.createHubProxy('chatHub'); 4  5         chat.on("userList", function (users) { 6             console.log(users); 7             $("#sapnUserTotal").html(users.length); 8             $("#users").html(""); 9             $.each(users, function (i, item) {10                 $("#users").append(' <li>[' + item.TransportMethod + '] <strong>' + item.NickName + '</strong>(' + item.Id + ')</li>');11             });12         });13 14         chat.on("addNewMessageToPage", function (user, message) {15             console.log(user);16             $("#discussion").append(' <li ><span><strong>' + user.NickName + '[' + user.TransportMethod + ']</strong>：</span><div class="send">' + message + '<div class="arrow"></div></div></li>');17 18             var div = document.getElementById('discussion');19             //div.scrollTop = div.scrollHeight;20             div.scrollTop = 999999;21         });22 23         var nickName = prompt("请输入一个昵称：", my.NickName);24         my.NickName = nickName.length > 0 ? nickName : my.NickName;25         $('#displayname').val(nickName);26         $('#message').focus();27      28 29         connection.start({ transport: ['webSockets', 'longPolling'] }).done(function () {30 31             my.TransportMethod = connection.transport.name;32             //console.log(my.TransportMethod);33             chat.invoke("addUser", my);34 35             $('#sendmessage').click(function () {36                 var content = $.trim($('#message').val());37                 if (content.length <= 0) { $('#message').val('').focus(); return; }38 39                 chat.invoke("sendAll", my, content);40                 $('#message').val('').focus();41             });42         });

Les points suivants sont également répertoriés :

1. var connection = $.hubConnection("/chat/hubs"); Créez un lien, le chemin ici correspond également au app.MapSignalR("/chat du backend ", le chemin reste le même

2. var chat = connection.createHubProxy('chatHub '); pour créer un lien proxy inverse. Le nom ici : chatHub correspond au nom de la classe ChatHub back-end

3. (){}) Fonction pour lier l'événement que le serveur notifie au client, xxx correspond à xxx dans Clients.All.xxx

4 connection.start({ transport: [' webSockets', 'longPolling'] }) pour définir le lien autorisé method et start linking

5. connection.transport.name pour obtenir le nom de la méthode de lien. Si start n'est pas défini par défaut, il existe plusieurs types : webSockets, foreverFrame, serverSentEvents, longPolling

6. chat.invoke("xxx ", param1, param2) utilise Invoke pour mapper les méthodes publiques des classes qui héritent de la classe Hub. L'instance correspond ici à : chat.invoke(". sendAll" , my, content) correspond à public void SendAll(utilisateur MoHubUser, string message)

Écrit à la fin

Si vous répondez aux points d'attention ci-dessus, alors SignalR de base peut être lié et utilisé avec succès. Il existe de nombreux points d'attention, mais ce sont des expériences résumées. J'espère que de nombreux amis pourront m'aider ; j'écris cet article, un ami regardait mon projet git open source LovePicture.Web. Je vais également commencer à essayer d'utiliser Netcore pour créer des applications dans l'entreprise. Je me sens honoré et heureux de pouvoir contribuer à mon projet. À titre d'exemple, je suis heureux que NetCore devienne de plus en plus influent. haha ; si vous pensez que cet article est bon ou qu'il vous a apporté quelque chose, autant faire une recommandation, merci ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!