![How to use it?
Shared Socket Service
1. import SocketGuruService from 'ember-socket-guru/services/socket-guru';
2.
3. export default SocketGuruService.extend({
4. socketClient: 'pusher', // might be also ActionCable, Socket.IO or Phoenix - API stays the same
5. config: { // obligatory config that is adapter-based, different for each provider
6. pusherKey: 'PUSHER_KEY',
7. },
8. observedChannels: { // common structure that defines what channels should we subscribe to and what events listen to
9. channel1: ['event1'],
10. },
11. });
Configure shared service
Socket.io does not have channels abstraction. In this case observedChannels is a flat array of events.](https://image.slidesharecdn.com/ember-socket-guru-commonapiforwebsocketsproviders-170515132309/85/ember-socket-guru-common-api-for-websockets-providers-8-320.jpg)
![How does it work?
Subscribe
1. subscribe(observedChannels) {
2. Object.keys(observedChannels).forEach((channelName) => {
3. const channel = get(this, 'socket').subscribe(channelName); // usage of Pusher API to subscribe to channel
4. const joinedChannels = get(this, 'joinedChannels');
5. set(this, 'joinedChannels', Object.assign({}, joinedChannels, {
6. [channelName]: channel,
7. }));
8. observedChannels[channelName].forEach((event) => {
9. channel.bind(event, (data) => { // usage of Pusher API to bind for events
10. run(() => get(this, 'eventHandler')(event, data));
11. });
12. });
13. });
14. },
Example subscribe code in Pusher adapter](https://image.slidesharecdn.com/ember-socket-guru-commonapiforwebsocketsproviders-170515132309/85/ember-socket-guru-common-api-for-websockets-providers-13-320.jpg)
![How does it work?
Emit
1. emit(channelName, eventName, eventData) {
2. const channel = get(this, `joinedChannels.${channelName}`);
3. if (!channel) { // make guard clauses to make sure that Pusher API can be used
4. return warn(
5. `[ember-socket-guru] You need to join channel ${channelName} before pushing events!`,
6. channel,
7. { id: 'ember-socket-guru.channel-not-joined' }
8. );
9. }
10. channel.push(eventName, eventData); // again, use Pusher API to emit the event
11. },
Example emit code in Pusher adapter](https://image.slidesharecdn.com/ember-socket-guru-commonapiforwebsocketsproviders-170515132309/85/ember-socket-guru-common-api-for-websockets-providers-14-320.jpg)
ember-socket-guru - common api for websockets providers
- 1. Kuba Niechcial ember-socket-guru - common API for websockets providers
- 2. Introduction Who am I? Kuba Niechcial Senior Tech Leader @ Netguru Leading 25 frontends and 50 backends
- 3. What have we built? Netguru’s Ember Team eslint-plugin-ember ember-socket-guru ember-cli-deploy-rollbar 10+ Ember.js blogposts WIP ember-multi-language capistrano-ember_cli
- 4. The problem ember-socket-guru What is the problem?
- 5. The problem ember-socket-guru Each WebSockets provider has different API for the same (or basically the same) set of features. It is a common use case to start with SaaS and eventually migrate to custom infrastructure.
- 6. The solution ember-socket-guru What is the solution? Built mostly by @jacek_bandura, our senior developer
- 7. How to use it?
- 8. How to use it? Shared Socket Service 1. import SocketGuruService from 'ember-socket-guru/services/socket-guru'; 2. 3. export default SocketGuruService.extend({ 4. socketClient: 'pusher', // might be also ActionCable, Socket.IO or Phoenix - API stays the same 5. config: { // obligatory config that is adapter-based, different for each provider 6. pusherKey: 'PUSHER_KEY', 7. }, 8. observedChannels: { // common structure that defines what channels should we subscribe to and what events listen to 9. channel1: ['event1'], 10. }, 11. }); Configure shared service Socket.io does not have channels abstraction. In this case observedChannels is a flat array of events.
- 9. How to use it? Shared mixin for objects 1. import Ember from 'ember'; 2. import SocketEventHandler from 'ember-socket-guru/mixins/socket-event-handler'; 3. 4. const { Route } = Ember; 5. 6. export default Route.extend(SocketEventHandler, { 7. socketActions: { 8. onEvent1(data) { // handle events based on its name onEVENT_NAME 9. // handle event1 10. }, 11. }, 12. 13. onSocketAction(eventName, eventData) { // handler for all events - not obligatory 14. // handle all events, including event1 15. }, 16. }); Shared mixin for objects
- 10. How does it work?
- 11. How does it work? Adapter pattern ActionCable Socket.ioPusher Phoenix setup subscribe unsubscribe disconnect emit
- 12. How does it work? Setup 1. setup(config, eventHandler) { 2. const PusherService = get(this, 'pusherService'); 3. this._checkConfig(config); // internal custom implementation for config check in Pusher 4. setProperties(this, { 5. eventHandler, 6. socket: new PusherService(get(config, 'pusherKey'), config), 7. }); 8. 9. get(this, 'socket').connection 10. .bind('connected', () => this._handleConnected()); // use Pusher API to connect to Pusher servers 11. }, Example setup code in Pusher adapter
- 13. How does it work? Subscribe 1. subscribe(observedChannels) { 2. Object.keys(observedChannels).forEach((channelName) => { 3. const channel = get(this, 'socket').subscribe(channelName); // usage of Pusher API to subscribe to channel 4. const joinedChannels = get(this, 'joinedChannels'); 5. set(this, 'joinedChannels', Object.assign({}, joinedChannels, { 6. [channelName]: channel, 7. })); 8. observedChannels[channelName].forEach((event) => { 9. channel.bind(event, (data) => { // usage of Pusher API to bind for events 10. run(() => get(this, 'eventHandler')(event, data)); 11. }); 12. }); 13. }); 14. }, Example subscribe code in Pusher adapter
- 14. How does it work? Emit 1. emit(channelName, eventName, eventData) { 2. const channel = get(this, `joinedChannels.${channelName}`); 3. if (!channel) { // make guard clauses to make sure that Pusher API can be used 4. return warn( 5. `[ember-socket-guru] You need to join channel ${channelName} before pushing events!`, 6. channel, 7. { id: 'ember-socket-guru.channel-not-joined' } 8. ); 9. } 10. channel.push(eventName, eventData); // again, use Pusher API to emit the event 11. }, Example emit code in Pusher adapter
- 15. Summary What it gives? Adapter approach that allows us to use multiple WebSockets providers with one common API.
- 16. Summary Tech insights Reliable TestedConventional It works. It’s tested.Introduce convention for websockets.
- 17. Summary Non-tech insights Solves real problem Landing page that you trust Good, dedicated docs