【问题标题】:AngularJS unable to use scope inside a websocket callbackAngularJS 无法在 websocket 回调中使用范围
【发布时间】:2019-05-03 11:24:18
【问题描述】:

<b>$scope</b> 在回调函数中不起作用。

angular.
module('common').
controller('bidVBoxController', ['$scope', '$location','$element', 'Socket', 'Bid',
 function($scope, $location, $element, Socket,Bid){
  var self = this;
  self.socket = new Socket("ws://192.168.225.59:8010/ws/bidData/");
  $scope.placeBid = function(){
    self.socket.send({
      type: "place_bid",
      data: {
        bidId: $scope.bid.id
      }
    });
  };
  console.log($scope.bid);
  $scope.bid.top_bid_data="sss";//This works.
  self.socket.onmessage(function(event) {
      var data = JSON.parse(event.data);
      console.log($scope.bid);//This doesn't work
      $scope.bid.top_bid_data=data["message"];//This doesn't work
  });
}])

一个回调函数被传递给self.socket.onmessage,它应该更新$scope 变量。但它似乎不起作用。请帮忙。

更新1:

此控制器与指令bidVBox 一起使用,并且有多个元素:

<bid-v-box ng-repeat="bid in bids">
</bid-v-box>

当回调函数在第一个bid-v-box 元素的控制器中执行时,$scope.bid.top_bid_data=data["message"]; 更新最后一个元素的范围,而不是第一个。我也尝试过使用$scope.$apply(function(){$scope.bid.top_bid_data=data["message"];})。但这没有用。

【问题讨论】:

  • 在角度上下文之外更新范围时使用$apply
  • @charlietfl 请参阅更新 1。我已经说明了主要问题。范围正在更新。但不是当前元素的范围。最后一个元素的范围已更新。
  • 因为 Angular 在更新 Angular 上下文之外的范围时(例如在 onmessage 回调中)不知道运行摘要,所以你必须告诉它使用 $apply
  • @charlietfl 否。范围正在更新。但不是当前元素,而是最后一个元素。解决办法是什么?请。
  • 创建一个重现问题的演示

标签: javascript angularjs sockets websocket


【解决方案1】:

将 websocket 构造函数移动到服务并仅使用一个连接会更明智。正如所写的,ng-repeat 正在创建到服务器的多个 websocket 连接。由服务器端应用程序以不同方式处理每个连接。显然,服务器正在响应最后一个连接,而不是单独响应。如需更多信息,请参阅Stackoverflow: Multiple Websockets

另见Github WS Issue #684 - Multiple connections, but single websocket.on("message") event emitter

【讨论】:

  • 但是有多个服务器端消费者的路径如ws://myip:8010/notif/ws://myip:8010/message/ 等。如果我定义一个服务并使用单个连接,我将无法将其更改为不同的小路。有什么建议吗?
  • 一般指令不应该与外部世界建立连接,它们应该将用户事件传递给视图控制器,视图控制器使用服务将业务事件传递给外部世界。
  • 我刚刚注意到你的previous question。它实际上是在每次调用构造函数时都用新连接替换 websocket。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-06-14
  • 2014-09-22
  • 2013-10-03
  • 2018-04-03
  • 1970-01-01
相关资源
最近更新 更多