Azure Web PubSub と Node.js を組み合わせた軽いお試し

この記事は、以下の続きにあたる内容です。

●Azure Web PubSub を試してみるための下調べ（JavaScript を利用する方向で） - Qiita
　https://qiita.com/youtoy/items/c1c9c2893e0e0fe29703

記事執筆時点でプレビュー版の「Azure Web PubSub」を使ってみる話で、Node.js のプログラムと組み合わせてみたという内容になっています。

サンプルプログラムを使ったお試し

前の記事でも引用していた以下の記事の手順を見つつ、サンプルアプリを使った動作確認を行っていきます。

●Azure Web PubSub でリアルタイムメッセージングアプリを作ろう #Azure リレー | cloud.config Tech Blog
　https://tech-blog.cloud-config.jp/2021-05-11-azure-web-pubsub-azure/

少し　UI の見た目が違う部分などはありましたが、上記の手順通りに進めていき、以下のサンプルアプリを使うところまで進めていきます。

●A Simple Client-Side WebSocket Chat
　https://azure.github.io/azure-webpubsub/demos/clientpubsub.html

1つだけ最初に軽くハマった点があり、「クライアント URL ジェネレーター」の「ハブ」の部分にデフォルトの日本語の文字列が入っていた状態で、「クライアント アクセス URL」を生成すると、その後の「Simple Client-Side WebSocket Chat」を使うところの接続周りで失敗しました。

そのハブの名前の部分を英語の文字列に変えて試したところ、以下のようにうまく動作させられました。

こちらのサンプルを使って、PubSub のお試しができた！

●A Simple Client-Side WebSocket Chat
　https://t.co/guE4kW368s pic.twitter.com/zxkeu64TLB

— you (@youtoy) October 16, 2021

Node.js のプログラムと組み合わせる

上記の手順で Azure側の動作確認ができたので、今度は Node.js のプログラムと Azure との間のメッセージングを試していきます。

前回の記事にも掲載していた、以下の公式サンプルを使っていきます。

●azure-webpubsub/samples/javascript/pubsub at main · Azure/azure-webpubsub
　https://github.com/Azure/azure-webpubsub/tree/main/samples/javascript/pubsub

サンプルプログラムで「ws と @azure/web-pubsub」または「@azure/web-pubsub」が使われています。
とりあえず、これらをインストールしておきます。

$ npm i @azure/web-pubsub ws

そして、サンプルに少し変更を加えたものを動かしてみます。
とりあえずのお試しなので接続文字列等をソースコード中に直書きをしてしまってますが、もちろん、このあたりは別で読み込むようにしたほうが良いです。

const WebSocket = require('ws');
const { WebPubSubServiceClient } = require('@azure/web-pubsub');

const connectionString = '【Endpointで始まる「接続文字列」】';
const hubName = '【ハブの名前】';

async function main() {
  let serviceClient = new WebPubSubServiceClient(connectionString, hubName);
  let token = await serviceClient.getAuthenticationToken();
  let ws = new WebSocket(token.url);
  ws.on('open', () => console.log('connected'));
  ws.on('message', data => console.log(data));;
}

main();

const { WebPubSubServiceClient } = require('@azure/web-pubsub');

const connectionString = '【Endpointで始まる「接続文字列」】';
const hubName = '【ハブの名前】';

const message = 'Hello!!';

let serviceClient = new WebPubSubServiceClient(connectionString, hubName);
serviceClient.sendToAll(message, { contentType: "text/plain" });

ちなみに、接続文字列は Azureポータル上で、以下に表示されているものになります。

上記のプログラムを動作させた結果がこちらです。

Node.js のプログラムでの PubSub も成功！
先ほどのサンプルアプリ上にもメッセージが表示された！
（Node.js のプログラムのほうはテキストになってないけどｗ） pic.twitter.com/tSqi8X2cy9

— you (@youtoy) October 16, 2021

Node.js のプログラムでの出力が「Buffer ...」となってしまっているので、元のソースコードの出力部分を以下のように書きかえました。

  ws.on('message', data => console.log(data.toString()));

Node.js の Subscribe のプログラム出力を、toString で文字列にして、こちらも想定通りの出力に。 pic.twitter.com/q5IoLbBhOC

— you (@youtoy) October 16, 2021

おわりに

今回、Azure Web PubSub と Node.js を組み合わせて PubSub を軽く試してみて、無事に動かすことができました。

この後は、Node.js のプログラムに手を加えてサービス間・デバイス間連携を何か試すか、以下のサンプルの「functions」で気になった「/client/nodeclient/」あたりを試せればと思っています。

●azure-webpubsub/samples at main · Azure/azure-webpubsub
　https://github.com/Azure/azure-webpubsub/tree/main/samples