Quickstart: Een serverloze eenvoudige chattoepassing maken met Azure Functions en Azure Web PubSub-service

De Azure Web PubSub-service helpt u bij het eenvoudig bouwen van realtime berichtenwebtoepassingen met behulp van WebSockets en het patroon publiceren/abonneren. Azure Functions is een serverloos platform waarmee u code kunt uitvoeren zonder een infrastructuur te beheren. In deze quickstart leert u hoe u de Azure Web PubSub-service en -Azure Functions gebruikt om een serverloze toepassing te bouwen met realtime berichten en het patroon publiceren/abonneren.

Vereisten

Installeer een code-editor, zoals Visual Studio Code,en ook de bibliotheekNode.js, versie 10.x

Notitie

Zie voor meer informatie over de ondersteunde versies van Node.js runtime-versies Azure Functions runtimeversies.

Installeer de Azure Functions Core Tools (versie 2.7.1505 of hoger) om Azure Function-apps lokaal uit te voeren.

Als u geen Azure-abonnement hebt, maakt u een gratis account voordat u begint.

Aanmelden bij Azure

Meld u aan bij de Azure Portal https://portal.azure.com/ op met uw Azure-account.

Een Azure Web PubSub-service-exemplaar maken

Uw toepassing maakt verbinding met een Web PubSub-service-exemplaar in Azure.

  1. Selecteer de knop Nieuw in de linkerbovenhoek van Azure Portal. Typ in het scherm Nieuw Web PubSub in het zoekvak en druk op Enter. (U kunt ook in de categorie Azure Web PubSub Web zoeken.)

Schermopname van het zoeken in de Azure Web PubSub in de portal.

  1. Selecteer Web PubSub in de zoekresultaten en selecteer vervolgens Maken.

  2. Voer de volgende instellingen in.

    Instelling Voorgestelde waarde Beschrijving
    Resourcenaam Wereldwijd unieke naam Naam die uw nieuwe Web PubSub-service-exemplaar identificeert. Geldige tekens zijn a-z, 0-9 en -.
    Abonnement Uw abonnement Het abonnement waarmee dit nieuwe Web PubSub-service-exemplaar wordt gemaakt.
    Resourcegroep myResourceGroup Naam voor de nieuwe resourcegroep waarin u uw Web PubSub-service-exemplaar wilt maken.
    Locatie VS - west Kies een regio bij u in de buurt.
    Prijscategorie Gratis Probeer de Azure Web PubSub-service gratis.
    Aantal eenheden Niet van toepassing Aantal eenheden geeft aan hoeveel verbindingen uw Web PubSub-service-exemplaar kan accepteren. Dit kan alleen worden geconfigureerd in de Standard-laag.
  3. Selecteer Maken om te beginnen met het implementeren van het Web PubSub-service-exemplaar.

De voorbeeldtoepassing klonen

Terwijl de service wordt geïmplementeerd, gaan we met code werken. Kloon de voorbeeld-app GitHub als eerste stap.

  1. Open een nieuw git-terminalvenster. Navigeer naar een map waarin u het voorbeeldproject wilt klonen.

  2. Voer de volgende opdracht uit om de voorbeeldopslagplaats te klonen. Deze opdracht maakt een kopie van de voorbeeld-app op uw computer.

    git clone https://github.com/Azure/azure-webpubsub.git
    

De Azure-functie-app configureren en uitvoeren

  • Open in de browser de Azure Portal controleer of het Web PubSub Service-exemplaar dat u eerder hebt geïmplementeerd, is gemaakt. Navigeer naar het exemplaar.
  • Selecteer Sleutels en kopieer de connection string.

