Angular service to Web-Stomp
This class relies on stomp.js that can be found at: https://github.com/jmesnil/stomp-websocket/
Add the dependency to your Angular application :
angular.module('myApp', [
'AngularStompDK'
])Configure the ngStomp to connect to your web-socket system :
angular.module('myApp')
.config(function(ngstompProvider){
ngstompProvider
.url('/ws')
.credential('login', 'password')
.class(SockJS);
});Use it inside your controller (or everywhere you want !)
angular.controller('myController', function($scope, ngstomp) {
var webSocketEndPoint = '/topic/item',
items = [];
ngstomp
.subscribe(webSocketEndPoint, whatToDoWhenMessageComming);
function whatToDoWhenMessageComming(message) {
items.push(JSON.parse(message.body));
}
});You can chain multiple subscribe
angular.controller('myController', function($scope, ngstomp) {
var items = [];
ngstomp
.subscribe('/topic/item', whatToDoWhenMessageComming)
.subscribe('/queue/message', whatToDoWhenMessageComming);
function whatToDoWhenMessageComming(message) {
items.push(JSON.parse(message.body));
}
});Don't forget to unsubscribe your callback when the $scope is detroy (or the call will append even after the scope has been detroyed)
angular.controller('myController', function($scope, ngstomp) {
var items = [];
ngstomp
.subscribe('/topic/item', whatToDoWhenMessageComming)
.subscribe('/queue/message', whatToDoWhenMessageComming);
$scope.$on('$destroy', function() {
ngstomp
.unsubscribe('/topic/item', whatToDoWhenUnsubscribe);
});
function whatToDoWhenMessageComming(message) {
items.push(JSON.parse(message.body));
}
function whatToDoWhenUnsubscribe() {
console.log("Unsubscribed !! :D);
}
});Or you can give the $scope to the subscribe method to enable the auto-unsubscribe
angular.controller('myController', function($scope, ngstomp) {
var items = [];
ngstomp
.subscribe('/topic/item', whatToDoWhenMessageComming, $scope)
.subscribe('/queue/message', whatToDoWhenMessageComming, $scope);
function whatToDoWhenMessageComming(message) {
items.push(JSON.parse(message.body));
}
});And now (since v0.1.0) you can send back to the Web-Socket information :
angular.controller('myController', function($scope, ngstomp) {
var items = [];
ngstomp
.subscribe('/topic/item', whatToDoWhenMessageComming, $scope);
function whatToDoWhenMessageComming(message) {
items.push(JSON.parse(message.body));
}
var objectToSend = { message : 'Hello Web-Socket'},
stompHeaders = {headers1 : 'xx', headers2 : 'yy'};
$scope.sendDataToWS = function(message) {
ngstomp
.send('/topic/item/message', objectToSend, stompHeaders);
}
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent