Einführung in SignalR und Einführung in die Verwendung

Der in diesem Kapitel mit Ihnen geteilte Inhalt besteht darin, das Signal R-Framework zum Erstellen einer einfachen Gruppenchat-Funktion zu verwenden. Es wird hauptsächlich erklärt, wie dieses Framework in .Nets MVC verwendet wird Natürlich wird es keine Folgemaßnahmen geben. Ich habe vor, einen Sharing-Artikel zu schreiben. Der Hauptzweck besteht darin, Freunden mehr Lösungen zu bieten, wenn sie Web-Echtzeitkommunikation verwenden müssen von Microsoft.

SignalR Online-Einführung

ASP.NET SignalR ist eine Bibliothek für ASP.NET-Entwickler, die den Prozess des Hinzufügens von Echtzeit-Webfunktionen zu Anwendungen vereinfacht. Echtzeit-Webfunktionen sind Funktionen, bei denen Servercode Inhalte an verbundene Clients weiterleiten kann, sobald diese verfügbar sind, anstatt dass der Server darauf warten muss, dass Clients neue Daten anfordern.

Natürlich bietet SignalR auch eine sehr einfache und benutzerfreundliche High-Level-API, die es dem Server ermöglicht, JavaScript-Funktionen auf dem Client einzeln oder in Stapeln aufzurufen, und es ist sehr praktisch, Verbindungen zu verwalten B. die Verbindung des Clients mit dem Server oder die Trennung, Clientgruppierung und Clientautorisierung sind mit SignalR sehr einfach zu implementieren.

SignalR bringt Echtzeitkommunikation mit Clients zu ASP .NET. Dies ist selbstverständlich einfach zu bedienen und verfügt über eine ausreichende Skalierbarkeit. In der Vergangenheit mussten Benutzer die Seite aktualisieren oder Ajax-Polling verwenden, um eine Echtzeitanzeige der Daten zu erreichen. Jetzt können sie einfach SignalR verwenden. Das Wichtigste ist, dass Sie das Projekt nicht neu erstellen müssen, sondern SignalR nahtlos mit Ihrem vorhandenen ASP .NET-Projekt verwenden können.

Gruppenchat-Instanzeffekt

Sehen wir uns zunächst den Effekt des Testfalls an. Hier ist der Online-Effekt-Link: Godox Chat Room(:1001/home /shenniuchat), Darstellung:

Die Schnittstelle ist extrem einfach, der Stil wird hier nicht berücksichtigt, hauptsächlich um seine Verwendung zu zeigen, die hier beteiligten Funktionen sind:

1. Zählen Sie die Anzahl der Online-Personen

2. Zeigen Sie den Spitznamen und die Verbindungsmethode der Online-Personen an (dieser Testfall unterstützt webSockets und longPolling (lange Verbindung))

3. Informationen zum Gruppenchat

So verwenden Sie SignalR in MVC

Zuerst erstellen wir normalerweise ein MVC-Webprojekt und verwenden dann den Nuget-Konsolenbefehl: Install-package Microsoft.AspNet.SignalR Treten Sie SignalR Dependencies bei. Die automatisch hinzugefügten Pakete lauten wie folgt:

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

und fügen Sie automatisch zugehörige js-Dateien zum Skriptordner im MVC-Projekt hinzu:

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

Dann müssen wir eine Klasse mit dem Dateinamen Startup.cs im Verzeichnis der ersten Ebene des Projekts erstellen und den Hauptinhalt vervollständigen:

 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 }

Zuerst analysieren wir die zu beachtenden Punkte von oben nach unten:

1. OwinStartup(Type) Der Konstruktor übergibt einen Typ, und dieser Typ entspricht der von uns erstellten Startup-Klasse . Dies geschieht durch dieses Konstrukt. Die Startposition der Funktionsklasse

Namespace Stage.Api.Extend ist der Namespace meines Projekts kann beiläufig definiert werden; 3.

public void Configuration(IAppBuilder app) Hier wird das Programm zunächst festgelegt Geben Sie diese Methode ein, um den darin enthaltenen Logikcode auszuführen. app.MapSignalR ist eine erweiterte IAppBuilder-Schnittstellenmethode. Hier habe ich

public static IAppBuilder MapSignalR(this IAppBuilder builder, string path, HubConfiguration Configuration); , hier sieht es ein bisschen ähnlich zu unserem MVC aus Beim Routing ist hier vor allem auf den Pfadparameter zu achten. Dieser Pfad muss auf der Front-End-Seite verwendet werden. Die im Backend erforderliche Konfiguration wurde hier tatsächlich abgeschlossen Spezifischer Vorgang erforderlich Geschäftslogik-Verarbeitungsklasse, eine neue Klasse erstellen (hier habe ich sie

ChatHub

genannt) und Hub geerbt (der vom SignalR-Framework bereitgestellt wird), und der darin enthaltene Logikcode lautet wie folgt:

上面的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         });

Folgende Punkte werden ebenfalls aufgeführt:

1. var Connection = $.hubConnection("/chat/hubs"); Erstellen Sie einen Link, der Pfad hier entspricht auch dem app.MapSignalR("/chat des Backends " , der Pfad bleibt derselbe

2. var chat = Connection.createHubProxy('chatHub '); um einen Reverse-Proxy-Link zu erstellen. Der Name hier: chatHub entspricht dem Back-End-ChatHub-Klassennamen

3. Durch on("xxx", Funktion (){}) Funktion zum Binden des Ereignisses, dass der Server den Client benachrichtigt, xxx entspricht xxx in Clients.All.xxx

4 connection.start({ transport: ['. webSockets', 'longPolling'] }), um den zulässigen Link festzulegen Methode und starten Sie die Verknüpfung

5. Connection.transport.name, um den Namen des Links zu erhalten. Wenn start nicht standardmäßig festgelegt ist, gibt es mehrere Typen: webSockets, foreverFrame, serverSentEvents, longPolling

6. chat.invoke("xxx ", param1, param2) verwendet invoke, um die öffentlichen Methoden von Klassen abzubilden, die die Klasse Hub erben. Die Instanz hier entspricht: chat.invoke("sendAll" , my, content) entspricht public void SendAll(MoHubUser user, stringNachricht)

Am Ende geschrieben

Wenn Sie die oben genannten Punkte erfüllen, kann grundlegendes SignalR erfolgreich verknüpft und verwendet werden. Es gibt jedoch viele Punkte Es handelt sich um zusammengefasste Erfahrungen. Ich hoffe, dass viele Freunde diesen Artikel schreiben können Ich fange auch an, Netcore zum Erstellen von Anwendungen im Unternehmen zu nutzen. Ich fühle mich geehrt, zu meinem Projekt beitragen zu können. Ich bin zum Beispiel froh, dass NetCore immer einflussreicher wird ; wenn Sie der Meinung sind, dass dieser Artikel gut ist oder Ihnen etwas gebracht hat, können Sie ihn auch empfehlen, vielen Dank! ! !

Das obige ist der detaillierte Inhalt vonEinführung in SignalR und Einführung in die Verwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!