Question

我有一个第三方库，我打算与RxJS集成。这是一个名为Tiger Text的消息库。据他们说，我可以听一个叫做消息的事件，当流有消息时我可以用它来进一步利用它。相同的代码片段如下： -

var client = new TigerConnect.Client({ defaultOrganizationId: 'some-org-id' })

client.signIn('user@mail.com', 's3cr3t', { udid: 'unique-device-id' }).then(function (session) {
  onSignedIn(session)
})

function onSignedIn(session) {
  console.log('Signed in as', session.user.displayName)

  client.messages.sendToUser(
    'someone@mail.com',
    'hello!'
  ).then(function (message) {
    console.log('sent', message.body, 'to', message.recipient.displayName)
  })

  client.events.connect()

  client.on('message', function (message) {
    console.log(
      'message event',
      message.sender.displayName,
      'to',
      message.recipient.displayName,
      ':',
      message.body
    )
  })
}

现在，请查看下面提到的代码段。

client.on('message', function (message) {
    console.log(
      'message event',
      message.sender.displayName,
      'to',
      message.recipient.displayName,
      ':',
      message.body
    )
  })

我想知道如何使用RxJS以便从这段代码中创建一个observable以便订阅流，每当我们进行更改时，我都会按照自己的意愿处理新数据并进行处理。

请建议。

Answer 1

您可以使用fromEventPattern从自定义事件创建一个observable：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEventPattern';

const messages = Observable.fromEventPattern(
  handler => client.on('message', handler),
  handler => client.off('message', handler)
);
messages.subscribe(message => console.log(message));

您传递给使用自定义API添加和删除机制添加和删除事件处理程序的fromEventPattern个函数。您尚未将其包含在您的问题中，但我们假设您使用的API实现了off方法。

Answer 2

对于此用例，您通常不需要编写自定义Observable，只能使用Observable.create()。然后，这取决于您是否要编写 cold 或 hot observable。

对于 cold Observables，您在订阅时创建值的生成者，并在取消订阅时关闭它：

Observable.create(obs => {
  var client = new TigerConnect.Client({ defaultOrganizationId: 'some-org-id' });
  client.signIn('user@mail.com', 's3cr3t', { udid: 'unique-device-id' }).then(function (session) {
    onSignedIn(session);
  });

  client.on('message', function (message) {
    obs.next(...);
  });

  return () => {
    client.close(); // or whatever...
  };
});

或者如果你想写一个 hot Observable，那么生产者将在任何订阅上独立存在，只需添加/删除监听器：

var client = new TigerConnect.Client({ defaultOrganizationId: 'some-org-id' });
client.signIn('user@mail.com', 's3cr3t', { udid: 'unique-device-id' }).then(function (session) {
  onSignedIn(session);
});

Observable.create(obs => {
  let listener = client.on('message', function (message) {
    obs.next(...);
  });

  () => {
    // remove the event listener somehow
    listener.remove();
  };
});

有时您可以通过使用Subject来解决此问题，但这通常比使用Observable.create()更复杂，因为您需要自己处理创建和拆除逻辑，并且主题具有内部状态。

这是一个与你非常相似的问题：

Subscribe to a stream with RxJS and twitter-stream-api module

RxJS首席开发人员提出的与您的问题相关的主题的文章：

如何在Angular 2中使用RXJS观察自定义事件？

2 个答案: