2017-10-31 30 views
0

AngularJS:Webソケットは、サービス内のいくつかの関数を定義します。 コントローラからこれらの関数(onCLose、send、...)を呼び出す方法を知っていますか? ボタンをクリックするとコントローラが呼び出されます。 エラーこれらの2行について「機能ではありません」と言う:あなたは、 $ scope.websocket.sendと「機能ではありません」というエラーを取り除くために$ scope.websocket.onCloseAngularJS:コントローラからサービス関数を呼び出す方法

<!DOCTYPE html><html> 
<head> 
<meta charset="UTF-8"> 
<script type="text/javascript" src="lib/angular.min.js"></script> 
<script type="text/javascript" src="lib/angular-websocket.js"></script> 
<script type="text/javascript"> 

var app = angular.module('myApp', ['ngWebSocket']); 

app.service('WebSocketWrapper', ['$log', '$websocket', '$rootScope', function($log, $websocket, $rootScope){ 
    var ws = null; 
    this.state = 'initializing'; 
    this.message = 'websocket initializing'; 
    var self = this; 
    this.init = function(){ 
     if(!ws){ 
      ws = $websocket('ws://127.0.0.1:8080/WebSocketHome/echo', null, {reconnectIfNorNormalClose: true}); 

      ws.onClose(function(){ 
       console.info('close'); 
       $rootScope.$apply(function(){ 
        self.state = 'disconnected'; 
        self.message = 'Websocket disconnected'; 
       }); 
      }); 

      ws.onOpen(function(){ 
       console.info('connected'); 
       $rootScope.$apply(function(){ 
        self.state = 'connected'; 
        self.message = 'websocket connected'; 
       }); 
      }); 

      ws.onMessage(function(message){ 
       console.log("RECEIVED : " + message); 
      }); 
     } 
    }; 
}]); 

app.controller('WebSocketStateCtrl', ['$scope', 'WebSocketWrapper', function($scope, WebSocketWrapper){ 
    $scope.websocket = WebSocketWrapper; 
    $scope.websocket.init(); 
    $scope.sendMessage = function(){ 
     $scope.websocket.send($scope.name); 
     $scope.websocket.onClose(); 
    } 

}]); 

</script> 

</head> 
<body> 

    <div ng-app="myApp" ng-controller="WebSocketStateCtrl"> 
     <form action=""> 
      <input type="text" ng-model="name"> 
      <button ng-click="sendMessage()">SEND</button> 
     </form> 
    </div> 

</body> 
</html> 

答えて

1

var ws の代わりにを使用してwsオブジェクトをサービスオブジェクトにバインドする必要があります。これにより、サービスのオブジェクトはreturnである必要はありません。 -
だから、あなたのサービスコードは次のようになり

app.service('WebSocketWrapper', ['$log', '$websocket', '$rootScope', function($log, $websocket, $rootScope){ 
    this.ws = null; // Attach ws to service object 
    this.state = 'initializing'; 
    this.message = 'websocket initializing'; 
    var self = this; 
    this.init = function(){ 
     if(!this.ws){ 
      this.ws = $websocket('ws://127.0.0.1:8080/WebSocketHome/echo', null, {reconnectIfNorNormalClose: true}); 

      this.ws.onClose(function(){ 
       console.info('close'); 
       $rootScope.$apply(function(){ 
        self.state = 'disconnected'; 
        self.message = 'Websocket disconnected'; 
       }); 
      }); 

      this.ws.onOpen(function(){ 
       console.info('connected'); 
       $rootScope.$apply(function(){ 
        self.state = 'connected'; 
        self.message = 'websocket connected'; 
       }); 
      }); 

      this.ws.onMessage(function(message){ 
       console.log("RECEIVED : " + message); 
      }); 
     } 
    }; 
}]); 
+0

を私はしかし、私は取得コントローラ内部から「戻りWS」を、追加しました: " $ scope.websocket.wsは定義されていません "、" $ scope.websocket.onCloseは関数ではありません "。多分コントローラからonClose()を呼び出す別の方法がありますか? – Erixx

+0

'var ws = null;' '' 'this.ws = null; ''を試してください – Vandesh

+0

あなたのサービスでどこでもそれを使う必要があります。 更新された回答を確認してください。 – Vandesh

0

私は最終的に解決策、Vandeshのおかげで見つかった:

app.service('WebSocketWrapper', ['$log', '$websocket', '$rootScope', function($log, $websocket, $rootScope){ 
    this.ws = null; // Attach ws to service object 
    this.state = 'initializing'; 
    this.message = 'websocket initializing'; 
    var self = this; 
    this.init = function(){ 
     if(!this.ws){ 
      this.ws = $websocket('ws://127.0.0.1:8080/WebSocketHome/echo', null, {reconnectIfNorNormalClose: true}); 

      this.ws.onClose(function(){ 
       console.info('close'); 
       $rootScope.$apply(function(){ 
        self.state = 'disconnected'; 
        self.message = 'Websocket disconnected'; 
       }); 
      }); 

      this.ws.onOpen(function(){ 
       console.info('connected'); 
       $rootScope.$apply(function(){ 
        self.state = 'connected'; 
        self.message = 'websocket connected'; 
       }); 
      }); 

      this.ws.onMessage(function(message){ 
       console.log("RECEIVED : " + message); 
      }); 
     } 
    }; 
return this.ws; 
}]); 

app.controller('WebSocketStateCtrl', ['$scope', 'WebSocketWrapper', function($scope, WebSocketWrapper){ 
    $scope.websocket = WebSocketWrapper; 
    $scope.websocket.init(); 
    $scope.sendMsg = function sendMsg() { 
     $scope.websocket.ws.send($scope.name); 
    } 
}]); 
関連する問題