如何连接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

回答

相关问题