Azure Web PubSub service client library for JavaScript

Azure Web PubSub is a service that enables you to build real-time messaging web applications using WebSockets and the publish-subscribe pattern. Any platform supporting WebSocket APIs can connect to the service easily, e.g. web pages, mobile applications, edge devices, etc. The service manages the WebSocket connections for you and allows up to 100K concurrent connections. It provides powerful APIs for you to manage these clients and deliver real-time messages.

Any scenario that requires real-time publish-subscribe messaging between server and clients or among clients, can use Azure Web PubSub service. Traditional real-time features that often require polling from server or submitting HTTP requests, can also use Azure Web PubSub service.

We list some examples that are good to use Azure Web PubSub service:

• High frequency data updates: gaming, voting, polling, auction.
• Live dashboards and monitoring: company dashboard, financial market data, instant sales update, multi-player game leader board, and IoT monitoring.
• Cross-platform live chat: live chat room, chat bot, on-line customer support, real-time shopping assistant, messenger, in-game chat, and so on.
• Real-time location on map: logistic tracking, delivery status tracking, transportation status updates, GPS apps.
• Real-time targeted ads: personalized real-time push ads and offers, interactive ads.
• Collaborative apps: coauthoring, whiteboard apps and team meeting software.
• Push instant notifications: social network, email, game, travel alert.
• Real-time broadcasting: live audio/video broadcasting, live captioning, translating, events/news broadcasting.
• IoT and connected devices: real-time IoT metrics, remote control, real-time status, and location tracking.
• Automation: real-time trigger from upstream events.

Use the library to:

• Send messages to hubs and groups.
• Send messages to particular users and connections.
• Organize users and connections into groups.
• Close connections
• Grant/revoke/check permissions for an existing connection

Key links:

• Source code
• Package (NPM)
• API reference documentation
• Product documentation
• Samples

Getting started

Currently supported environments

• LTS versions of Node.js

Prerequisites

• An Azure subscription.
• An existing Azure Web PubSub service instance.

1. Install the @azure/web-pubsub package

npm install @azure/web-pubsub

2. Create and authenticate a WebPubSubServiceClient

const { WebPubSubServiceClient } = require("@azure/web-pubsub");

const serviceClient = new WebPubSubServiceClient("<ConnectionString>", "<hubName>");

You can also authenticate the WebPubSubServiceClient using an endpoint and an AzureKeyCredential:

const { WebPubSubServiceClient, AzureKeyCredential } = require("@azure/web-pubsub");

const key = new AzureKeyCredential("<Key>");
const serviceClient = new WebPubSubServiceClient("<Endpoint>", key, "<hubName>");

Key concepts

Connection

Connections, represented by a connection id, represent an individual websocket connection to the Web PubSub service. Connection id is always unique.

Hub

Hub is a logical set of connections. All connections to Web PubSub connect to a specific hub. Messages that are broadcast to the hub are dispatched to all connections to that hub. For example, hub can be used for different applications, different applications can share one Azure Web PubSub service by using different hub names.

Group

Group allow broadcast messages to a subset of connections to the hub. You can add and remove users and connections as needed. A client can join multiple groups, and a group can contain multiple clients.

User

Connections to Web PubSub can belong to one user. A user might have multiple connections, for example when a single user is connected across multiple devices or multiple browser tabs.

Message

A message is either a UTF-8 encoded string or raw binary data.

Examples

Broadcast a JSON message to all users

const { WebPubSubServiceClient } = require("@azure/web-pubsub");

const serviceClient = new WebPubSubServiceClient("<ConnectionString>", "<hubName>");
await serviceClient.sendToAll({ message: "Hello world!" });

Broadcast a plain text message to all users

const { WebPubSubServiceClient } = require("@azure/web-pubsub");

const serviceClient = new WebPubSubServiceClient("<ConnectionString>", "<hubName>");
await serviceClient.sendToAll("Hi there!", { contentType: "text/plain" });

Broadcast a binary message to all users

const { WebPubSubServiceClient } = require("@azure/web-pubsub");

const serviceClient = new WebPubSubServiceClient("<ConnectionString>", "<hubName>");

const payload = new Uint8Array(10);
await serviceClient.sendToAll(payload.buffer);

Access the raw HTTP response for an operation

const { WebPubSubServiceClient } = require("@azure/web-pubsub");

function onResponse(rawResponse: FullOperationResponse): void {
  console.log(rawResponse);
}
const serviceClient = new WebPubSubServiceClient("<ConnectionString>", "<hubName>");
await serviceClient.sendToAll({ message: "Hello world!" }, { onResponse });

Troubleshooting

Enable logs

You can set the following environment variable to get the debug logs when using this library.

• Getting debug logs from the SignalR client library

export AZURE_LOG_LEVEL=verbose

For more detailed instructions on how to enable logs, you can look at the @azure/logger package docs.

Next steps

Please take a look at the samples directory for detailed examples on how to use this library.

Contributing

If you'd like to contribute to this library, please read the contributing guide to learn more about how to build and test the code.

Related projects

• Microsoft Azure SDK for Javascript