AngularJS : a web socket defines several functions inside a service. Do you know how to call these functions (onCLose, send, ...) from a controller ?? The controller is called when i click on a button. A error says "is not a function" about these 2 lines : $scope.websocket.send and $scope.websocket.onClose
<!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>
2 Answers 2
To get rid of the "is not a function" errors, you need to bind the ws object to the service object by using this.ws instead of var ws
With this, you need not return any object from the service.
So, your service code would look like -
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);
});
}
};
}]);
answered Oct 31, 2017 at 10:52
Vandesh
6,9642 gold badges32 silver badges38 bronze badges
Sign up to request clarification or add additional context in comments.
10 Comments
Erixx
i added "return ws", but from inside the controller i get : "$scope.websocket.ws is undefined" and "$scope.websocket.onClose is not a function". Maybe there is another way to call onClose() from the controller ???
Vandesh
Intsead of
var ws = null; try this.ws = null;Vandesh
You need to use it everywhere in your service. Please check my updated answer.
Erixx
i made what you say, then i call the function onClose from the controller with : "$scope.websocket.ws.onClose()" => i have no more error message, but the onClose() method is not executed ! My original issue is this one : stackoverflow.com/questions/46979076/websocket-angularjs-client
Vandesh
Can you edit the original post with the updated code?
|
I finally found the solution, thanks to 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);
}
}]);
Comments
default