A TypeScript/JavaScript Client library for Distributed Information Sharing Platform: Madoi.
分散情報共有基盤MadoiのTypeScript/JavaScript用クライアントライブラリ。
Reactと組み合わせて使う場合は madoi-react も参照してください。
npm i madoi-client<!doctype html>
<html lang="ja">
<head>
<meta charset="utf8" />
</head>
<body>
<div>
<button id="counter1" type="button">count is 0</button>
<button id="counter2" type="button">count is 0</button>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>関数の実行をウェブアプリケーション間で共有する例を以下に示します。
import { Madoi } from 'madoi-client'
window.addEventListener("load", ()=>{
const madoi = new Madoi("wss://host/madoi-server/rooms/room001", "MADOI_API_KEY");
const element1 = document.querySelector('#counter1')!;
let counter1 = 0;
const incrementCounter = madoi.registerFunction(() => {
counter1++;
element1.innerHTML = `count is ${counter1}`
});
element1.addEventListener('click', () => incrementCount()); // incrementCounter is executed at all applications joined to same room.
});MadoiクラスのregisterFunctionメソッドに関数を渡すと、新たな関数を返します。
返された関数を実行すると、Madoiサーバに関数の登録番号と引数が送信され、自身も含め同じルームに参加しているアプリケーション全てにそれが送信され、それを受信すると、registerFunctionに渡された関数が実行されます。このように、registerFunctionを使うと、簡単に関数の実行を共有できます。複数のアプリケーションで同時に実行された場合でも、サーバから各アプリケーションへは同じ順番でメッセージが届くので、アプリケーション間での振る舞いを統一できます。
ここで、新しいアプリケーションが参加してきた時の状態共有を考えてみます。上記の例では、incrementCounter関数でcounterを+1しているため、最新時の状態に追いつくには、それまでの全ての実行を再現する必要があります。そのためMadoiは、関数の実行履歴を全て保存しており、新しくアプリケーションが参加するとその履歴を渡しています。しかし実行回数が増えてくると、このやり方は非効率です。この問題を解決する方法を次に紹介します。
まず、同期したい状態と、その状態を変更・取得・設定するメソッドを持つクラスを作成します。
class Counter{
private element: HTMLElement
private count = 0; // 同期したい状態
constructor(element: HTMLElement){
this.element = element;
}
// 状態を変更するメソッド
@Distributed()
@ChangeState()
increment(){
this.count++;
this.element.innerHTML = `count is ${this.count}`;
}
// 状態を取得するメソッド
@GetState()
getCount(){
return this.count;
}
// 状態を変更するメソッド
@SetState()
setCount(count: number){
this.count = count;
this.element.innerHTML = `count is ${this.count}`;
}
}Counterクラスは、カウンターの更新を行うincrement、カウンターを取得するgetCount、カウンターを設定するsetCountメソッドを持つシンプルなクラスです。このクラスのインスタンスを複数のアプリケーションで同期させることを考えます。まず、あるアプリケーション内でincrementが実行されると、カウンターが更新されます。状態を同期するには、他のアプリケーションでもincrement実行される必要があります。このメソッドに@Distributed()デコレータを追加すると、Madoiにより、実行が他のアプリケーションにも分配され、実行されます。
次に、新規参加者にはカウンターの最新の値を伝える必要があります。そのためには、カウンターが更新されると、状態を取得し、サーバに保存しておく必要があります。状態の変更を行うincrementメソッドに@ChangeStateデコレータを、状態の取得を行うgetCountメソッドに@GetState()デコレータを追加すると、Madoiがincrementが呼び出される度にgetStateを呼び出して戻り値をサーバに送信します。状態を設定するsetCountメソッドには@SetState()デコレータを追加しておくと、新たに参加したアプリケーションのsetCountに、最新の状態が渡されます。
次に、Counterクラスのインスタンスを作成し、Madoiクライアントに登録します。
import { Madoi } from 'madoi-client'
window.addEventListener("load", ()=>{
const madoi = new Madoi("wss://host/madoi-server/rooms/room001", "MADOI_API_KEY");
const element2 = document.querySelector<HTMLDivElement>('#counter2')!;
let counter2 = new Counter(element2);
madoi.register(counter2);
element2.addEventListener('click', () => counter2.increment()); // counter2.increment() is executed at all applications joining same room.
});Madoiクライアントにオブジェクトを登録すると、デコレータがつけられたメソッドを介して、状態が管理されます。この例では、incrementメソッドが実行されると、同じMadoiサーバのルームに参加している他のアプリケーションのincrementメソッドも実行されます。また、定期的にgetCountメソッドが呼び出され、状態が取得され、Madoiサーバに送信されます。新しくアプリケーションが参加してくると、最新の状態と、それ以降のメソッド実行履歴が送信され、アプリケーション内で状態の設定(setCount)とメソッドの実行が行われ、最新の状態に追いつきます。
このように、Madoiクライアントを利用すると、コラボレーションツールなどの実装に必要な状態同期を、クライアントアプリケーション側の宣言的な記述のみで(サーバ実装やクライアントのネットワーク関連処理、状態管理処理無しで)実現できます。