Wie signalR von angularJs zu verbinden

Ich entwickle Web-Anwendung in .NET als zwei separate Anwendungen, Back-End mit Webapi C# und Benutzeroberfläche mit AngularJS. Ich möchte nur Chat-Option in diesem Projekt hinzufügen. Ich habe SignalR installiert und ChatHub.cs Klasse in Webapi hinzugefügt.Wie signalR von angularJs zu verbinden

enter image description here

in WebAPI ist es eine Klasse Startup.cs namens

public partial class Startup 
{ 
    public void Configuration(IAppBuilder app) 
    { 
     HttpConfiguration config = new HttpConfiguration(); 
     config.Formatters.JsonFormatter.SerializerSettings.DateTimeZoneHandling = Newtonsoft.Json.DateTimeZoneHandling.Local; 
     WebApiConfig.Register(config); 
     app.UseCors(CorsOptions.AllowAll); 
     ConfigureAuth(app); 
     app.UseWebApi(config); 

     app.MapSignalR();//added after installation of SignalR package 
    } 
}

ChatHub Klasse

public class ChatHub : Hub 
{ 
    public static string emailIDLoaded = ""; 
    public void Connect(string userName, string email) 
    { 
     emailIDLoaded = email; 
     var id = Context.ConnectionId; 
     using (SmartCampEntities dc = new SmartCampEntities()) 
     { 

       var userdetails = new ChatUserDetail 
       { 
        ConnectionId = id, 
        UserName = userName, 
        EmailID = email 
       }; 
       dc.ChatUserDetails.Add(userdetails); 
       dc.SaveChanges(); 

       } 
      } 

     }

Was auch immer i Anfrage von Benutzeroberfläche senden Sie es an den entsprechenden Controller treffen wird in webAPI. Zum Beispiel

$http({ 
    method: 'GET', 
    url: $scope.appPath + "DashboardNew/staffSummary" //[RoutePrefix]/[Route] 
}).success(function (result, status) { 
    data = result; 
});

Meine Benutzeroberfläche ist eine separate Anwendung. Wie kann ich SignalR von UI verbinden? Ich habe etwas versucht, aber es hat nicht funktioniert. Kann mir jemand vorschlagen, wie es

HTML-Code

<div>  
<a class="btn btn-blue" ng-click="sendTask()">SendTask</a>

javascript

angular.module('WebUI').controller('DashboardCtrl', function ($scope, $window, $http, $modal, ngTableParams) { 
$scope.header = "Chat"; 

$scope.sendTask = function() { 
    $http({ 
     method: 'POST', 
     url: $scope.appPath + hubConnetion.server.sendTask("userName","email"), 
    }) 
}

}) erhalten arbeiten;

Quelle

2016-09-23 Boopathi

Es ist nicht anders als SignalR regelmäßig von einer Webseite zu verwenden. Die Dokumentation ist gut und enthält viele Beispiele zur Verwendung. –

können Sie bitte irgendwelche Beispiele oder Link teilen – Boopathi

Es ist nicht so klar, was Sie wirklich brauchen, oder besser, was sind die Fehler, die Sie Hilfe anfordern. Sie möchten wissen, wie Sie den Signaler-Start in Angular integrieren können oder ob Sie Fehler bei zB CORS haben? – Hoghweed

Basics:

, dass Sie Ihre signalr Server verbinden können Sie den Client-Code in Ihre Seite umfassen müssen. Es ist auch wichtig, dass Sie jQuery vorher einschließen. Zumindest können Sie umfassen auch die Erzeugung Hübe im Fall Datei, die Sie mit Hub arbeiten:

<script src="Scripts/jquery-1.10.2.min.js"></script> 
<script src="Scripts/jquery.signalR-2.1.0.min.js"></script> 
<script src="signalr/hubs"></script>

Grundbeispiel:

Hier haben Sie eine vollständige Probe (ohne und mit erzeugten Hub-Proxy) :

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" />  
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <!-- Title --> 
      <h1>SignalR Sample</h1> 
     </div> 
     <div class="row"> 
      <!-- Input /Button--> 
      <input type="text" id="inputMsg" /> 
      <button button="btn btn-default" id="btnSend">Send</button> 
     </div> 
     <div class="row"> 
      <!-- Message list--> 
      <ul id="msgList"></ul> 
     </div> 
    </div> 
    <script src="Scripts/jquery-1.6.4.js"></script> 
    <script src="Scripts/jquery.signalR-2.2.0.js"></script> 
    <script src="http://[LOCATIONOF YOUR HUB]/signalr/hubs"></script> 
    <script> 
     // ------------------- Generated Proxy ---------------------------- 
     $(function() { 
      $.connection.hub.url = "[LOCATION WHERE YOUR SERVICE IS RUNNING]/signalr"; 
      var chat = $.connection.myChat; 

      chat.client.addMessage = function (name, message) { 
       $('#msgList').append('<li><strong>' + name 
        + '</strong>:&nbsp;&nbsp;' + message + '</li>'); 
      }; 
      $.connection.hub.start({}).done(function() { 
       $('#btnSend').click(function() { 
        chat.server.Send("Stephan", $('#inputMsg').val()); 
        $('#inputMsg').val('').focus(); 
       }); 
      }) 
     }); 
     //// ------------------- Without Proxy ---------------------------- 
     //$(function() { 
     // var connection = $.hubConnection("http://localhost:8080/signalr"); 
     // var chatHubProxy = connection.createHubProxy('chatHub'); 
     // chatHubProxy.on('AddMessage', function (name, message) { 
     //  console.log(name + ' ' + message); 
     //  $('#msgList').append('<li><strong>' + name 
     //  + '</strong>:&nbsp;&nbsp;' + message + '</li>'); 

     // }); 
     // connection.start().done(function() { 
     //  $('#btnSend').click(function() { 
     //   chatHubProxy.invoke('send', "Stephan", $('#inputMsg').val()); 
     //   $('#inputMsg').val('').focus(); 
     //  }); 
     // }); 
     //}); 

    </script> 
</body> 
</html>

weitere Informationen finden Sie unter: http://www.asp.net/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-client

SignalR Winkelmodul:

Es gibt auch einen „Helfer-Modul“, die Sie in AngularJS für die Arbeit mit signalr verwenden: https://github.com/JustMaier/angular-signalr-hub

Quelle

2016-09-23 17:39:34 Tester

ich in der Lage WebAPI durch Hinzufügen von Code unten in mein Startup verbinden können. Auth.cs

public void ConfigureAuth(IAppBuilder app) 
    { 
     app.UseOAuthBearerTokens(OAuthOptions); 

     //by adding below code 
     app.UseCors(CorsOptions.AllowAll); 
     app.MapSignalR(new HubConfiguration { EnableJSONP = true }); 

    }

Quelle

2016-09-26 12:49:59 Boopathi

Wie signalR von angularJs zu verbinden

Antwort

Verwandte Themen