Udostępnij przez

Zestaw JAVAScript SDK dla usługi Azure Web PubSub

Usługa Azure Web PubSub to usługa zarządzana przez platformę Azure, która ułatwia deweloperom łatwe tworzenie aplikacji internetowych przy użyciu funkcji w czasie rzeczywistym i wzorca publikowania-subskrybowania. Każdy scenariusz, który wymaga komunikatów publikowania i subskrybowania w czasie rzeczywistym między serwerem a klientami lub między klientami, może korzystać z usługi Azure Web PubSub. Tradycyjne funkcje w czasie rzeczywistym, które często wymagają sondowania z serwera lub przesyłania żądań HTTP, mogą również używać usługi Azure Web PubSub.

Istnieją dwie biblioteki oferowane dla języka JavaScript: biblioteka klienta serwisowego i oprogramowanie pośredniczące Express. Poniższe sekcje zawierają więcej informacji o tych bibliotekach.

Biblioteka klienta usługi Azure Web PubSub dla języka JavaScript

Tej biblioteki można używać po stronie serwera aplikacji do zarządzania połączeniami klienta protokołu WebSocket, jak pokazano na poniższym diagramie:

Diagram przepełnienia pokazuje, jak dochodzi do przepełnienia podczas korzystania z biblioteki klienta usługi.

  • Wysyłanie komunikatów do centrów i grup.
  • Wysyłanie komunikatów do konkretnych użytkowników i połączeń.
  • Organizowanie użytkowników i połączeń w grupy.
  • Zamykanie połączeń
  • Udzielanie, odwoływanie i sprawdzanie uprawnień dla istniejącego połączenia

Kod źródłowy | Pakiet (NPM) | Dokumentacja referencyjna interfejsu API | Dokumentacja produktu | Przykłady

Wprowadzenie

Obecnie obsługiwane środowiska

  • Wersje LTS systemu Node.js

Wymagania wstępne

1. Zainstaluj @azure/web-pubsub pakiet

npm install @azure/web-pubsub

2. Utwórz i uwierzytelnij klienta WebPubSubServiceClient

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

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

Możesz również uwierzytelnić się przy użyciu punktu końcowego i AzureKeyCredential:

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

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

Lub dokonaj uwierzytelnienia przy użyciu WebPubSubServiceClientMicrosoft Entra ID

  1. Zainstaluj zależność @azure/identity
npm install @azure/identity
  1. Zaktualizuj kod źródłowy, aby używał DefaultAzureCredential:
const {
  WebPubSubServiceClient,
  AzureKeyCredential,
} = require("@azure/web-pubsub");

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

Przykłady

Uzyskiwanie tokenu dostępu dla klienta w celu uruchomienia połączenia protokołu WebSocket

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

Emisja komunikatów do wszystkich połączeń w centrum

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

Wysyłanie komunikatów do wszystkich połączeń w grupie

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

Wysyłanie komunikatów do wszystkich połączeń użytkownika

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

Sprawdź, czy grupa ma jakiekolwiek połączenie

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

Uzyskiwanie dostępu do nieprzetworzonej odpowiedzi HTTP dla operacji

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

Rozwiązywanie problemów z klientem usługi

Włącz dzienniki

Możesz ustawić następującą zmienną środowiskową, aby pobrać dzienniki debugowania podczas korzystania z tej biblioteki.

  • Pobieranie dzienników debugowania z biblioteki klienta usługi Azure Web PubSub
export AZURE_LOG_LEVEL=verbose

Aby uzyskać bardziej szczegółowe instrukcje dotyczące włączania dzienników, zapoznaj się z dokumentami dotyczącymi pakietów @azure/rejestratora.

Śledzenie w czasie rzeczywistym

Użyj funkcji Live Trace z portalu usługi Web PubSub, aby wyświetlić ruch na żywo.

Azure Web PubSub CloudEvents handlers for Express

Po nawiązaniu połączenia protokołu WebSocket usługa Web PubSub przekształca cykl życia połączenia i komunikaty w zdarzenia w formacie CloudEvents. Ta biblioteka udostępnia ekspresowe oprogramowanie pośredniczące do obsługi zdarzeń reprezentujących cykl życia i komunikaty połączenia Protokołu WebSocket, jak pokazano na poniższym diagramie:

Diagram przepełnienia pokazuje przepełnienie wynikające z użycia middleware do obsługi zdarzeń.

Kod źródłowy | Pakiet (NPM) | Dokumentacja referencyjna interfejsu API | Dokumentacja produktu | Przykłady

Wprowadzenie

Obecnie obsługiwane środowiska

  • Wersje LTS systemu Node.js
  • Express w wersji 4.x.x lub nowszej

Wymagania wstępne

1. Zainstaluj @azure/web-pubsub-express pakiet

npm install @azure/web-pubsub-express

2. Utwórz element 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}`
  )
);

Przykłady express

Obsłużyć connect żądanie i przypisać <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}`
  )
);

Zezwalaj tylko na określone punkty końcowe

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

Ustaw niestandardową ścieżkę obsługi zdarzeń

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

Ustawianie i odczytywanie stanu połączenia

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

Rozwiązywanie problemów

Włącz dzienniki

Możesz ustawić następującą zmienną środowiskową, aby pobrać dzienniki debugowania podczas korzystania z tej biblioteki.

  • Pobieranie dzienników debugowania z biblioteki klienta usługi Azure Web PubSub
export AZURE_LOG_LEVEL=verbose

Aby uzyskać bardziej szczegółowe instrukcje dotyczące włączania dzienników, zobacz dokumentację pakietu @azure/logger.

Śledzenie w czasie rzeczywistym

Użyj funkcji Live Trace z portalu usługi Web PubSub, aby wyświetlić ruch na żywo.

Dalsze kroki

Użyj tych zasobów, aby rozpocząć tworzenie własnej aplikacji:

Samouczek: publikowanie i subskrybowanie komunikatów w usłudze Azure Web PubSub

Samouczek: tworzenie prostego czatroomu za pomocą usługi Azure Web PubSub

Poradnik: użycie subprotokołu obsługiwanego przez usługę do przesyłania strumieniowego klienta

Samouczek: tworzenie czatu bezserwerowego za pomocą usług Azure Functions i Web PubSub

Samouczek: konfigurowanie nasłuchiwacza zdarzeń

Baw się pokazami na żywo

Zapoznaj się z więcej przykładów usługi Azure Web PubSub

  • Last updated on