In the previous blog we created a server which serves web socket based service, here we angular js based client will establish connection and show live status in the form of service dashboard.
<!DOCTYPE html>
<html>
<head>
<title>Service Dashboard application</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="bootstrap-combined.no-icons.min.css" rel="stylesheet">
<script type="text/javascript" src="jquery.min.js"></script>
<script src="angular.js"></script>
<link rel="stylesheet" href="ng-table.min.css">
<script src="ng-table.js"></script>
</head>
<body>
<div class="container">
<h1>Service status Live</h1>
<hr>
Service status : <span id="message"></span>
<hr>
<h3>Running Services</h3>
<div ng-app="serviceApp" >
<div id="outer" ng-controller="customersCtrl">
<div class="row">
<div class="span4">
<table class="table table-striped">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>Server</th>
<th>Status</th>
</tr>
</thead>
<tr ng-repeat="user in customers.names track by $index" >
<td>{{user.id}}</td>
<td>{{user.url}}</td>
<td>{{user.status}}</td>
</tr>
</table>
</div>
</div>
</div>
<script>
var $message = $('#message');
var app = angular.module('serviceApp', []);
app.controller('customersCtrl', function ($scope, $rootScope, websocketService) {
$scope.customers= {};
websocketService.start("ws://localhost:8888/ws", function (evt) {
var obj = JSON.parse(evt.data);
$rootScope.$apply(function () {
console.log(typeof obj);
$scope.customers.names =JSON.parse(obj);;
});
});
});
app.factory('websocketService', function () {
return {
start: function (url, callback) {
var websocket = new WebSocket(url);
websocket.onopen = function () {
$message.attr("class", 'label label-success');
$message.text('open');
};
websocket.onclose = function () {
$message.attr("class", 'label label-important');
$message.text('closed');
};
websocket.onmessage = function (evt) {
$message.attr("class", 'label label-info');
$message.hide();
$message.fadeIn("slow");
$message.text('recieved message');
callback(evt);
};
websocket.onerror = function(ev){
$message.attr("class", 'label label-warning');
$message.text('error occurred');
};
}
}
}
);
</script>
</body>
</html>
No comments:
Post a Comment