Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
PubNub Expanded Chat UI w/ Angular2
<!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">
<h3>Welcome to Channel: {{ channelName }}</h3>
You are: <b>{{userId}}</b>; Your mood is :
<select [(ngModel)]="mood" (ngModelChange)="updateMood($event)" >
<option value="happy">happy</option>
<option value="neutral">neutral</option>
<option value="sad">sad</option>
</select>
<br />
<div class="well">
<p>Users Online ({{ usersConnected }})</p>
<ul>
<li *ngFor="let o of occupants">{{ o.uuid }} ({{o.state?.mood}})</li>
</ul>
</div>
<hr/>
<p>Enter a new message:</p>
<input type="text" [(ngModel)]="newMessage" />
<button class="btn btn-primary" (click)="publish()">Send!</button>
<br/>
<br/>
<ul class="list-unstyled">
<li *ngFor="let item of messages">{{ item.message }}</li>
</ul>
</div>`
}).Class({
constructor: [PubNubAngular, function(pubnubService){
var self = this;
self.pubnubService = pubnubService;
self.channelName = 'angular2-chat';
self.userId = 'User_' + Math.round(Math.random() * 1000);
self.mood = 'happy';
self.messages = [];
self.newMessage = '';
self.usersConnected = 0;
self.occupants = [];
pubnubService.init({
publishKey: 'YOUR_PUB_KEY',
subscribeKey: 'YOUR_SUB_KEY',
uuid: this.userId
});
pubnubService.subscribe({channels: [self.channelName], triggerEvents: true, withPresence: true});
pubnubService.getMessage(this.channelName, function(msg) {
self.messages.unshift(msg);
});
pubnubService.history({channel: self.channelName, count:50}).then(function(msg) {
msg.messages.forEach(function(x) { self.messages.unshift({message:x.entry}); });
});
pubnubService.getPresence(self.channelName, (presence) => {
self.usersConnected = presence.occupancy;
self.pubnubService.hereNow({
channels: [self.channelName],
includeUUIDs: true,
includeState: true
}).then(function (response) {
self.occupants = response.channels[self.channelName].occupants;
}).catch((error) => {});
});
self.updateMood();
}],
publish: function(){
if (this.newMessage !== '') {
this.pubnubService.publish({message: '[' + this.userId + '] ' + this.newMessage, channel: this.channelName});
this.newMessage = '';
}
},
updateMood: function(){
this.pubnubService.setState({state:{mood:this.mood}, uuid:this.userId, channels:[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
You can’t perform that action at this time.