PubNub SMS sender w/ Infobip API
| <!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 SMS Transmission BLOCK is configured properly! | |
| </pre> | |
| <h3>MyApp Instant SMS Notifications</h3> | |
| <input type="button" (click)="publish()" value="PANIC!" /> | |
| <br /><br /> | |
| <ul> | |
| <li *ngFor="let item of messages.slice().reverse()"> | |
| Event Description: <span class="label label-danger">{{item.message.text}}</span> | |
| <br /> | |
| SMS Message ID: <span class="label label-default">{{item.message.sent.messages[0].messageId}}</span> | |
| <br /> | |
| Timestamp: <span class="label label-default">{{item.message.sent.timestamp}}</span> | |
| </li> | |
| </ul> | |
| </div>` | |
| }).Class({ | |
| constructor: [PubNubAngular, function(pubnubService){ | |
| var self = this; | |
| self.pubnubService = pubnubService; | |
| self.channelName = 'infobip_sms'; | |
| self.messages = []; | |
| 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(){ | |
| // no handler necessary, dynamic collection of msg objects | |
| }); | |
| }], | |
| publish: function(){ | |
| this.pubnubService.publish({ channel: this.channelName, message: {to:"15554443333",from:"InfoSMS",text:"PANIC sent by user on channel " + this.channelName + "!"} }); | |
| } | |
| }); | |
| 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