Delen via

JavaScript SDK voor Azure Web PubSub

  • Artikel

De Azure Web PubSub-service is een door Azure beheerde service waarmee ontwikkelaars eenvoudig webtoepassingen kunnen bouwen met realtime-functies en een patroon voor publiceren/abonneren. Elk scenario waarvoor realtime berichten voor publiceren/abonneren tussen server en clients of clients zijn vereist, kunnen de Azure Web PubSub-service gebruiken. Traditionele realtime-functies die vaak polling vereisen van de server of het verzenden van HTTP-aanvragen, kunnen ook gebruikmaken van de Azure Web PubSub-service.

Er zijn twee bibliotheken beschikbaar voor JavaScript: de serviceclientbibliotheek en express-middleware. De volgende secties bevatten meer informatie over deze bibliotheken.

Azure Web PubSub-serviceclientbibliotheek voor JavaScript

U kunt deze bibliotheek aan de serverzijde van uw app gebruiken om de WebSocket-clientverbindingen te beheren, zoals wordt weergegeven in het onderstaande diagram:

The overflow diagram shows the overflow of using the service client library.

  • Berichten verzenden naar hubs en groepen.
  • Berichten verzenden naar bepaalde gebruikers en verbindingen.
  • Organiseer gebruikers en verbindingen in groepen.
  • Verbindingen sluiten
  • Machtigingen voor een bestaande verbinding verlenen, intrekken en controleren

Documentatie over productdocumentatie over productdocumentatie | | over broncodepakket (NPM)API | |

Aan de slag

Momenteel ondersteunde omgevingen

Vereisten

1. Installeer het @azure/web-pubsub pakket

npm install @azure/web-pubsub

2. Een WebPubSubServiceClient maken en verifiëren

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

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

U kunt het WebPubSubServiceClient ook verifiëren met behulp van een eindpunt en een AzureKeyCredential:

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

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

Of verifieer de WebPubSubServiceClient microsoft-entra-id

  1. @azure/identity De afhankelijkheid installeren
npm install @azure/identity
  1. Werk de broncode bij die u wilt gebruiken DefaultAzureCredential:
const {
  WebPubSubServiceClient,
  AzureKeyCredential,
} = require("@azure/web-pubsub");

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

Voorbeelden

Het toegangstoken voor een client ophalen om de WebSocket-verbinding te starten

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

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

// Get the access token for the WebSocket client connection to use
let token = await serviceClient.getClientAccessToken();

// Or get the access token and assign the client a userId
token = await serviceClient.getClientAccessToken({ userId: "user1" });

// return the token to the WebSocket client

Berichten uitzenden naar alle verbindingen in een hub

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

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

// Send a JSON message
await serviceClient.sendToAll({ message: "Hello world!" });

// Send a plain text message
await serviceClient.sendToAll("Hi there!", { contentType: "text/plain" });

// Send a binary message
const payload = new Uint8Array(10);
await serviceClient.sendToAll(payload.buffer);

Berichten verzenden naar alle verbindingen in een groep

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

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

const groupClient = serviceClient.group("<groupName>");

// Add user to the group
await groupClient.addUser("user1");

// Send a JSON message
await groupClient.sendToAll({ message: "Hello world!" });

// Send a plain text message
await groupClient.sendToAll("Hi there!", { contentType: "text/plain" });

// Send a binary message
const payload = new Uint8Array(10);
await groupClient.sendToAll(payload.buffer);

Berichten verzenden naar alle verbindingen voor een gebruiker

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

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

// Send a JSON message
await serviceClient.sendToUser("user1", { message: "Hello world!" });

// Send a plain text message
await serviceClient.sendToUser("user1", "Hi there!", {
  contentType: "text/plain",
});

// Send a binary message
const payload = new Uint8Array(10);
await serviceClient.sendToUser("user1", payload.buffer);

Controleer of de groep verbinding heeft

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

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

const groupClient = serviceClient.group("<groupName>");

// close all the connections in the group
await groupClient.closeAllConnections({ reason: "<closeReason>" });

// check if the group has any connections
const hasConnections = await serviceClient.groupExists("<groupName>");

Toegang tot het onbewerkte HTTP-antwoord voor een bewerking

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 });

Problemen met serviceclient oplossen

Logboeken inschakelen

U kunt de volgende omgevingsvariabele instellen om de logboeken voor foutopsporing op te halen bij het gebruik van deze bibliotheek.

  • Foutopsporingslogboeken ophalen uit de Azure Web PubSub-clientbibliotheek
export AZURE_LOG_LEVEL=verbose

Voor meer gedetailleerde instructies over het inschakelen van logboeken, kunt u de @azure/logger pakketdocumenten bekijken.

Live Trace

Gebruik Live Trace vanuit de Web PubSub-serviceportal om het liveverkeer weer te geven.

