如何連接signalR from angularJs

我正在開發作爲兩個獨立應用程序的Web應用程序，後端使用webapi c＃和使用AngularJS的用戶界面。我只是想在這個項目中添加聊天選項。我已經安裝了SignalR並在webapi中添加了ChatHub.cs類。如何連接signalR from 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; 
});

我的用戶界面是一個單獨的應用程序。我如何從UI連接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

你真的需要什麼，或者更好，你需要什麼樣的失敗幫助並不那麼清楚。你想知道如何在Angular中集成Signalr的啓動，或者你正在失敗，例如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 from angularJs

回答

相關問題