Ember-phoenix-socket
Connecting Phoenix to Ember (and EmberData) via websockets.
Getting Started
Install via bower:
$ bower install --save ember-phoenix-socket
Initialize the socket adapter:
window.App = Ember.Application.create();
var options: {
endpoint: "wss://Whateverhost.com/ws",
appName: 'App',
storeName: 'DS',
init: {doInit: true, channel: 'data', topic: 'data', params: null}
}
PhoenixSocket(options);By default, Ember-phoenix-socket is configured to join a channel of 'session' and a topic of 'data', which it attaches to your Ember data store.
Options
PhoenixSocket takes four options (shown with their defaults):
{
endpoint: location.protocol.match(/^https/) ? "wss://" + location.host + "/ws" : "ws://" + location.host + "/ws",
appName: 'App',
storeName: 'DS'
init: {doInit: true, channel: 'data', topic: 'data', params: null}
}If init.doInit is set to true, PhoenixSocket will immediately attempt to connect to the socket with the given params. If you don't want any channels immediately, set init: false. If you want a default channel but don't want it to be joined immediately, set {doInit: false} with the rest of your params in the object.
Custom Channels
Adding custom channels is pretty easy. Here's an example of a custom channel being initialized, and extended with a login method:
// adding a "session" channel
App.Phoenix.Session = App.Phoenix.Channel.extend({
isAuthenticated: false,
login: function(params) {
this.get('join')(params)
.then(function(success) {
this.set('isAuthenticated', true)
console.log(success)
}.bind(this), function(failure) {
console.log(failure)
}.bind(this))
}
})
Ember.onLoad('Ember.Application', function(Application) {
Application.initializer({
name: 'session',
initialize: function(container, application) {
application.register('service:session', App.Phoenix.Session, {singleton: true})
application.inject('controller', 'service:session', 'service:session');
container.lookup('service:session').setSocket('session','session');
}
})
})
Custom channels will adhere to the same API that Ember uses when it queries the store, namely requests being made up of url, type, params, and returning a promise. Quick example:
container.lookup('service:events').ajax('/events', 'GET', {eventName: "stuff"}).then(function(result) { console.log(result) }))Connecting to Phoenix
For an example of a Phoenix app configured to work with this, check out Phember (currently broken)
