https://github.com/launchscout/angular2-phoenix-channels
Injectable observable wrapper for Phoenix Channels
https://github.com/launchscout/angular2-phoenix-channels
Last synced: over 1 year ago
JSON representation
Injectable observable wrapper for Phoenix Channels
- Host: GitHub
- URL: https://github.com/launchscout/angular2-phoenix-channels
- Owner: launchscout
- License: mit
- Created: 2015-11-22T19:35:51.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-11-22T21:36:23.000Z (over 10 years ago)
- Last Synced: 2025-03-24T22:41:31.836Z (over 1 year ago)
- Language: JavaScript
- Size: 5.86 KB
- Stars: 9
- Watchers: 5
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# angular2-phoenix-channels
A package that lets you use Phoenix channels as Angular 2 Observables.
## Configuration
When you bootstrap your app, you'll need to setup a provider and pass
in your websocket uri.
```javascript
let phoenixChannelsProvider = provide(PhoenixChannels, { useFactory: () => {
return new PhoenixChannels("ws://localhost:4000/socket");
} });
bootstrap(MyAppComponent, [phoenixChannelsProvider]);
```
## Usage
Have your service injected with PhoenixChannels
```typescript
@Injectable()
class CandidateService {
constructor(http: Http, phoenixChannels: PhoenixChannels) {
...
}
}
```
Join a channel.
```javascript
let allCandidatesChannel = this.phoenixChannels.channel("candidates:all");
allCandidatesChannel.join();
```
Observe messages. `observeMessage` returns an observable can call subscribe
or any other observable operators on.
```javascript
let phoenixObservable = this.allCandidatesChannel.observeMessage("change").map( (resp) => resp.candidates );
```
You can merge this observable with other observables.
```javascript
getCandidates() {
let httpObservable = this.http.get('http://localhost:4000/candidates').map( (resp) => resp.json());
let phoenixObservable = this.allCandidatesChannel.observeMessage("change").map( (resp) => resp.candidates );
return Observable.merge(httpObservable, phoenixObservable);
}
```
## Examples
Angular 2 app: http://github.com/gaslight/campg-angular2.git
Phoenix server for above app: http://github.com/superchris/hirem_server.git