PubNub IoT Events UI w/ Mnubo
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Angular 2</title> | |
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> | |
<script src="https://unpkg.com/zone.js@0.7.2/dist/zone.js"></script> | |
<script src="https://unpkg.com/reflect-metadata@0.1.9/Reflect.js"></script> | |
<script src="https://unpkg.com/rxjs@5.0.1/bundles/Rx.js"></script> | |
<script src="https://unpkg.com/@angular/core/bundles/core.umd.js"></script> | |
<script src="https://unpkg.com/@angular/common/bundles/common.umd.js"></script> | |
<script src="https://unpkg.com/@angular/compiler/bundles/compiler.umd.js"></script> | |
<script src="https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js"></script> | |
<script src="https://unpkg.com/@angular/forms/bundles/forms.umd.js"></script> | |
<script src="https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script> | |
<script src="https://unpkg.com/pubnub@4.3.3/dist/web/pubnub.js"></script> | |
<script src="https://unpkg.com/pubnub-angular2@1.0.0-beta.8/dist/pubnub-angular2.js"></script> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" /> | |
</head> | |
<body> | |
<main-component> | |
Loading... | |
</main-component> | |
<script> | |
var app = window.app = {}; | |
app.main_component = ng.core.Component({ | |
selector: 'main-component', | |
template: ` | |
<div class="container"> | |
<pre> | |
NOTE: make sure to update the PubNub keys below with your keys, | |
and ensure that the BLOCK settings are configured properly! | |
</pre> | |
<h3>MyApp IoT Events Integration</h3> | |
<hr/> | |
<p>Click the button below to send a health metric</p> | |
<select [(ngModel)]="system_health"> | |
<option value="healthy">healthy</option> | |
<option value="degraded">degraded</option> | |
<option value="disabled">disabled</option> | |
</select> | |
<button class="btn btn-primary btn-info" (click)="publish()">Send event!</button> | |
<br/> | |
<br/> | |
<ul> | |
<li *ngFor="let item of messages.slice()"> | |
<div>Device {{item.message.id}} @ {{item.message.timestamp}}, status = {{item.message.status}}, published {{item.message.result.statusText}}</div> | |
</li> | |
</ul> | |
</div>` | |
}).Class({ | |
constructor: [PubNubAngular, function(pubnubService){ | |
var self = this; | |
self.pubnubService = pubnubService; | |
self.channelName = 'mnubo-post-event-channel'; | |
self.system_health = "healthy"; | |
self.device_id = PubNub.generateUUID(); | |
pubnubService.init({ | |
publishKey: 'YOUR_PUB_KEY', | |
subscribeKey: 'YOUR_SUB_KEY', | |
ssl:true | |
}); | |
pubnubService.subscribe({channels: [self.channelName], triggerEvents: true}); | |
self.messages = pubnubService.getMessage(this.channelName,function(msg){ | |
// no handler necessary, dynamic collection of msg objects | |
}); | |
}], | |
publish: function(){ | |
var message = { | |
id:this.device_id, | |
timestamp:new Date().toISOString(), | |
// TODO: be sure to to add 'status' to your Mnubo event schema | |
status:this.system_health | |
}; | |
this.pubnubService.publish({channel: this.channelName,message: message}); | |
} | |
}); | |
app.main_module = ng.core.NgModule({ | |
imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule], | |
declarations: [app.main_component], | |
providers: [PubNubAngular], | |
bootstrap: [app.main_component] | |
}).Class({ | |
constructor: function(){} | |
}); | |
document.addEventListener('DOMContentLoaded', function(){ | |
ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(app.main_module); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment