Javascript 如何从angularJs连接信号机_Javascript_C#_Asp.net_Angularjs_Asp.net Web Api

Javascript 如何从angularJs连接信号机

javascript c# asp.net angularjs asp.net-web-api

Javascript 如何从angularJs连接信号机,javascript,c#,asp.net,angularjs,asp.net-web-api,Javascript,C#,Asp.net,Angularjs,Asp.net Web Api,我正在将.NET中的web应用程序开发为两个独立的应用程序，后端使用webapi c#，用户界面使用AngularJS。我只想在这个项目中添加聊天选项。我已经安装了SignalR并在webapi中添加了ChatHub.cs类在WebAPI中有一个名为Startup.cs的类 public partial class Startup { public void Configuration(IAppBuilder app) { HttpConfiguration

我正在将.NET中的web应用程序开发为两个独立的应用程序，后端使用webapi c#，用户界面使用AngularJS。我只想在这个项目中添加聊天选项。我已经安装了SignalR并在webapi中添加了ChatHub.cs类

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

聊天室类

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

我的用户界面是一个独立的应用程序。如何从用户界面连接信号器。我尝试了一些东西，但没有成功。有人能给我建议如何使它工作吗

html代码

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

}))

基础知识：

为了连接到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>

基本样本：

这里有一个完整的示例（没有和有生成的集线器代理）：


信号器样本
发送

//--------------生成的代理----------------------------
$（函数（）{
$.connection.hub.url=“[服务运行的位置]/signal”；
var chat=$.connection.myChat；
chat.client.addMessage=函数（名称、消息）{
$（“#msgList”）。追加（“”+名称
+“：”+消息+”）；
};
$.connection.hub.start（{}）.done（函数（）{
$（'#btnSend'）。单击（函数（）{
Send（“Stephan”，$（“#inputMsg”）.val（）；
$（'#inputMsg'）.val（''.focus（）；
});
})
});
////--------无代理----------------------------
//$（函数（）{
//变量连接=$.hubConnection（“http://localhost:8080/signalr");
//var chatHubProxy=connection.createhubbroxy（'chatHub'）；
//chatHubProxy.on（'AddMessage'，函数（名称，消息）{
//控制台日志（名称+“”+消息）；
//$（“#msgList”）。追加（“”+名称
//+'：“+消息+”）；
//    });
//connection.start（）.done（函数（）{
//$（'#btnSend'）。单击（函数（）{
//invoke（'send'，'Stephan'，$（'#inputMsg'）.val（）；
//$（'#inputMsg'）.val（''.focus（）；
//        });
//    });
//});

有关更多详细信息，请参阅：

信号机角度模块：

angularjs中还有一个“帮助器模块”，可用于处理信号器：