Azure Web PubSub CloudEvents-handlers voor Express

Wanneer een WebSocket-verbinding verbinding maakt, transformeert de Web PubSub-service de levenscyclus van de verbinding en berichten in gebeurtenissen in cloudevents-indeling. Deze bibliotheek biedt een snelle middleware voor het afhandelen van gebeurtenissen die de levenscyclus en berichten van de WebSocket-verbinding vertegenwoordigen, zoals wordt weergegeven in het onderstaande diagram:

The overflow diagram shows the overflow of using the event handler middleware.

Documentatie over productdocumentatie over productdocumentatie | | over broncodepakket (NPM)API | |

Aan de slag

Momenteel ondersteunde omgevingen

Vereisten

1. Installeer het @azure/web-pubsub-express pakket

npm install @azure/web-pubsub-express

2. Maak een WebPubSubEventHandler

const express = require("express");

const { WebPubSubEventHandler } = require("@azure/web-pubsub-express");
const handler = new WebPubSubEventHandler("chat");

const app = express();

app.use(handler.getMiddleware());

app.listen(3000, () =>
  console.log(
    `Azure WebPubSub Upstream ready at http://localhost:3000${handler.path}`
  )
);

Express-voorbeelden

De connect aanvraag verwerken en toewijzen <userId>

const express = require("express");

const { WebPubSubEventHandler } = require("@azure/web-pubsub-express");
const handler = new WebPubSubEventHandler("chat", {
  handleConnect: (req, res) => {
    // auth the connection and set the userId of the connection
    res.success({
      userId: "<userId>",
    });
  },
  allowedEndpoints: ["https://<yourAllowedService>.webpubsub.azure.com"],
});

const app = express();

app.use(handler.getMiddleware());

app.listen(3000, () =>
  console.log(
    `Azure WebPubSub Upstream ready at http://localhost:3000${handler.path}`
  )
);

Alleen opgegeven eindpunten toestaan

const express = require("express");

const { WebPubSubEventHandler } = require("@azure/web-pubsub-express");
const handler = new WebPubSubEventHandler("chat", {
  allowedEndpoints: [
    "https://<yourAllowedService1>.webpubsub.azure.com",
    "https://<yourAllowedService2>.webpubsub.azure.com",
  ],
});

const app = express();

app.use(handler.getMiddleware());

app.listen(3000, () =>
  console.log(
    `Azure WebPubSub Upstream ready at http://localhost:3000${handler.path}`
  )
);

Pad voor aangepaste gebeurtenis-handler instellen

const express = require("express");

const { WebPubSubEventHandler } = require("@azure/web-pubsub-express");
const handler = new WebPubSubEventHandler("chat", {
  path: "/customPath1",
});

const app = express();

app.use(handler.getMiddleware());

app.listen(3000, () =>
  // Azure WebPubSub Upstream ready at http://localhost:3000/customPath1
  console.log(
    `Azure WebPubSub Upstream ready at http://localhost:3000${handler.path}`
  )
);

Verbindingsstatus instellen en lezen

const express = require("express");

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

const handler = new WebPubSubEventHandler("chat", {
  handleConnect(req, res) {
    // You can set the state for the connection, it lasts throughout the lifetime of the connection
    res.setState("calledTime", 1);
    res.success();
  },
  handleUserEvent(req, res) {
    var calledTime = req.context.states.calledTime++;
    console.log(calledTime);
    // You can also set the state here
    res.setState("calledTime", calledTime);
    res.success();
  },
});

const app = express();

app.use(handler.getMiddleware());

app.listen(3000, () =>
  console.log(
    `Azure WebPubSub Upstream ready at http://localhost:3000${handler.path}`
  )
);

Problemen oplossen

Logboeken inschakelen

U kunt de volgende omgevingsvariabele instellen om de logboeken voor foutopsporing op te halen bij het gebruik van deze bibliotheek.

  • Foutopsporingslogboeken ophalen uit de Azure Web PubSub-clientbibliotheek
export AZURE_LOG_LEVEL=verbose

Zie @azure-/loggerpakketdocumenten voor gedetailleerde instructies over het inschakelen van logboeken.

Live Trace

Gebruik Live Trace vanuit de Web PubSub-serviceportal om het liveverkeer weer te geven.

Volgende stappen

Gebruik deze resources om te beginnen met het bouwen van uw eigen toepassing:

Zelfstudie: Berichten publiceren en abonneren op berichten in Azure Web PubSub

Zelfstudie: Een eenvoudige chatroom maken met Azure Web PubSub

Zelfstudie: Een door de service ondersteund subprotocol gebruiken voor clientstreaming

Zelfstudie: Serverloze chat bouwen met Azure Functions en Web PubSub

Zelfstudie: Een gebeurtenislistener configureren

Spelen met live demo's

Meer Voorbeelden van Azure Web PubSub verkennen