Question

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

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

}）;

Answer 1

<强>基础：

您可以连接到信号服务器，您必须将客户端代码包含在您的页面中。之前包含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>

基本样本：

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

<!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 Angular Module：

还有一个“辅助模块”可以在angularjs中用于处理signalr： https://github.com/JustMaier/angular-signalr-hub

Answer 2

我可以通过将以下代码添加到我的Startup.Auth.cs

来连接webapi

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ConsoComponent } from './conso.component';
import { ChartPanelModule } from '../chart_panel/chart_panel.module';

@NgModule({
    imports: [RouterModule, ChartPanelModule],
    declarations: [ConsoComponent],
    exports: [ConsoComponent]
})

export class ConsoModule { }

如何连接angularJs的signalR

2 个答案: