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

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

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

記事執筆時点でプレビュー版の「[Azure Web PubSub](https://azure.microsoft.com/ja-jp/services/web-pubsub/)」を使ってみる話で、Node.js のプログラムと組み合わせてみたという内容になっています。
![Azure Web PubSub.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9d397ce3-de6f-84d6-4d7d-b459927d1d48.jpeg)

## サンプルプログラムを使ったお試し
[前の記事](https://qiita.com/youtoy/items/c1c9c2893e0e0fe29703)でも引用していた以下の記事の手順を見つつ、サンプルアプリを使った動作確認を行っていきます。

●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」を使うところの接続周りで失敗しました。

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

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">こちらのサンプルを使って、PubSub のお試しができた！<br><br>●A Simple Client-Side WebSocket Chat<br>　<a href="https://t.co/guE4kW368s">https://t.co/guE4kW368s</a> <a href="https://t.co/zxkeu64TLB">pic.twitter.com/zxkeu64TLB</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1449347306986225665?ref_src=twsrc%5Etfw">October 16, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 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](https://www.npmjs.com/package/ws) と [@azure/web-pubsub](https://www.npmjs.com/package/@azure/web-pubsub)」または「[@azure/web-pubsub](https://www.npmjs.com/package/@azure/web-pubsub)」が使われています。
とりあえず、これらをインストールしておきます。

```bash
$ npm i @azure/web-pubsub ws
```

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

```javascript
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();
```

```javascript
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ポータル上で、以下に表示されているものになります。

![接続文字列.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ddd83b9b-1cf1-1237-5597-54a1984d7640.jpeg)

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

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">Node.js のプログラムでの PubSub も成功！<br>先ほどのサンプルアプリ上にもメッセージが表示された！<br>（Node.js のプログラムのほうはテキストになってないけどｗ） <a href="https://t.co/tSqi8X2cy9">pic.twitter.com/tSqi8X2cy9</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1449353028805353476?ref_src=twsrc%5Etfw">October 16, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">Node.js の Subscribe のプログラム出力を、toString で文字列にして、こちらも想定通りの出力に。 <a href="https://t.co/q5IoLbBhOC">pic.twitter.com/q5IoLbBhOC</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1449354876178235393?ref_src=twsrc%5Etfw">October 16, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

この後は、Node.js のプログラムに手を加えてサービス間・デバイス間連携を何か試すか、以下のサンプルの「functions」で気になった「[/client/nodeclient/](https://github.com/Azure/azure-webpubsub/tree/main/samples/functions/client/nodeclient)」あたりを試せればと思っています。

●azure-webpubsub/samples at main · Azure/azure-webpubsub
　https://github.com/Azure/azure-webpubsub/tree/main/samples
![公式サンプル.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/98ba4db7-3877-d0af-0be2-c05e7644c25d.jpeg)