SDK Azure Web PubSub pour TypeScript

Messagerie en temps réel avec des connexions WebSocket et des modèles de publication/souscription.

Installation

# Gestion côté serveur
npm install @azure/web-pubsub @azure/identity

# Messagerie en temps réel côté client
npm install @azure/web-pubsub-client

# Middleware Express pour les gestionnaires d'événements
npm install @azure/web-pubsub-express

Variables d'environnement

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 # Requis uniquement si DefaultAzureCredential est utilisé en production
</resource></key></resource>

Côté serveur : WebPubSubServiceClient

Authentification

import { WebPubSubServiceClient, AzureKeyCredential } from "@azure/web-pubsub";
import { DefaultAzureCredential, ManagedIdentityCredential } from "@azure/identity";

// Développement local : DefaultAzureCredential. Production : définir AZURE_TOKEN_CREDENTIALS=prod ou AZURE_TOKEN_CREDENTIALS=<specific_credential>
const credential = new DefaultAzureCredential({requiredEnvVars: ["AZURE_TOKEN_CREDENTIALS"]});
// Ou utiliser un identifiant spécifique directement en production :
// Voir https://learn.microsoft.com/javascript/api/overview/azure/identity-readme?view=azure-node-latest#credential-classes
// const credential = new ManagedIdentityCredential();

// Chaîne de connexion
const client = new WebPubSubServiceClient(
  process.env.WEBPUBSUB_CONNECTION_STRING!,
  "chat"  // nom du hub
);

// Identifiant de jeton Microsoft Entra (recommandé)
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>

Générer un jeton d'accès client

// Jeton de base
const token = await client.getClientAccessToken();
console.log(token.url);  // wss://...?access_token=...

// Jeton avec identifiant utilisateur
const userToken = await client.getClientAccessToken({
  userId: "user123",
});

// Jeton avec autorisations
const permToken = await client.getClientAccessToken({
  userId: "user123",
  roles: [
    "webpubsub.joinLeaveGroup",
    "webpubsub.sendToGroup",
    "webpubsub.sendToGroup.chat-room",  // groupe spécifique
  ],
  groups: ["chat-room"],  // rejoindre automatiquement lors de la connexion
  expirationTimeInMinutes: 60,
});

Envoyer des messages

// Diffusion à toutes les connexions du hub
await client.sendToAll({ message: "Bonjour à tous !" });
await client.sendToAll("Texte brut", { contentType: "text/plain" });

// Envoyer à un utilisateur spécifique (toutes ses connexions)
await client.sendToUser("user123", { message: "Bonjour !" });

// Envoyer à une connexion spécifique
await client.sendToConnection("connectionId", { data: "Message direct" });

// Envoyer avec un filtre (syntaxe OData)
await client.sendToAll({ message: "Filtré" }, {
  filter: "userId ne 'admin'",
});

Gestion des groupes

const group = client.group("chat-room");

// Ajouter un utilisateur/une connexion au groupe
await group.addUser("user123");
await group.addConnection("connectionId");

// Retirer du groupe
await group.removeUser("user123");

// Envoyer au groupe
await group.sendToAll({ message: "Message de groupe" });

// Fermer toutes les connexions du groupe
await group.closeAllConnections({ reason: "Maintenance" });

Gestion des connexions

// Vérifier l'existence
const userExists = await client.userExists("user123");
const connExists = await client.connectionExists("connectionId");

// Fermer les connexions
await client.closeConnection("connectionId", { reason: "Exclu" });
await client.closeUserConnections("user123");
await client.closeAllConnections();

// Autorisations
await client.grantPermission("connectionId", "sendToGroup", { targetName: "chat" });
await client.revokePermission("connectionId", "sendToGroup", { targetName: "chat" });

Côté client : WebPubSubClient

Connexion

import { WebPubSubClient } from "@azure/web-pubsub-client";

// URL directe
const client = new WebPubSubClient("<client-access-url>");

// URL dynamique depuis le point de terminaison de négociation
const client2 = new WebPubSubClient({
  getClientAccessUrl: async () => {
    const response = await fetch("/negotiate");
    const { url } = await response.json();
    return url;
  },
});

// Enregistrer les gestionnaires AVANT le démarrage
client.on("connected", (e) => {
  console.log(`Connecté : ${e.connectionId}`);
});

client.on("group-message", (e) => {
  console.log(`${e.message.group} : ${e.message.data}`);
});

await client.start();
</client-access-url>

Envoyer des messages

// Rejoindre d'abord le groupe
await client.joinGroup("chat-room");

// Envoyer au groupe
await client.sendToGroup("chat-room", "Bonjour !", "text");
await client.sendToGroup("chat-room", { type: "message", content: "Salut" }, "json");

// Options d'envoi
await client.sendToGroup("chat-room", "Bonjour", "text", {
  noEcho: true,        // Ne pas renvoyer l'écho à l'expéditeur
  fireAndForget: true, // Ne pas attendre l'accusé de réception
});

// Envoyer un événement au serveur
await client.sendEvent("userAction", { action: "saisie" }, "json");

Gestionnaires d'événements

// Cycle de vie de la connexion
client.on("connected", (e) => {
  console.log(`Connecté : ${e.connectionId}, Utilisateur : ${e.userId}`);
});

client.on("disconnected", (e) => {
  console.log(`Déconnecté : ${e.message}`);
});

client.on("stopped", () => {
  console.log("Client arrêté");
});

// Messages
client.on("group-message", (e) => {
  console.log(`[${e.message.group}] ${e.message.fromUserId} : ${e.message.data}`);
});

client.on("server-message", (e) => {
  console.log(`Serveur : ${e.message.data}`);
});

// Échec de rejoindre le groupe
client.on("rejoin-group-failed", (e) => {
  console.log(`Échec de rejoindre ${e.group} : ${e.error}`);
});

Gestionnaire d'événements 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/",

  // Bloquant : approuver/rejeter la connexion
  handleConnect: (req, res) => {
    if (!req.claims?.sub) {
      res.fail(401, "Authentification requise");
      return;
    }
    res.success({
      userId: req.claims.sub[0],
      groups: ["general"],
      roles: ["webpubsub.sendToGroup"],
    });
  },

  // Bloquant : gérer les événements personnalisés
  handleUserEvent: (req, res) => {
    console.log(`Événement de ${req.context.userId} :`, req.data);
    res.success(`Reçu : ${req.data}`, "text");
  },

  // Non bloquant
  onConnected: (req) => {
    console.log(`Client connecté : ${req.context.connectionId}`);
  },

  onDisconnected: (req) => {
    console.log(`Client déconnecté : ${req.context.connectionId}`);
  },
});

app.use(handler.getMiddleware());

// Point de terminaison de négociation
app.get("/negotiate", async (req, res) => {
  const token = await serviceClient.getClientAccessToken({
    userId: req.user?.id,
  });
  res.json({ url: token.url });
});

app.listen(8080);

Types clés

// Serveur
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";

Bonnes pratiques

1. Utiliser l'identifiant de jeton Microsoft Entra - Utiliser DefaultAzureCredential pour le développement local ; utiliser ManagedIdentityCredential ou WorkloadIdentityCredential pour la production
2. Enregistrer les gestionnaires avant le démarrage - Ne pas manquer les événements initiaux
3. Utiliser des groupes pour les canaux - Organiser les messages par sujet/salle
4. Gérer la reconnexion - Le client se reconnecte automatiquement par défaut
5. Valider dans handleConnect - Rejeter les connexions non autorisées tôt
6. Utiliser noEcho - Empêcher le renvoi de l'écho du message à l'expéditeur lorsque cela est nécessaire