Rx.js, Chrome Messaging API

Question

После того, как другая часть добавочного номера отправила сообщение, используя этот код

chrome.runtime.sendMessage({greeting: "hello"});

Любые эксперты Rx.js, которые могут использовать этот API для обмена сообщениями

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
});

и обернуть его в Observable, который генерирует новые сообщения и разрешает sendResponse?

Очень просто отправлять входящие сообщения в качестве наблюдаемого.

const MessagingObservable = Rx.Observable.create(observer => {      
  chrome.runtime.onMessage.addListener(listener);
  function listener(request, sender, sendResponse) {
    observer.next(request); 
  }
  return () => {
    chrome.runtime.onMessage.removeListener(listener);
  };
});

Но как связать обратный вызов sendResponse?

Answer 1

Вы можете использовать встроенную функцию fromEventPattern для создания наблюдаемой, например:

const messages = Rx.Observable.fromEventPattern(
  handler => chrome.runtime.onMessage.addListener(handler),
  handler => chrome.runtime.onMessage.removeListener(handler),
  (request, sender, sendResponse) => ({ request, sender, sendResponse })
);

Обратите внимание, что вызов fromEventPattern включает селектор результата, поэтому значения, излучаемые наблюдаемой, содержат request, sender и sendResponse, которые вы будете использовать следующим образом:

messages.subscribe(({ request, sender, sendResponse }) => {
  console.log(request);
  sendResponse(/* ... whatever ... */);
});

Для поддержки асинхронного вызова sendResponse слушатель должен иметь возможность вернуть true. Это можно сделать, обернув handler, например:

const messages = Rx.Observable.fromEventPattern(
  handler => {
    const wrapper = (request, sender, sendResponse) => {
      const event = { async: false, request, sender, sendResponse };
      handler(event);
      return event.async;
    };
    chrome.runtime.onMessage.addListener(wrapper);
    return wrapper;
  },
  (handler, wrapper) => chrome.runtime.onMessage.removeListener(wrapper)
);

И вы бы использовали это так:

messages.subscribe(event => {
  console.log(event.request);
  event.async = true;
  setTimeout(() => event.sendResponse(/* ... whatever ... */), 1000);
});