Implement Real-Time Messaging with Azure Web PubSub SDKs

This skill covers real-time messaging with WebSocket connections and pub/sub patterns across all three Azure Web PubSub TypeScript packages: @azure/web-pubsub (server-side management), @azure/web-pubsub-client (client-side connections), and @azure/web-pubsub-express (Express middleware for event handlers). Server-side, a WebPubSubServiceClient is scoped to a hub name and authenticated via connection string, DefaultAzureCredential (recommended), or AzureKeyCredential. Client access tokens are generated via getClientAccessToken, optionally scoped to a user ID, granted specific roles (join/leave or send-to-group, globally or per-group), pre-joined to groups, and given a custom expiration. Server-side sending covers broadcasting to all connections (with optional OData filter, e.g. excluding an admin user), sending to a specific user's connections, or a specific connection ID. Group management (client.group(name)) covers adding/removing a user or connection, sending to the whole group, and closing all connections in a group. Connection management covers existence checks, closing specific/user/all connections with a reason, and granting/revoking fine-grained permissions like sendToGroup scoped to a target. Client-side, a WebPubSubClient connects via a direct access URL or a dynamic getClientAccessUrl callback hitting a negotiate endpoint, with event handlers (connected, disconnected, stopped, group-message, server-message, rejoin-group-failed) registered before calling start() so no early events are missed; it joins groups, sends text or JSON messages to a group with noEcho/fireAndForget options, and sends custom events to the server via sendEvent. The Express integration wires a WebPubSubEventHandler into an Express app at a hub-scoped path, with blocking handlers (handleConnect to approve/reject a connection and assign user ID/groups/roles, handleUserEvent to process custom client events and respond) and non-blocking lifecycle hooks (onConnected, onDisconnected), alongside a /negotiate endpoint that issues a client access token for the frontend to connect with. Best practices: use Entra ID auth in production, register client event handlers before calling start(), use groups to organize messages by topic/channel, rely on the client's default auto-reconnect behavior, validate and reject unauthorized connections early in handleConnect, and use noEcho to suppress echoing a sender's own message back to them.

Use this skill when building a real-time WebSocket application on Azure Web PubSub end to end - server-side broadcast/group/connection management, client-side connection and message handling in the browser or Node.js, and an Express backend that authenticates connections and handles custom client events. It is not the right reference for a service-only integration with no client-side or Express component (see the dedicated server-side Java SDK skill for that narrower scope) - this skill spans all three layers of a Web PubSub application. Server-side connection details are read from WEBPUBSUB_CONNECTION_STRING or WEBPUBSUB_ENDPOINT.

Input is messages (text or JSON) plus a target scope (all connections, a filter, a group, a connection, or a user) server-side, or group/event names and payloads client-side; Express handlers receive connection and event requests. Output is delivered messages to matching live connections, group-membership changes, generated client access tokens/URLs, and Express responses approving/rejecting connections or custom events.

Built on @azure/web-pubsub (server), @azure/web-pubsub-client (browser/Node.js client), and @azure/web-pubsub-express (Express middleware), authenticated via Azure Identity's DefaultAzureCredential, a connection string, or an AzureKeyCredential.

npm install @azure/web-pubsub @azure/identity

TypeScript/JavaScript developers building the full stack of a real-time WebSocket application on Azure Web PubSub - server-side broadcast and group management, client-side connection handling, and an Express backend authenticating connections and custom events.