4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Azure Web PubSub を試してみるための下調べ(JavaScript を利用する方向で)

Last updated at Posted at 2021-10-16

この記事は、以下の「Azure Web PubSub」に関する記事です。
どうやら、WebSocket を通信に使って、パブリッシュ - サブスクライブ型のメッセージングができるものらしく、「MQTTっぽい感じなのかな?」と気になりました。

●Azure Web PubSub – WebSocket Web パブリッシング | Microsoft Azure
 https://azure.microsoft.com/ja-jp/services/web-pubsub/

過去に書いた Qiita の記事でも、リアルタイム通信系で WebSocket・MQTT は何度も登場していて、リアルタイム通信周りの技術は非常に気になるところです。

この Azure Web PubSub は、記事執筆時点では以下の公式ページのサービス名の部分に書かれているように、「プレビュー」という位置付けのようです。
Azure_Web_PubSub_–_WebSocket_Web_パブリッシング___Microsoft_Azure.jpg

調べてみた内容

とりあえず、ググって出てきた記事をいくつか見てみました。

公式の情報も見てみたり。

サクッと試す流れ

ここまで情報を見ていって、とりあえずサクッとお試しをするには、以下の内容に手をつけるのが良さそうでした。

デモアプリ上で試す

上で書いていた 1つ目の記事の中で、ポータル上で情報を取得し、以下のデモアプリを使って簡単に試せそうな話が登場していました。

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

その説明が出ていたので、具体的には以下の画像の部分です。
ポータル上でのPubSub.jpg
とりあえず、上記のインターフェースを使った PubSub を試すのが、ブラウザ上だけで完結して簡単そうでした。

JavaScriptライブラリを併用する

ポータル上での動作確認が無事に行えたら、自分が書いたプログラムから試してみたいところです。

下調べをした中で、公式の GitHub の以下のサンプルページがひっかかりました。

●azure-webpubsub/samples at main · Azure/azure-webpubsub
 https://github.com/Azure/azure-webpubsub/tree/main/samples
公式サンプル.jpg

複数の言語用のサンプルがあるようですが、普段、自分がやっている内容的には JavaScript が良いので、それを見てみます。

●azure-webpubsub/samples/javascript at main · Azure/azure-webpubsub
 https://github.com/Azure/azure-webpubsub/tree/main/samples/javascript
JavaScriptサンプル.jpg

こんな感じでサンプルが複数あるようですが、pubsub がシンプルそうで、最初に試すのに良さそうでした。
プログラム的には、こんな感じ。

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

async function main() {
  if (process.argv.length !== 4) {
    console.log('Usage: node subscribe <connection-string> <hub-name>');
    return 1;
  }

  let serviceClient = new WebPubSubServiceClient(process.argv[2], process.argv[3]);
  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();
publish.js
const { WebPubSubServiceClient } = require('@azure/web-pubsub');

if (process.argv.length !== 5) {
  console.log('Usage: node publish <connection-string> <hub-name> <message>');
  return 1;
}

let serviceClient = new WebPubSubServiceClient(process.argv[2], process.argv[3]);
// by default it uses `application/json`, specify contentType as `text/plain` if you want plain-text
serviceClient.sendToAll(process.argv[4], { contentType: "text/plain" });

気になったサンプル1: videoshare

ぱっと見た中で、「videoshare」というやつが、ものすごく気になる...
ビデオ共有.jpg
バイナリデータの PubSub。

気になったサンプル2: functions

以下も JavaScript で扱えそうな感じのもので、気になりました。
名前的に、Azure Functions で扱うようなものっぽいです。

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

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

おわりに

Azure に関する調べものをしていて見かけた「Azure Web PubSub」について、お試しをする前段階の話を記事にしてみました。

この後は、JavaScriptライブラリを使って、過去に WebSocket・MQTT を使ってやっていたようなサービス間連携・デバイス連携などができそうか、調査・お試しを続けていければと思います。

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?