Package Exports

angular-phoenix

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (angular-phoenix) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Angular Phoenix

Provides angular bindings to Phoenix so we can run events within the digest loop.

I've also taken the liberty of Promisifying phoenix!

Installing

$ bower install --save angular-phoenix

How to use

This is incomplete and only allows for a single socket connection per client

First we need to set our socket base url and add a global dependency.

angular.module('myApp', ['angular-phoenix'])

.config(['PhoenixProvider', PhoenixProvider => {
  PhoenixProvider.setUrl('ws//localhost:9000/ws')
  PhoenixProiver.setAutoJoin(false) // Phoenix will autojoin the socket unless this is called
}])

Now were ready!!!

Joining a channel

You can only join a channel once, if you provide a new message it will leave then rejoin the channel. Just like normal phoenix we call chan.join however we also can take scope!

var chan = Phoenix.chan('name', {})

chan.join()
  .receive(chann => {
    // Now our callbacks will get removed on scope destruction
    chann.on(scope, 'message', handler)
    chann.on('message', hander)
  })

chan.join().promise
  .then(chann => {
    // Now our callbacks will get removed on scope destruction
    chann.on(scope, 'message', handler)
    chann.on('message', hander)
  })

Why add a promise?

For things like UI-Router this allows you to join into a channel as a resolve property!!

.state('chatRoom', {
  url: '/chatRoom/:id',
  resolve: {
    chatChannel: ['$stateParams', 'Phoenix', ($stateParams, Phoenix) => {
      return Phoenix.join(`chatRoom:${$stateParams.id}`).promise
    }]
  }
})

// In the controller
_setupSocket() {
  this.chatChannel.on(this.$, 'new:message', (message) => {
    this.messages.push(message)
  })
  
  // Alternatively with no resolve
  var chan = Phoenix.chan('chatRoom')

  chan.join()
    .after(5000, () => console.warn('it didn\'t work'))
    // This is the same as just passing in "ok" and a callback
    .receive((message) => {
        this.message.push(message)
    })

  // Pass the current scope in so that when destroyed
  // the channel is left
  chan.join(scope)
}