SignalR 客户端无法在 AngularJs 控制器内工作

2024-03-31

我已经根据路线创建了 Angular 应用程序。 在不使用路由的情况下,信号器工作正常,但是当我使用路由时,信号器仅以一种方式工作 - 从客户端到服务器。

<html ng-app="SignalR">
<head>
//Scripts
<script src="~/signalr/hubs"></script>
</head>
<body>
<a href="#/Today">Today</a>
<a href="#/History">History</a>

<div ng-view>
</div>

<script type="text/javascript">
    var hubConnetion = undefined;
    hubConnetion = $.connection.hubs;
    $.connection.hub.start();


    var SignalRControllers = angular.module('SignalRControllers', []);

    var SignalRApp = angular.module('SignalR', ['ngRoute', 'SignalRControllers']);


    SignalRApp.config(['$routeProvider',
      function ($routeProvider) {
          $routeProvider.
            when('/Today', {
                templateUrl: '@Url.Action("Today","Home")'
            }).
            when('/History', {
                templateUrl: '@Url.Action("History", "Home")'
            })
      }]);

</script>
<script src="~/AngularJs/TodayController.js"></script>
</body>
</html>

TodayController.js

SignalRControllers.controller('TodayController', ['$scope', '$http',
  function ($scope, $http) {

      $scope.sendTask = function () {
          hubConnetion.server.sendTask($("#taskName").val());//works
      }

      $scope.Task = "task1";
      hubConnetion.client.getTask= function (Task) {//never invoked
          $scope.Task = Task;
      }
  }]);

今天.html

<div ng-controller="TodayController">

    <div>{{Task}}</div>


    <input id="taskName" type="text" />
    <div ng-click="sendTask()">SendTask</div>

</div>

Hubs.cs

public class Hubs: Hub
{
   public void SendTask(string Name)
   {
      Clients.All.GetTask(Name);
   }
}

我不确定,但我认为因为集线器连接变量包装在控制器内,signlarR 找不到它。 有什么角度魔法可以解决这个问题吗?


我对 SignalR 也相当陌生(也是 Angular 的第一次用户),因此我在 ASP.NET MVC 4 (SignalR 2.2) 中重新创建(并简化)了该​​项目来解决问题。而且我认为还有不止一个......

1) SignalR 使用 JQuery。在 jQuery(以及几乎所有其他 JS 框架)中,最好在“文档就绪”事件之后执行代码。因此,我将 SignalR 设置包装在 jQuery 文档就绪处理程序中(请参阅下面的代码)。 另外我删除了hubConnetion全局变量,因为全局变量是坏的+在包装在 jQuery 文档就绪处理程序之后,变量是该处理程序的本地变量,并且无论如何都无法在控制器代码中访问...

2) 恕我直言,主要问题是这个(部分SignalR 客户端 API http://www.asp.net/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-client#establishconnection):

通常,您在调用 start 方法之前注册事件处理程序 建立连接。如果您想注册一些活动 建立连接后的处理程序,您可以这样做,但是您 在调用之前必须注册至少一个事件处理程序 启动方法。原因之一是一个网络中可以有许多集线器 应用程序,但您不想触发 OnConnected 事件 如果您只打算使用其中一个集线器,则可以使用每个集线器。当。。。的时候 连接建立后,集线器上是否存在客户端方法 proxy 告诉 SignalR 触发 OnConnected 事件。如果你 在调用 start 方法之前不要注册任何事件处理程序,您 将能够调用 Hub 上的方法,但 Hub 的 OnConnected 方法不会被调用,也不会调用任何客户端方法 服务器.

您的事件处理程序是在控制器工厂方法中设置的,该方法在连接之后调用start()方法。 尝试添加暂时的调用之前的处理程序start()像这样:

$.connection.tasklistHub.client.getTask = function () { };

3)为了确保问题出在 SignalR 而不是 Angular,我打开了服务器端和客户端tracing http://www.asp.net/signalr/overview/testing-and-debugging/enabling-signalr-tracing。完成上述所有更改后,客户端已成功接收来自服务器的事件:

SignalR: Triggering client hub event 'getTask' on hub 'TasklistHub'

但 Angular 无法使用收到的数据更新 div。解决方案是使用$rootScope.$apply中提到的函数这篇关于 SignalR 和 Angular 一起使用的文章 http://sravi-kiran.blogspot.cz/2013/05/HookingUpAspNetSignalRWithAngularJS.html。现在一切都按预期进行。请参阅下面的完整代码。

旁注:我知道这只是示例代码。在任何现实世界的项目中,我都会考虑将 SignalR 集线器包装在客户端上的某种服务中,例如上面提到的文章或使用这个图书馆 https://github.com/JustMaier/angular-signalr-hub(看起来非常优雅)

我还收回我之前关于客户端处理程序名称的答案,因为根据同一文档,客户端方法名称匹配不区分大小写......

索引.cshtml

<html lang="en" ng-app="SignalR">
    <head>
        <meta charset="utf-8" />
        <title>SignalR & AngularJS</title>
        <script src="~/Scripts/jquery-1.6.4.js"></script>
        <script src="~/Scripts/jquery.signalR-2.2.0.js"></script>
        <script src="~/signalr/hubs"></script>
        <script src="~/Scripts/angular.js"></script>

        <script type="text/javascript">
            $(function() {
                $.connection.hub.logging = true;

                // temporary handler to force SignalR to subscribe to server events
                $.connection.tasklistHub.client.getTask = function () { };

                $.connection.hub.start().done(function () {
                    $('#connectionStatus').text('Connected');
                    console.log('Now connected, connection ID =' + $.connection.hub.id);
                });
            });

            var SignalRControllers = angular.module('SignalRControllers', []);
            var SignalRApp = angular.module('SignalR', ['SignalRControllers']);
        </script>
        <script src="~/Scripts/app/TodayController.js"></script>
    </head>
