Free App Chat with PubNub and AngularJS - Part 1

PubNub AngularJS SDK giúp chúng ta đơn giản việc tích hợp PubNub vào trong app web chỉ bằng những API đơn giản mà PubNub cung cấp. SDK cũng support cho hệ thống lắng nghe sự kiện của AngularJS, giúp cho AngularJS app dễ dàng hơn trong việc lắng nghe sự kiện của PubNub

Bài viết này là bài viết đầu tiền trong chuỗi các bài viết giúp các bạn tạo ra một chat app bằng AngularJS. Trong bài này, chúng ta sẽ tập trung vào các chức năng: publishing and subcribing.

Installing PubNub AngularJS SDK

Để làm việc với angularjs chắc chắn chúng ta sẽ dùng những công cụ như npm hay bower để quản lý các package. Tuy nhiên chúng ta vẫn có thể sử dụng được các package một cách trực tiếp đó là add chúng vào bằng script tag.

• Sử dụng PubNub CDN:

<script src="https://cdn.pubnub.com/pubnub-3.7.21.js"></script>
<script src="https://cdn.pubnub.com/sdk/pubnub-angular/pubnub-angular-3.2.1.js"></script>

• Sử dụng NPM

npm install --save pubnub pubnub-angular

• Sử dụng bower

bower install --save pubnub pubnub-angular

Creating a simple chat room

Chúng ta sẽ tạo ra các user với id khác nhau để có thể chát live với các user khác

Step 1: Initiating PubNub

Thêm vào Angular app đoạn code dưới đây:

angular.module('app', ["pubnub.angular.service"])
 .controller('ChatCtrl', function($scope, Pubnub) {
   $scope.channel = 'messages-channel';
   // Generating a random uuid between 1 and 100 using an utility function from the lodash library.
   $scope.uuid = _.random(100).toString();
   Pubnub.init({
         publish_key: 'YOUR-PUBNUB-PUBLISH-KEY',
         subscribe_key: 'YOUR-PUBNUB-SUBSCRIBE-KEY',
         uuid: $scope.uuid
       });
 });

Chúng ta vừa set up PubNub với app keys mà các bạn có thể lấy được từ đây. Làm theo hướng dẫn bạn sẽ có được app keys để chạy SDK