TypeScriptでpubsubモジュールを実装する

概要

pubsubモジュールは、アプリケーション内の異なるモジュール同士が連携するための役割を果たします。
主に、2つのメソッドを提供しています。
subscribeメソッド: イベントに対して購読（登録）を行い、指定されたコールバック関数を保持します。購読されたイベントが発生した際に、このコールバックが実行されます。
publishメソッド: 指定されたイベントを発生させ、そのイベントに紐づいているすべての購読者（サブスクライバー）のコールバック関数を呼び出します。

これにより、各モジュールが「イベント」という共通の方法を使って通信できるようになります。イベントが発生すると、そのイベントに登録された購読者のコールバック関数が順次実行される仕組みです。

背景

業務のコードでpubsub-jsを知ったので、PubSubパターン/モジュールを理解したいと思います

pubsub-jsとは

JavaScriptで書かれたトピックベースのPub/Subパターンのライブラリです。

Pub/Subパターンとは

Publisher/Subscriberパターンの略です

疎結合でデータの受け渡しができるモジュールを作成できるパターンです

シンプルなPub/Subモジュールを実装してみる

以下を参考に実装しました

実装

src/pubsub.ts

let subscribers = {} as {
  [event: string]: ((data: { msg: string }) => void)[];
};

export = {
  publish(event: string, data: { msg: string }) {
    if (!subscribers[event]) return;
    subscribers[event].forEach((subscriberCallback) =>
      subscriberCallback(data)
    );
  },
  subscribe(event: string, callback: (data: { msg: string }) => void) {
    let index: number;
    if (!subscribers[event]) {
      subscribers[event] = [];
    }
    index = subscribers[event].push(callback) - 1;
    return {
      unsubscribe() {
        subscribers[event].splice(index, 1);
      },
    };
  },
};

• publishメソッド
  指定されたイベントを発生させ、そのイベントに紐づいているすべての購読者（サブスクライバー）のコールバック関数を呼び出します

• subscribeメソッド
  イベントに対して購読（登録）を行い、指定されたコールバック関数を保持します。購読されたイベントが発生した際に、このコールバックが実行されます。

次に二つのモジュール間でイベントを通して通信します。

src/executePublishEvent.ts

import pubSub from "./pubsub";

export const executePublishEvent = () => {
  const data = {
    msg: "TOP SECRET DATA",
  };

  pubSub.publish("anEvent", data);
};

src/executeSubScribeEvent.ts

import pubSub from "./pubsub";

export const executeSubScribeEvent = () => {
  let subscription: { unsubscribe(): void };

  subscription = pubSub.subscribe("anEvent", (data) => {
    console.log(`"anEvent", was published with this data: "${data.msg}"`);
    subscription.unsubscribe();
  });
};

src/index.ts

import { executeSubScribeEvent } from "./executeSubScribeEvent";
import { executePublishEvent } from "./executePublishEvent";

executeSubScribeEvent();
executePublishEvent();

実行

以下のコマンドで実行可能です

npx ts-node src/index.ts

or

npm run pubsub;

実行結果は以下です

"anEvent", was published with this data: "TOP SECRET DATA"

二つのモジュール間でイベントを通して通信できました。

最後に

PubSubパターン/モジュールについて理解を深めたいと思います
業務で使われている実装を見て、pubsubjsの概要を掴みたいと思います

参考

所属企業に興味ある方は以下ご覧ください！