Как подключить signalR от angularJs

Я разрабатываю веб-приложение в .NET как два отдельных приложения, back end используя webapi C# и пользовательский интерфейс, используя AngularJS. Я просто хочу добавить параметр Chat в этот проект. Я установил SignalR и добавил класс ChatHub.cs в webapi.Как подключить signalR от angularJs

enter image description here

в WebAPI есть класс с именем Startup.cs

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 класса

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

       } 
      } 

     }

Независимо запрос я отправить с пользовательского интерфейса он ударится в соответствующий контроллер в WebAPI. Например,

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

Мой пользовательский интерфейс представляет собой отдельное приложение. Как я могу подключить signalR из пользовательского интерфейса. Я что-то пробовал, но не получил работу. Может кто-нибудь предложить мне, как заставить его работать

HTML код

<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"), 
    }) 
}

});

источник

2016-09-23 Boopathi

Это не отличается от использования SignalR регулярно с веб-страницы. Документация хороша и содержит множество примеров того, как ее использовать. –

вы можете поделиться любыми примерами или ссылкой – Boopathi

Не совсем понятно, что вам действительно нужно, или лучше, какие неудачи вы оказываете. Вам нужно знать, как интегрировать запуск Signalr в Angular или вы на сбоях, например, CORS? – Hoghweed

Основы:

Что вы можете подключиться к вашему серверу signalr вы должны включить код клиента к вашей странице. Также важно, чтобы вы включили jquery раньше. По крайней мере, вы можете также включать генерировать файл концентраторов в случае, если вы работаете с концентраторами:

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

Basic Пример:

Здесь у вас есть полный образец (без и с генерируемым хаба прокси) :

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

Для получения более подробной информации см: http://www.asp.net/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-client

SignalR Угловой модуль:

Существует также «помощник модуль», который вы можете использовать в angularjs для работы с signalr: https://github.com/JustMaier/angular-signalr-hub

источник

2016-09-23 17:39:34 Tester

я смог подключить WebAPI, добавив ниже код в моем запуске. Auth.cs

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

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

    }

источник

2016-09-26 12:49:59 Boopathi

Как подключить signalR от angularJs

ответ

Смежные вопросы