Schermopname van het kopiëren van de Web PubSub-connection string.

  • Functieconfiguratie bijwerken.

    Open de map /samples/functions/js/simplechat in de gekloonde opslagplaats. Bewerk local.settings.jsaan om service-connection string. In local.settings.jsop moet u deze wijzigingen aanbrengen en vervolgens het bestand opslaan.

    • Vervang de plaatshouder de echte die is gekopieerd uit Azure Portal voor WebPubSubConnectionString instelling.
    • Voor AzureWebJobsStorage het instellen is dit vereist omdat Azure Functions een Azure Storage account vereist.
      • Als u een Azure Storage Emulator lokaal hebt uitgevoerd, laat u de oorspronkelijke instellingen van UseDevelopmentStorage=true ingesteld.
      • Als u een Azure Storage-connection string, vervangt u de waarde er door.
  • JavaScript-functies zijn georganiseerd in mappen. In elke map staan twee bestanden: definieert de bindingen die worden gebruikt in de functie function.json en is de body van de index.js functie. Er zijn verschillende geactiveerde functies in deze functie-app:

    • login: dit is de door HTTP geactiveerde functie. De webPubSubConnection-invoerbinding wordt gebruikt om geldige serviceverbindingsgegevens te genereren en te retourneren.
    • berichten : dit is de WebPubSubTrigger geactiveerde functie. Ontvangt een chatbericht in de aanvraag body en gebruikt de uitvoerbinding om het bericht uit te WebPubSub zenden naar alle verbonden clienttoepassingen.
    • verbinding maken en verbinding maken: dit zijn de WebPubSubTrigger geactiveerde functies. De verbindings- en verbonden gebeurtenissen verwerken.
  • Zorg ervoor dat u zich in de terminal in de map /samples/functions/js/simplechat. Installeer de extensies en voer de functie-app uit.

    func extensions install
    
    func start
    
  • De lokale functie gebruikt de poort die in het bestand is local.settings.json gedefinieerd. Als u deze beschikbaar wilt maken in een openbaar netwerk, moet u samenwerken met ngrok om dit eindpunt beschikbaar te maken. Voer de onderstaande opdracht uit en u krijgt een doorsturend eindpunt, bijvoorbeeld: http://{ngrok-id}.ngrok.io -> http://localhost:7071 .

    ngrok http 7071
    
  • Ingesteld Event Handler in Azure Web PubSub-service. Ga naar Azure Portal -> Web PubSub-resource zoeken -> Instellingen. Voeg een nieuwe toewijzing van hub-instellingen toe aan de ene functie die wordt gebruikt, zoals hieronder wordt weergegeven. Vervang {ngrok-id} door die van u.

    • Hubnaam: simplechat
    • URL-sjabloon: http://{ngrok-id}.ngrok.io/runtime/webhooks/webpubsub
    • Gebruikersgebeurtenispatroon: *
    • Systeemgebeurtenissen: verbinding maken, verbonden, verbinding verbroken.

Schermopname van het instellen van de gebeurtenis-handler.

De webtoepassing uitvoeren

  1. Om het testen van uw client te vereenvoudigen, opent u onze voorbeeldwebtoepassing met één pagina in uwbrowser.

  2. Voer de basis-URL van de functie-app in als local: http://localhost:7071 .

  3. Voer een gebruikersnaam in.

  4. De webtoepassing roept de aanmeldingsfunctie in de functie-app aan om de verbindingsgegevens op te halen om verbinding te maken met de Azure Web PubSub-service. Wanneer u hebt Client websocket opened. gezien, betekent dit dat de verbinding tot stand is gebracht.

  5. Typ een bericht en druk op Enter. De toepassing verzendt het bericht naar de berichtenfunctie in de Azure Function-app, die vervolgens de Web PubSub-uitvoerbinding gebruikt om het bericht uit te zenden naar alle verbonden clients. Als alles goed werkt, wordt het bericht weergegeven in de toepassing.

  6. Open een ander exemplaar van de webtoepassing in een ander browservenster. U ziet dat alle verzonden berichten in alle exemplaren van de toepassing worden weergegeven.

Resources opschonen

Als u deze app verder niet gaat gebruiken, verwijdert u alle resources die in dit document zijn gemaakt met de volgende stappen, zodat er geen kosten in rekening worden gebracht:

  1. Selecteer in Azure Portal Resourcegroepen aan de linkerkant en selecteer vervolgens de resourcegroep die u hebt gemaakt. U kunt in plaats daarvan het zoekvak gebruiken om de resourcegroep op naam te vinden.

  2. Selecteer in het venster dat wordt geopend de resourcegroep en selecteer vervolgens Resourcegroep verwijderen.

  3. Typ in het nieuwe venster de naam van de resourcegroep die u wilt verwijderen en selecteer vervolgens Verwijderen.

Volgende stappen

In deze quickstart hebt u geleerd hoe u een serverloze eenvoudige chattoepassing kunt uitvoeren. U kunt nu beginnen met het bouwen van uw eigen toepassing.