Momento TopicsでWebSocketを実現するサンプルを試してみた

Momento TopicsのサンプルアプリでWebSocketを試してみました。Momento APIキーから一時的なトークンを生成する話も書いてます。

#momento

#AWS CDK

佐藤智樹

2024.09.28

はじめに

今回はMomentoの中のサービスの1つである、Momento TopicsをWebSocketとして使ってみます。先日開催されたServerless Days 2024に参加して、Momentoの話を聞いて調べたところ、以下の記事を見つけました。何と、以下の数行でWebSocketが実現できると書かれています。まじかよ！

// Subscribe
await topicClient.subscribe('websocket', 'mychannel', {
  onItem: (data) => { handleItem(data.valueString()); },
  onError: (err) => { console.error(err); }
});

// Publish
await topicClient.publish('websocket', 'mychannel', JSON.stringify({ detail }));

Momento公式SDKの中にサンプルがあったので、動作確認しながらMomento Topicsを試してみます。

ソース元

以下にMomentoのJavaScript用のSDKが公開されており、こちらのコードの一部を試しに使っていきます。SDKの実装自体はTypeScriptで書かれています。

使ってみた

早速サンプルを試してみます。まずはViteをベースにしたサンプルのReadmeを読むとトークン生成器の準備が必要と書かれています。なので、先にトークン生成器でMomento Tokenを生成できるよう準備します。

token-vending-machineの作成

上記のリソースをAWS環境にデプロイするため、事前にMomentoのコンソールにログインしAPIキーを生成します。生成する流れは以下の資料のp.69~p.76辺りをみると確認できます。

手順にはないですが、サンプルが特定のCacheを使うことが前提となっているので、このまま実行すると権限不足になります。なので、以下のコードを変更し生成するMomento Tokenの権限を広げます。(本番では使用するCacheのみに設定したほうがよいです)

DisposableTokenScopeを以下のように変更します。

export const tokenPermissions: DisposableTokenScope = {
  permissions: [
    {
      role: CacheRole.ReadWrite,
      cache: AllCaches,  //←元ソース cache: 'default-cache',
    },
    {
      role: TopicRole.PublishSubscribe,
      cache: AllCaches,  //←元ソース cache: 'default-cache',
      topic: AllTopics,
    },
  ],
};

Readmeに従って、MomentoApiKeyパラメータに取得したMomento APIキーをセッティングしてCDKからリソースをデプロイします。一点注意として、Docker上でのビルドが実行されるのでDocker DesktopやRancher Desktopなどを事前に起動してください。

git clone https://github.com/momentohq/client-sdk-javascript.git
cd examples/nodejs/token-vending-machine/infrastructure
npm install

npm run deploy -- --parameters MomentoApiKey=<YOUR_MOMENTO_API_KEY>

デプロイすると以下のようなAWSリソースが展開されます。ターミナルやブラウザなどからAPI GatewayのエンドポイントにアクセスするとMomento Tokenが取得できます。

curlでMomento Tokenが取得できるか確認できます。

% curl https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod/
{"authToken":"eyJXXXXXXXXXXXX","expiresAt":1727518127}%

デフォルトだとOpen設定で誰でもトークン取得可能ですが、Configを切り替えることでLambdaAuthorizerやAmazonCognitoを使う方式にも切り替えられます。詳細は以下の部分を確認してください。

サンプルアプリの実行(Vite)

ここから使用するMomento Topicの作成と、サンプルアプリのデプロイを実施します。まずはMomento Cacheの作成です。Momento Consoleから以下のように画面に沿ってCacheを作成します。

作成できたら次はサンプルアプリを実行します。

実行は非常に単純で、Config用のファイルがあるので先ほどデプロイしたAPI Gatewayのエンドポイントを設定し、使用するMomento Cacheの名前を設定しローカルで実行することで使用できます。VITE_TOKEN_VENDING_MACHINE_AUTH_TYPEはトークン生成器に合わせてlambda,cognitoも設定出来ます。

examples/web/vite-chat-app/.env.development

VITE_TOKEN_VENDING_MACHINE_URL="<デプロイしたAPI GatewayのURL>"
VITE_MOMENTO_CACHE_NAME="<momentoに設定したcacheの名前>"
VITE_TOKEN_VENDING_MACHINE_AUTH_TYPE="open"

上記が設定できたら以下でローカル実行できます。

cd -
cd examples/web/vite-chat-app
npm install
npm run dev

上記デプロイができるとhttp://localhost:5173でアプリに接続できます。アプリを2つ開くと以下のように、Momento Topicを経由してWebSocketが実現出来ることが分かります。左側がtest1ユーザで、右側がtest2ユーザです。
ただ、なぜか重複してデータが表示されるので描画の際は冪等な処理が必要そうです。