angular-phoenix

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)
}