Ember Pusher 使用教程
ember-pusherA proper Ember / Pusher integration.项目地址:https://gitcode.com/gh_mirrors/em/ember-pusher
项目介绍
Ember Pusher 是一个用于 Ember.js 应用的 Pusher 集成库。它允许开发者在其 Ember 应用中声明性地连接到不同的 Pusher 频道和事件。该库提供了自然的接口来处理事件,并且支持完整的事件冒泡框架。
项目快速启动
安装
首先,确保你已经有一个 Ember 应用。然后,按照以下步骤安装 Ember Pusher:
-
安装
ember-pusher
和相关依赖:npm install --save-dev ember-pusher npm install --save-dev ember-browserify npm install --save-dev pusher-js@3.1.0
-
在你的 Ember 应用中配置 Pusher:
// app/pods/application/route.js import Ember from 'ember'; export default Ember.Route.extend({ setupController(controller, model) { let csrfToken = 'your-csrf-token'; let pusherKey = 'your-pusher-key'; this.get('pusher').setup({ key: pusherKey, auth: { headers: { 'X-CSRF-Token': csrfToken } } }); } });
使用 Pusher 服务
在你的控制器或组件中使用 Pusher 服务:
// app/controllers/application.js
import Ember from 'ember';
import EmberPusher from 'ember-pusher';
export default Ember.Controller.extend(EmberPusher.Bindings, {
pusher: Ember.inject.service(),
PUSHER_SUBSCRIPTIONS: {
'my-channel': ['event-one', 'event-two']
},
actions: {
eventOne() {
console.log('event one');
},
eventTwo() {
console.log('event two');
}
}
});
应用案例和最佳实践
动态频道名称
如果你的频道名称是动态的,可以这样处理:
// app/components/dynamic-channel.js
import Ember from 'ember';
import EmberPusher from 'ember-pusher';
export default Ember.Component.extend(EmberPusher.Bindings, {
pusher: Ember.inject.service(),
pusherEvents: ['event-one', 'event-two'],
didInsertElement() {
let pusher = this.get('pusher');
pusher.wire(this, this.get('channelName'), this.get('pusherEvents'));
},
willDestroyElement() {
this.get('pusher').unwire(this, this.get('channelName'));
},
actions: {
eventOne() {
console.log('event one');
},
eventTwo() {
console.log('event two');
}
}
});
私有频道
连接到私有频道:
// app/controllers/private-channel.js
import Ember from 'ember';
import EmberPusher from 'ember-pusher';
export default Ember.Controller.extend(EmberPusher.Bindings, {
PUSHER_SUBSCRIPTIONS: {
'private-user-3': ['cuckoo']
},
actions: {
cuckoo() {
console.log('cuckoo event');
}
}
});
典型生态项目
Ember Pusher 可以与其他 Ember 插件和库结合使用,例如:
- Ember Data: 用于数据管理,可以与 Pusher 结合实现实时数据更新。
- Ember CLI: Ember 的命令行工具,用于快速构建和部署 Ember 应用。
- Ember Inspector: 用于调试 Ember 应用的浏览器插件。
通过这些工具和库的结合,可以构建出功能强大且高效的实时应用。
ember-pusherA proper Ember / Pusher integration.项目地址:https://gitcode.com/gh_mirrors/em/ember-pusher