<body>
    <div id="body">
        <div ng-view>
            <div ng-controller="TodayController">

                <div id="connectionStatus"></div>

                <div>{{Task}}</div>

                <input id="taskName" type="text"/>
                <input type="button" name="Send Task" value="Send Task" data-ng-click="sendTask()" />
            </div>
        </div>
    </div>
</body>
</html>

TodayController.js

SignalRControllers.controller('TodayController', [
        '$scope', '$http', '$rootScope',
        function ($scope, $http, $rootScope) {
            $scope.sendTask = function() {
                $.connection.tasklistHub.server.sendTask($("#taskName").val());
            };
            $scope.Task = "Empty";

            $.connection.tasklistHub.client.getTask = function (task) {
                console.log(task);
                $rootScope.$apply(function () {
                    $scope.Task = task;
                });             
            };
        }
    ]
);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

SignalR 客户端无法在 AngularJs 控制器内工作 的相关文章

  • ASP.NET预编译的优点是什么?

    使用 Aspnet compiler exe 代替通过 Visual Studio 进行的传统发布有多有用 那么资源 resx 文件又如何呢 与简单的 xcopy 相比 预编译有两个主要优点 文件系统不会包含所有代码 aspx文件和后面的所
  • 使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

    I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li
  • 序列包含多个元素

    我在通过 Linq 获取 RhsTruck 类型的列表并显示它们时遇到一些问题 RhsTruck 只有属性 品牌 型号 序列号 等 RhsCustomer 具有 CustomerName CustomerAddress 等属性 我不断收到错
  • Google App Engine:修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy
  • 如何抑制窗口鼠标滚轮滚动...?

    我正在开发嵌入页面中的画布应用程序 我有它 因此您可以使用鼠标滚轮放大绘图 但不幸的是 这会滚动页面 因为它是文章的一部分 当我在 dom 元素上滚动鼠标滚轮时 是否可以阻止鼠标滚轮在窗口上滚动 附加鼠标滚轮 不是 Gecko DOMMou
  • Android 手机作为 GSM 调制解调器在 PC 上发送/接收短信?

    是否可以将 Android 移动设备用作 PC 上的 GSM 调制解调器 我正在 net下开发应用程序来发送 接收短信等 现在我想通过 USB 将我的 Android 设备连接到我的 PC 并将其用作 GSM 调制解调器来与其通信 这里是参
  • 标签获取 href 值

    我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
  • JavaScript 重定向到新窗口

    我有以下代码 它根据下拉列表的值重定向到页面 我如何使其在新窗口中打开 function goto form var index form select selectedIndex if form select options index
  • 将函数传递给指令以在链接中执行的正确方法

    我知道我们通常通过隔离范围将函数传递给指令 directive myComponent function return scope foo 然后在模板中我们可以这样调用这个函数
  • 回发后刷新时提示确认表单重新提交。我做错了什么?

    我有一个以空白 默认状态启动的仪表板 我让用户能够将保存的状态加载到仪表板中 当他们单击 应用 按钮时 我运行以下代码 function CloseAndSave var radUpload find radUpload1ID var in
  • 在 iFrame 内维护会话状态

    不确定我是否疯了 但我在 iFrame 内的会话状态遇到问题 它是一个域在另一个域中的简单设置 我不需要跨域共享任何内容 我想做的就是将一个网站嵌入到另一个网站中 并且我希望该嵌入网站能够使用 cookie 会话状态登录 编辑 更新 等 为
  • HTML 离线应用程序缓存,列出下载的文件

    作为我正在构建的离线 Web 应用程序的加载屏幕的一部分 使用缓存清单 http developer apple com library safari documentation iPhone Conceptual SafariJSData
  • 模块构建失败(来自 ./node_modules/babel-loader/lib/index.js)Vue Js

    我从 GitHub 下载了一个我和我的朋友正在开发的项目 但是当我尝试运行时 npm run serve 我收到这个错误 src main js 中的错误 Module build failed from node modules babe
  • 如何获取给定 DOM 元素的所有定义的 CSS 选择器?

    如何使用 jQuery 获取给定 DOM 元素的所有定义的 CSS 选择器 定义后 我的意思是在应用于任何样式表的所有 CSS 选择器document 在某种程度上 这类似于 FireBug 实现的功能 其中显示所选 DOM 元素的所有应用
  • C# 中的合并运算符?

    我想我记得看到过类似的东西 三元运算符 http msdn microsoft com en us library ty67wk28 28VS 80 29 aspx在 C 中 它只有两部分 如果变量值不为空 则返回变量值 如果为空 则返回默
  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不
  • Safari 支持 JavaScript window.onerror 吗?

    我有一个附加到 window onerror 的函数 window onerror function errorMsg url line window alert asdf 这在 firefox chrome 和 IE 中工作正常 但在 s
  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构
  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比
  • 导致回发到与弹出窗口不同的页面

    我有一个主页和一个详细信息页面 详细信息页面是从主页调用的 JavaScript 弹出窗口 当单击详细信息页面上的 保存 按钮时 我希望主页 刷新 是否有一种方法可以调用主页的回发 同时还可以从详细信息页面维护保存回发 Edit 使用win

随机推荐