嵌入式电缆

这种加法使得铁路行动有线简便地集成到Ember app.

页:1 发表于 v2 加词 (英语:Embroider format). 这需要 ember-auto-import (原始内容存档于2018-10-29). QQ 2 and Ember QQ 4.12. 仓库布局 : ember-cable/ 和 test-app/ (测试).

安装

从您的 ember- cli 工程中运行以下命令 :

ember install @algonauti/ember-cable

基本用途

一旦加通被安装,电缆服务可以在任何地方注入 在申请中需要.

// test-app/app/components/notification-messages/component.js
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { debug, inspect } from '@ember/debug';
import EmberObject from '@ember/object';
import { getOwner } from '@ember/application';

export default class NotificationMessagesComponent extends Component {
  @service cable;
  @service notification;

  constructor() {
    super(...arguments);
    this._setupConsumer();
  }

  _setupConsumer() {
    let consumer = this.cable.createConsumer('ws://localhost:4200/cable');

    consumer.createSubscription('BroadcastChannel', {
      connected() {
        debug('BroadcastChannel#connected');
        this.perform('ping');
      },
      received(data) {
        debug( "received(data) -> " + inspect(data) );
      },
      disconnected() {
        debug("BroadcastChannel#disconnected");
      }
    });

    // Passing Parameters to Channel
    let subscription = consumer.createSubscription({ channel: 'BroadcastChannel', room: 'BestRoom' }, {
      connected() {
        this.perform('ping', { foo: 'bar' });
      },
      received: (data) => {
        this._updateRecord(data);
      },
      disconnected: () => {
        this.notification.notify("BroadcastChannel#disconnected");
      }
    });

    // Using mixin and inject your services:
    let subscriptionHandler = EmberObject.extend({
      notification2: service('notification'),

      connected() {
        this.notification2.notify("subscriptionHandler#connected");
      },
    }).create(getOwner(this).ownerInjection());

    consumer.createSubscription({ channel: 'BroadcastChannel' }, subscriptionHandler);

    setTimeout(() => {
      subscription.perform('ping', { foo: 'bar' });
    }, 3000);

    setTimeout(() => {
      this.cable.destroy();
    }, 9000);

  }

  _updateRecord(data) {
     debug( "updateRecord(data) -> " + inspect(data) );
   }
}

类型脚本

附加语用TypeScript来写作,并用自己类型的声明来写出.

import Component from '@glimmer/component';
import { service } from '@ember/service';
import type CableService from '@algonauti/ember-cable/services/cable';

export default class Notifications extends Component {
  @service declare cable: CableService;

  constructor(owner: unknown, args: object) {
    super(owner, args);

    const consumer = this.cable.createConsumer('ws://localhost:4200/cable');

    consumer.createSubscription('BroadcastChannel', {
      connected() {
        this.perform('ping');
      },
      received(data: unknown) {
        console.log(data);
      },
    });
  }
}

Consumer, (中文(简体) ), CableService 和 行动电缆类型BaseMixin, (中文(简体) ), ChannelNameWithParams, (中文(简体) ), Subscription, (中文(简体) ), Subscriptions也从 @algonauti/ember-cable。 。 。 .

捐款

见 捐款 详细指南.

许可证

嵌入式电缆在 MIT 许可证。 。 。 .