Git Product home page Git Product logo

angular-realtime's Introduction

Realtime Framework

http://realtime.co

Wrapper for Realtime Framework

Demo

http://plnkr.co/edit/EVUDzF57RQe2cfdBznqp?p=preview

Quick Start

Subscribe for Realtime Cloud Messaging at https://accounts.realtime.co/subscriptions/ and get your Application Key.

Install the module

bower install angular-realtime

Add realtime to your app dependency

angular.module('app', ['realtime'])

Add $realtime to your controller, set credentials, listen for the onConnected event, subscribe to one or more channels, listen for the onSubscribed event, send a message.

angular.module('app', ['realtime'])
.controller('appCtrl', function($scope, $realtime) {
    $realtime.setCredentials('SET YOUR APP KEY', 'SET YOUR USER AUTH TOKEN');
    
    var channel1 = 'MYCHANNEL1';
    var channel2 = 'MYCHANNEL2';
    
    // Once we're connected, subscribe to the channel
    $scope.$on('realtime:onConnected', function() {
      $realtime.subscribe(channel1);
      $realtime.subscribe(channel2);
    });

    // Listen for the onSubscribed event and send some messages
    // The event will be in the following format:
    // realtime:CHANNEL_NAME:onSubscribed
    $scope.$on('realtime:' + channel1 + ':onSubscribed', function(event, ortc) {
      $realtime.send(channel1, 'Message on Channel: ' + channel1); // string
      $realtime.send(channel1, { user: 'user1', message: 'Message on Channel: ' + channel1}); // object
    });

    $scope.$on('realtime:' + channel2 + ':onSubscribed', function(event, ortc) {
      $realtime.send(channel2, 'Message on Channel: ' + channel2); // string
      $realtime.send(channel2, { user: 'user2', message: 'Message on Channel: ' + channel2}); // object
    });
    
    // Listen for the onMessage event
    // realtime:CHANNEL_NAME:onMessage
    
    // If you are setting message to a $scope var, you might need to use $scope.$apply(); for changes to take effect
    $scope.$on('realtime:' + channel1 + ':onMessage', function(event, message) {
        console.log('got message1', message);
    });
    
    $scope.$on('realtime:' + channel2 + ':onMessage', function(event, message) {
        console.log('got message2', message);
    });
});

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.