スキル azure-web-pubsub-ts
📦

azure-web-pubsub-ts

安全 🌐 ネットワークアクセス🔑 環境変数

Azure Web PubSub でリアルタイムアプリを構築する

Azure Web PubSub SDK を使用して、アプリケーションで WebSocket ベースのリアルタイムメッセージングを実装します。このスキルは、TypeScript による pub/sub メッセージング、グループ管理、接続ハンドリングのための本番環境対応のパターンを提供します。

対応: Claude Codex Code(CC)
🥉 73 ブロンズ
1

スキルZIPをダウンロード

2

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

3

オンにして利用開始

テストする

「azure-web-pubsub-ts」を使用しています。 ユーザー ID とグループメンバーシップを含むクライアントトークンを生成

期待される結果:

URL wss://resource.webpubsub.azure.com/client/access/hubs/chat?access_token=xxx、userId=user123、groups=[chat-room]、roles=[webpubsub.joinLeaveGroup, webpubsub.sendToGroup] でトークンが生成されました

「azure-web-pubsub-ts」を使用しています。 chat-room グループ内の全ユーザーにメッセージを送信

期待される結果:

グループ chat-room の 12 接続にメッセージが正常にブロードキャストされました。メッセージコンテンツ：{type: 'message', data: 'Hello everyone!'}

セキュリティ監査

安全
v1 • 2/25/2026

This skill contains legitimate Azure Web PubSub SDK documentation. Static analyzer produced 35 false positive external_commands findings by misinterpreting markdown code block backticks as shell execution. Network and environment variable patterns are standard Azure SDK usage. No malicious intent detected.

1
スキャンされたファイル
316
解析された行数
5
検出結果
1
総監査数
中リスクの問題 (1)
SKILL.md:15-307
False Positive: External Command Detection
Static analyzer detected 35 instances of 'Ruby/shell backtick execution'. These are markdown code block delimiters in documentation, not actual shell command execution. No child_process or exec usage present.
低リスクの問題 (2)
SKILL.md:155-157
Standard Network Usage
fetch() call at line 155 is legitimate WebSocket negotiation pattern for Azure Web PubSub client connection. URL is relative endpoint '/negotiate', not external hardcoded URL.
SKILL.md:43-56
Standard Environment Variable Configuration
Environment variable access for WEBPUBSUB_CONNECTION_STRING and WEBPUBSUB_ENDPOINT follows Azure SDK best practices. These are configuration patterns, not credential leakage.

リスク要因

🌐 ネットワークアクセス (2)
SKILL.md:155 SKILL.md:29-30
🔑 環境変数 (3)
SKILL.md:43 SKILL.md:49 SKILL.md:56
監査者: claude

品質スコア

38
アーキテクチャ
100
保守性
87
コンテンツ
50
コミュニティ
96
セキュリティ
91
仕様準拠

作れるもの

リアルタイムチャットアプリケーション

Azure Web PubSub グループとユーザー宛メッセージングを使用して、ユーザー認証、グループメッセージング、プレゼンスインジケーターを備えたマルチルームチャットシステムを構築します。

ライブダッシュボード更新

ブロードキャストメッセージングを使用して、接続されたダッシュボードにリアルタイムデータ更新をプッシュします。監視システム、分析表示、またはライブメトリクス可視化に最適です。

マルチプレイヤーゲームロビー

グループと接続管理 API を使用して、プレイヤーマッチメイキング、ゲーム内メッセージング、セッション管理を備えたゲームルームを作成します。

これらのプロンプトを試す

基本セットアップ 
環境変数から接続文字列を使用して Azure Web PubSub サーバー側クライアントをセットアップします。'chat' という名前のハブを作成し、基本的なクライアントアクセストークンを生成します。
認証済みトークン生成 
ユーザー 'user123' のクライアントアクセストークンを生成します。グループへの参加、グループへの送信のロールを持たせ、'chat-room' グループに自動参加させます。有効期限を 60 分に設定します。
クライアント側接続 
negotiate エンドポイント経由で接続する WebPubSubClient を作成します。connected、group-message、disconnected イベントのハンドラを登録します。接続後に 'chat-room' グループに参加します。
Express イベントハンドラ 
handleConnect 検証、handleUserEvent 処理、onConnected ロギングを備えた 'chat' ハブ用の Express ミドルウェアハンドラを実装します。認証済みユーザー用のトークンを生成する negotiate エンドポイントを含めます。

ベストプラクティス

  • より良いセキュリティのため、本番環境ではアクセスキーの代わりに DefaultAzureCredential を使用する
  • 初期イベントの欠落を避けるため、client.start() を呼び出す前にすべてのイベントハンドラを登録する
  • handleConnect で認証を検証し、ハンドシェイクの早期段階で不正な接続を拒否する

回避

  • 環境変数ではなくソースコードに接続文字列やアクセスキーを直接ハードコーディングする
  • TypeScript の非 null 代入またはフォールバック値なしで process.env 変数にアクセスする
  • クライアント接続状態が 'connected' であることを確認せずにメッセージを送信する

よくある質問

@azure/web-pubsub と @azure/web-pubsub-client の違いは何ですか？
@azure/web-pubsub はハブの管理、トークン生成、メッセージ送信を行うサーバー側 SDK です。@azure/web-pubsub-client は WebSocket エンドポイントへの接続とリアルタイムメッセージの処理を行うブラウザ/Node.js 用クライアント SDK です。
Azure Web PubSub でユーザーを認証するにはどうすればよいですか？
Azure Entra ID と DefaultAzureCredential を使用します（本番環境推奨）。または、サーバー SDK を使用して userId と roles を含むトークンを生成します。クライアントは生成されたトークン URL を使用して接続します。
クライアントが予期せず切断された場合どうなりますか？
Azure Web PubSub は自動的に再接続を試みます。クリーンアップには 'disconnected' イベントを処理し、再接続後にグループ再接入が失敗した場合の処理には 'rejoin-group-failed' を処理します。
特定のユーザーと全ユーザーのどちらにもメッセージを送信できますか？
はい。ブロードキャストには sendToAll() を、ユーザー宛メッセージ（すべての接続に配信）には sendToUser() を、特定の接続 ID へのメッセージには sendToConnection() を使用します。
Azure Web PubSub でグループはどのように機能しますか？
グループはハブ内の論理チャンネルです。ユーザーはグループに動的に参加/退出できます。グループに送信されたメッセージはそのグループ内のすべての接続に届きます。チャットルーム、ゲームロビー、またはトピックベースのサブスクリプションに役立ちます。
negotiate エンドポイントパターンとは何ですか？
negotiate エンドポイントはクライアントアクセストークンを生成するサーバールートです。クライアントはこのエンドポイントを呼び出してアクセストークン付き WebSocket URL を取得し、その URL を使用して接続します。これにより認証情報はサーバー側に保持されます。

開発者の詳細

作成者

sickn33

ライセンス

MIT

リポジトリ

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/azure-web-pubsub-ts

参照

main

ファイル構成

📄 SKILL.md