azure-web-pubsub-ts
microsoft/skills
Создавайте приложения для обмена сообщениями в реальном времени с использованием SDK Azure Web PubSub для JavaScript, включая серверное управление, клиентскую подписку и обработку событий в Express.
...Расширить всеSDK для TypeScript Azure Web PubSub
Передача сообщений в реальном времени с использованием соединений WebSocket и шаблонов pub/sub.
Установка
# Управление на стороне сервера
npm install @azure/web-pubsub @azure/identity
# Передача сообщений в реальном времени на стороне клиента
npm install @azure/web-pubsub-client
# Middleware для Express для обработчиков событий
npm install @azure/web-pubsub-express
Переменные среды
WEBPUBSUB_CONNECTION_STRING=Endpoint=https://<resource>.webpubsub.azure.com;AccessKey=<key>;Version=1.0;
WEBPUBSUB_ENDPOINT=https://<resource>.webpubsub.azure.com
AZURE_TOKEN_CREDENTIALS=prod # Требуется только если в производственной среде используется DefaultAzureCredential
</resource></key></resource>Серверная часть: WebPubSubServiceClient
Аутентификация
import { WebPubSubServiceClient, AzureKeyCredential } from "@azure/web-pubsub";
import { DefaultAzureCredential, ManagedIdentityCredential } from "@azure/identity";
// Локальная разработка: DefaultAzureCredential. Производство: установите AZURE_TOKEN_CREDENTIALS=prod или AZURE_TOKEN_CREDENTIALS=<specific_credential>
const credential = new DefaultAzureCredential({requiredEnvVars: ["AZURE_TOKEN_CREDENTIALS"]});
// Или используйте конкретный учетные данные напрямую в производстве:
// См. https://learn.microsoft.com/javascript/api/overview/azure/identity-readme?view=azure-node-latest#credential-classes
// const credential = new ManagedIdentityCredential();
// Строка подключения
const client = new WebPubSubServiceClient(
process.env.WEBPUBSUB_CONNECTION_STRING!,
"chat" // имя хаба
);
// Учетные данные токена Microsoft Entra (рекомендуется)
const client2 = new WebPubSubServiceClient(
process.env.WEBPUBSUB_ENDPOINT!,
credential,
"chat"
);
// AzureKeyCredential
const client3 = new WebPubSubServiceClient(
process.env.WEBPUBSUB_ENDPOINT!,
new AzureKeyCredential("<access-key>"),
"chat"
);
</access-key></specific_credential>Генерация токена доступа клиента
// Базовый токен
const token = await client.getClientAccessToken();
console.log(token.url); // wss://...?access_token=...
// Токен с идентификатором пользователя
const userToken = await client.getClientAccessToken({
userId: "user123",
});
// Токен с разрешениями
const permToken = await client.getClientAccessToken({
userId: "user123",
roles: [
"webpubsub.joinLeaveGroup",
"webpubsub.sendToGroup",
"webpubsub.sendToGroup.chat-room", // конкретная группа
],
groups: ["chat-room"], // автоматическое вступление при подключении
expirationTimeInMinutes: 60,
});
Отправка сообщений
// Вещание всем соединениям в хабе
await client.sendToAll({ message: "Привет всем!" });
await client.sendToAll("Текст", { contentType: "text/plain" });
// Отправка конкретному пользователю (все его соединения)
await client.sendToUser("user123", { message: "Привет!" });
// Отправка конкретному соединению
await client.sendToConnection("connectionId", { data: "Прямое сообщение" });
// Отправка с фильтром (синтаксис OData)
await client.sendToAll({ message: "Отфильтровано" }, {
filter: "userId ne 'admin'",
});
Управление группами
const group = client.group("chat-room");
// Добавление пользователя/соединения в группу
await group.addUser("user123");
await group.addConnection("connectionId");
// Удаление из группы
await group.removeUser("user123");
// Отправка в группу
await group.sendToAll({ message: "Сообщение группы" });
// Закрытие всех соединений в группе
await group.closeAllConnections({ reason: "Техническое обслуживание" });
Управление соединениями
// Проверка существования
const userExists = await client.userExists("user123");
const connExists = await client.connectionExists("connectionId");
// Закрытие соединений
await client.closeConnection("connectionId", { reason: "Исключен" });
await client.closeUserConnections("user123");
await client.closeAllConnections();
// Разрешения
await client.grantPermission("connectionId", "sendToGroup", { targetName: "chat" });
await client.revokePermission("connectionId", "sendToGroup", { targetName: "chat" });
Клиентская часть: WebPubSubClient
Подключение
import { WebPubSubClient } from "@azure/web-pubsub-client";
// Прямой URL
const client = new WebPubSubClient("<client-access-url>");
// Динамический URL из конечной точки согласования
const client2 = new WebPubSubClient({
getClientAccessUrl: async () => {
const response = await fetch("/negotiate");
const { url } = await response.json();
return url;
},
});
// Регистрация обработчиков ДО запуска
client.on("connected", (e) => {
console.log(`Подключено: ${e.connectionId}`);
});
client.on("group-message", (e) => {
console.log(`${e.message.group}: ${e.message.data}`);
});
await client.start();
</client-access-url>Отправка сообщений
// Сначала вступить в группу
await client.joinGroup("chat-room");
// Отправка в группу
await client.sendToGroup("chat-room", "Привет!", "text");
await client.sendToGroup("chat-room", { type: "message", content: "Привет" }, "json");
// Параметры отправки
await client.sendToGroup("chat-room", "Привет", "text", {
noEcho: true, // Не отправлять эхо обратно отправителю
fireAndForget: true, // Не ждать подтверждения
});
// Отправка события на сервер
await client.sendEvent("userAction", { action: "typing" }, "json");
Обработчики событий
// Жизненный цикл соединения
client.on("connected", (e) => {
console.log(`Подключено: ${e.connectionId}, Пользователь: ${e.userId}`);
});
client.on("disconnected", (e) => {
console.log(`Отключено: ${e.message}`);
});
client.on("stopped", () => {
console.log("Клиент остановлен");
});
// Сообщения
client.on("group-message", (e) => {
console.log(`[${e.message.group}] ${e.message.fromUserId}: ${e.message.data}`);
});
client.on("server-message", (e) => {
console.log(`Сервер: ${e.message.data}`);
});
// Сбой повторного вступления
client.on("rejoin-group-failed", (e) => {
console.log(`Не удалось повторно вступить в ${e.group}: ${e.error}`);
});
Обработчик событий Express
import express from "express";
import { WebPubSubEventHandler } from "@azure/web-pubsub-express";
const app = express();
const handler = new WebPubSubEventHandler("chat", {
path: "/api/webpubsub/hubs/chat/",
// Блокировка: одобрение/отклонение соединения
handleConnect: (req, res) => {
if (!req.claims?.sub) {
res.fail(401, "Требуется аутентификация");
return;
}
res.success({
userId: req.claims.sub[0],
groups: ["general"],
roles: ["webpubsub.sendToGroup"],
});
},
// Блокировка: обработка пользовательских событий
handleUserEvent: (req, res) => {
console.log(`Событие от ${req.context.userId}:`, req.data);
res.success(`Получено: ${req.data}`, "text");
},
// Неблокирующий
onConnected: (req) => {
console.log(`Клиент подключен: ${req.context.connectionId}`);
},
onDisconnected: (req) => {
console.log(`Клиент отключен: ${req.context.connectionId}`);
},
});
app.use(handler.getMiddleware());
// Конечная точка согласования
app.get("/negotiate", async (req, res) => {
const token = await serviceClient.getClientAccessToken({
userId: req.user?.id,
});
res.json({ url: token.url });
});
app.listen(8080);
Основные типы
// Сервер
import {
WebPubSubServiceClient,
WebPubSubGroup,
GenerateClientTokenOptions,
HubSendToAllOptions,
} from "@azure/web-pubsub";
// Клиент
import {
WebPubSubClient,
WebPubSubClientOptions,
OnConnectedArgs,
OnGroupDataMessageArgs,
} from "@azure/web-pubsub-client";
// Express
import {
WebPubSubEventHandler,
ConnectRequest,
UserEventRequest,
ConnectResponseHandler,
} from "@azure/web-pubsub-express";
Рекомендации
- Используйте учетные данные токена Microsoft Entra - Используйте
DefaultAzureCredentialдля локальной разработки; используйтеManagedIdentityCredentialилиWorkloadIdentityCredentialдля производства - Регистрируйте обработчики перед запуском - Не пропускайте начальные события
- Используйте группы для каналов - Организуйте сообщения по темам/комнатам
- Обработка повторного подключения - Клиент автоматически повторяет подключение по умолчанию
- Проверка в handleConnect - Отклоняйте несанкционированные соединения рано
- Используйте noEcho - Предотвращайте отправку эхо обратно отправителю, когда это необходимо
---
name: azure-web-pubsub-ts
description: Build real-time messaging applications using Azure Web PubSub SDKs for JavaScript, including server-side management, client-side pub/sub, and Express event handlers.
license: MIT
---
# Azure Web PubSub SDKs for TypeScript
Real-time messaging with WebSocket connections and pub/sub patterns.
## Installation
```bash
# Server-side management
npm install @azure/web-pubsub @azure/identity
# Client-side real-time messaging
npm install @azure/web-pubsub-client
# Express middleware for event handlers
npm install @azure/web-pubsub-express
```
## Environment Variables
```bash
WEBPUBSUB_CONNECTION_STRING=Endpoint=https://<resource>.webpubsub.azure.com;AccessKey=<key>;Version=1.0;
WEBPUBSUB_ENDPOINT=https://<resource>.webpubsub.azure.com
AZURE_TOKEN_CREDENTIALS=prod # Required only if DefaultAzureCredential is used in production
```
## Server-Side: WebPubSubServiceClient
### Authentication
```typescript
import { WebPubSubServiceClient, AzureKeyCredential } from "@azure/web-pubsub";
import { DefaultAzureCredential, ManagedIdentityCredential } from "@azure/identity";
// Local dev: DefaultAzureCredential. Production: set AZURE_TOKEN_CREDENTIALS=prod or AZURE_TOKEN_CREDENTIALS=<specific_credential>
const credential = new DefaultAzureCredential({requiredEnvVars: ["AZURE_TOKEN_CREDENTIALS"]});
// Or use a specific credential directly in production:
// See https://learn.microsoft.com/javascript/api/overview/azure/identity-readme?view=azure-node-latest#credential-classes
// const credential = new ManagedIdentityCredential();
// Connection string
const client = new WebPubSubServiceClient(
process.env.WEBPUBSUB_CONNECTION_STRING!,
"chat" // hub name
);
// Microsoft Entra Token Credential (recommended)
const client2 = new WebPubSubServiceClient(
process.env.WEBPUBSUB_ENDPOINT!,
credential,
"chat"
);
// AzureKeyCredential
const client3 = new WebPubSubServiceClient(
process.env.WEBPUBSUB_ENDPOINT!,
new AzureKeyCredential("<access-key>"),
"chat"
);
```
### Generate Client Access Token
```typescript
// Basic token
const token = await client.getClientAccessToken();
console.log(token.url); // wss://...?access_token=...
// Token with user ID
const userToken = await client.getClientAccessToken({
userId: "user123",
});
// Token with permissions
const permToken = await client.getClientAccessToken({
userId: "user123",
roles: [
"webpubsub.joinLeaveGroup",
"webpubsub.sendToGroup",
"webpubsub.sendToGroup.chat-room", // specific group
],
groups: ["chat-room"], // auto-join on connect
expirationTimeInMinutes: 60,
});
```
### Send Messages
```typescript
// Broadcast to all connections in hub
await client.sendToAll({ message: "Hello everyone!" });
await client.sendToAll("Plain text", { contentType: "text/plain" });
// Send to specific user (all their connections)
await client.sendToUser("user123", { message: "Hello!" });
// Send to specific connection
await client.sendToConnection("connectionId", { data: "Direct message" });
// Send with filter (OData syntax)
await client.sendToAll({ message: "Filtered" }, {
filter: "userId ne 'admin'",
});
```
### Group Management
```typescript
const group = client.group("chat-room");
// Add user/connection to group
await group.addUser("user123");
await group.addConnection("connectionId");
// Remove from group
await group.removeUser("user123");
// Send to group
await group.sendToAll({ message: "Group message" });
// Close all connections in group
await group.closeAllConnections({ reason: "Maintenance" });
```
### Connection Management
```typescript
// Check existence
const userExists = await client.userExists("user123");
const connExists = await client.connectionExists("connectionId");
// Close connections
await client.closeConnection("connectionId", { reason: "Kicked" });
await client.closeUserConnections("user123");
await client.closeAllConnections();
// Permissions
await client.grantPermission("connectionId", "sendToGroup", { targetName: "chat" });
await client.revokePermission("connectionId", "sendToGroup", { targetName: "chat" });
```
## Client-Side: WebPubSubClient
### Connect
```typescript
import { WebPubSubClient } from "@azure/web-pubsub-client";
// Direct URL
const client = new WebPubSubClient("<client-access-url>");
// Dynamic URL from negotiate endpoint
const client2 = new WebPubSubClient({
getClientAccessUrl: async () => {
const response = await fetch("/negotiate");
const { url } = await response.json();
return url;
},
});
// Register handlers BEFORE starting
client.on("connected", (e) => {
console.log(`Connected: ${e.connectionId}`);
});
client.on("group-message", (e) => {
console.log(`${e.message.group}: ${e.message.data}`);
});
await client.start();
```
### Send Messages
```typescript
// Join group first
await client.joinGroup("chat-room");
// Send to group
await client.sendToGroup("chat-room", "Hello!", "text");
await client.sendToGroup("chat-room", { type: "message", content: "Hi" }, "json");
// Send options
await client.sendToGroup("chat-room", "Hello", "text", {
noEcho: true, // Don't echo back to sender
fireAndForget: true, // Don't wait for ack
});
// Send event to server
await client.sendEvent("userAction", { action: "typing" }, "json");
```
### Event Handlers
```typescript
// Connection lifecycle
client.on("connected", (e) => {
console.log(`Connected: ${e.connectionId}, User: ${e.userId}`);
});
client.on("disconnected", (e) => {
console.log(`Disconnected: ${e.message}`);
});
client.on("stopped", () => {
console.log("Client stopped");
});
// Messages
client.on("group-message", (e) => {
console.log(`[${e.message.group}] ${e.message.fromUserId}: ${e.message.data}`);
});
client.on("server-message", (e) => {
console.log(`Server: ${e.message.data}`);
});
// Rejoin failure
client.on("rejoin-group-failed", (e) => {
console.log(`Failed to rejoin ${e.group}: ${e.error}`);
});
```
## Express Event Handler
```typescript
import express from "express";
import { WebPubSubEventHandler } from "@azure/web-pubsub-express";
const app = express();
const handler = new WebPubSubEventHandler("chat", {
path: "/api/webpubsub/hubs/chat/",
// Blocking: approve/reject connection
handleConnect: (req, res) => {
if (!req.claims?.sub) {
res.fail(401, "Authentication required");
return;
}
res.success({
userId: req.claims.sub[0],
groups: ["general"],
roles: ["webpubsub.sendToGroup"],
});
},
// Blocking: handle custom events
handleUserEvent: (req, res) => {
console.log(`Event from ${req.context.userId}:`, req.data);
res.success(`Received: ${req.data}`, "text");
},
// Non-blocking
onConnected: (req) => {
console.log(`Client connected: ${req.context.connectionId}`);
},
onDisconnected: (req) => {
console.log(`Client disconnected: ${req.context.connectionId}`);
},
});
app.use(handler.getMiddleware());
// Negotiate endpoint
app.get("/negotiate", async (req, res) => {
const token = await serviceClient.getClientAccessToken({
userId: req.user?.id,
});
res.json({ url: token.url });
});
app.listen(8080);
```
## Key Types
```typescript
// Server
import {
WebPubSubServiceClient,
WebPubSubGroup,
GenerateClientTokenOptions,
HubSendToAllOptions,
} from "@azure/web-pubsub";
// Client
import {
WebPubSubClient,
WebPubSubClientOptions,
OnConnectedArgs,
OnGroupDataMessageArgs,
} from "@azure/web-pubsub-client";
// Express
import {
WebPubSubEventHandler,
ConnectRequest,
UserEventRequest,
ConnectResponseHandler,
} from "@azure/web-pubsub-express";
```
## Best Practices
1. **Use Microsoft Entra Token Credential** - Use `DefaultAzureCredential` for local development; use `ManagedIdentityCredential` or `WorkloadIdentityCredential` for production
2. **Register handlers before start** - Don't miss initial events
3. **Use groups for channels** - Organize messages by topic/room
4. **Handle reconnection** - Client auto-reconnects by default
5. **Validate in handleConnect** - Reject unauthorized connections early
6. **Use noEcho** - Prevent message echo back to sender when needed
Все файлы
0 файловУстановить azure-web-pubsub-ts
Скачайте и извлеките файлы навыков в директорию .claude/skills/.
Скачать ZIPКлонируйте репозиторий и скопируйте файлы навыка в свой проект.
git clone https://github.com/microsoft/skills/tree/main/.github/plugins/azure-sdk-typescript/skills/azure-web-pubsub-ts # Copy SKILL.md to your .claude/skills/ directory
Копировать





Дом
