Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!doctype html>
<html>
<head>
<script src="https://cdn.pubnub.com/pubnub-3.15.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdn.pubnub.com/sdk/pubnub-angular/pubnub-angular-3.2.1.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container" ng-app="PubNubAngularApp" ng-controller="DashCamCtrl">
<h4>Online Devices</h4>
<ul class="list-unstyled list-inline">
<li ng-repeat="(uuid, data) in received">
<img style="width:400px;height:300px" ng-src="{{data.image}}" />
<br />
<b>{{data.uuid}}</b>
<br />
{{data.ts}}
</li>
</ul>
</div>
<script>
//
// Set Up Your Angular Module & Controller(s)
//
angular.module('PubNubAngularApp', ["pubnub.angular.service"])
.controller('DashCamCtrl', function($rootScope, $scope, Pubnub) {
$scope.received = {};
$scope.inprogress = {};
// make up a channel name
$scope.channel = 'dashcam-demo';
if (!$rootScope.initialized) {
Pubnub.init({
subscribe_key: 'YOUR_SUB_KEY',
publish_key: 'YOUR_PUB_KEY',
ssl:true
});
$rootScope.initialized = true;
}
var msgCallback = function(payload) {
$scope.$apply(function() {
if (payload.uuid) {
if (!$scope.inprogress[payload.uuid]) {
$scope.inprogress[payload.uuid] = payload;
}
if (payload.i == 0) {
$scope.inprogress[payload.uuid].imageTmp = payload.imgPart;
} else {
$scope.inprogress[payload.uuid].imageTmp = $scope.inprogress[payload.uuid].imageTmp + payload.imgPart;
}
if (payload.i == (payload.n - 1)) {
$scope.received[payload.uuid] = $scope.inprogress[payload.uuid];
$scope.received[payload.uuid].image = $scope.inprogress[payload.uuid].imageTmp;
$scope.inprogress[payload.uuid] = null;
}
}
});
};
var multiMsgCallback = function(payloads) {
payloads[0].forEach(function(x) { msgCallback(x); });
};
// Subscribe to the Channel (to receive updates)
Pubnub.subscribe({ channel: $scope.channel, callback: msgCallback });
// Retrieve history (to initialize with most recent history)
Pubnub.history({ channel:$scope.channel, limit:16, callback: multiMsgCallback });
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.