Quickstart: Entwickeln Sie mit der Visual Studio Code Extension

Azure Web PubSub hilft Entwicklern, Echtzeit-Messaging-Webanwendungen mit WebSockets und dem Publish-Subscribe-Muster einfach zu erstellen.

In diesem Tutorial erstellen Sie eine Chat-Anwendung mit Azure Web PubSub und Hilfe von Visual Studio Code.

Voraussetzungen

• Ein Azure-Konto mit einem aktiven Abonnement ist erforderlich. Falls Sie noch über keins verfügen, können Sie ein kostenloses Konto erstellen.
• Visual Studio Code, verfügbar als kostenloser Download.
• Die folgenden Visual Studio Code-Erweiterungen wurden installiert:
  • Die Azure-Kontoerweiterung
  • Die Azure Web PubSub-Erweiterung

Klonen des Projekts

1. Öffnen Sie ein neues Visual Studio Code-Fenster.

2. Drücke F1 , um die Befehlspalette zu öffnen.

3. Geben Sie Git: Klonen ein und drücken Sie die EINGABETASTE.

4. Geben Sie die folgende URL ein, um das Beispielprojekt zu klonen:

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

   Hinweis

   In diesem Lernprogramm wird ein JavaScript-Projekt verwendet, aber die Schritte sind sprachunabhängig.

5. Wählen Sie einen Ordner aus, in den das Projekt geklont werden soll.

6. Wählen Sie Öffnen –> Ordner öffnen in azure-webpubsub/samples/javascript/chatapp/nativeapi Visual Studio Code.

Anmelden bei Azure

1. Drücke F1 , um die Befehlspalette zu öffnen.

2. Wählen Sie Azure aus: Melden Sie sich an , und folgen Sie den Anweisungen zur Authentifizierung.

3. Kehren Sie nach der Anmeldung zu Visual Studio Code zurück.

Create an Azure Web PubSub Service

Die Azure Web PubSub-Erweiterung für Visual Studio Code ermöglicht es Nutzern, den Azure Web PubSub Service und dessen Entwicklertools wie das Azure Web PubSub Local Tunnel Tool schnell zu erstellen, zu verwalten und zu nutzen. In diesem Szenario erstellen Sie eine neue Azure Web PubSub Service-Ressource und konfigurieren sie, um Ihre Anwendung zu hosten. Nach der Installation der Web PubSub-Erweiterung können Sie ihre Funktionen im Azure-Kontrollpanel in Visual Studio Code aufrufen.

1. Drücke F1 , um die Befehlspalette zu öffnen und führe den Befehl Azure Web PubSub: Create Web PubSub Service aus.

2. Geben Sie die folgenden Werte ein, wie sie von der Erweiterung aufgefordert werden.

   Prompt	Wert
   Wählen Sie das Abonnement aus.	Wählen Sie das Azure-Abonnement aus, das Sie verwenden möchten.
   Auswählen der Ressourcengruppe	Wählen Sie die Azure-Ressourcengruppe aus, die Sie verwenden möchten.
   Geben Sie einen Namen für den Service ein	Geben Sie my-wps ein.
   Standort auswählen	Wählen Sie eine Azure-Region in ihrer Nähe aus.
   Wählen Sie eine Preisstufe	Wählen Sie eine Preisstufe aus, die Sie verwenden möchten.
   Wählen Sie eine Einheitenanzahl aus	Wählen Sie eine Einheitenanzahl aus, die Sie verwenden möchten.

   Der Azure-Aktivitätsprotokollbereich wird geöffnet und zeigt den Bereitstellungsfortschritt an. Dieser Vorgang kann einige Minuten dauern.

3. Nach Abschluss dieses Vorgangs zeigt Visual Studio Code eine Benachrichtigung an.

Erstelle eine Hub-Einstellung

1. Öffnen Sie das Azure-Symbol in der Aktivitätsleiste auf der linken Seite von Visual Studio Code.

   Hinweis

   Wenn deine Aktivitätsleiste versteckt ist, kannst du nicht auf die Erweiterung zugreifen. Zeigen Sie die Aktivitätsleiste an, indem Sie auf Aussehen > anzeigen > Aktivitätsleiste klicken

2. Im Ressourcenbaum finden Sie die von Ihnen erstellte Azure Web PubSub-Ressource my-wps und klicken Sie darauf, um zu erweitern

3. Rechtsklicke auf das Element Hub-Einstellungen und wähle dann Hub-Einstellung erstellen

4. Geben Sie den Hub-Namen ein sample_chat und erstellen Sie die Hub-Einstellung. Es spielt keine Rolle, ob zusätzliche Ereignishandler erstellt werden oder nicht. Warte auf die Fortschrittsbenachrichtigung, die als abgeschlossen angezeigt wird

5. Unter den Hub-Einstellungen des Elements erscheint ein neues Unteritem-Hub-sample_chat . Rechtsklicke auf den neuen Gegenstand und wähle dann "Lokaler Tunnel anhängen"

6. Eine Benachrichtigung erinnert dich daran, einen tunnelfähigen Event-Handler zu erstellen. Klicke auf Ja. Geben Sie dann die folgenden Werte ein, wie von der Erweiterung gefordert

   Prompt	Wert
   Ausgewählte Benutzerereignisse	Alle auswählen
   Systemereignisse auswählen	Wählen Sie verbunden
   Eingabeserver-Port	Hier kommt 8080 ins Spiel

7. Die Erweiterung erstellt ein neues Terminal, um das Local Tunnel Tool auszuführen, und eine Benachrichtigung erscheint daran, das Local Tunnel Portal zu öffnen. Klicken Sie auf die Schaltfläche "Ja" oder öffnen Sie "http://localhost:4000" Manuell im Webbrowser, um das Portal anzuzeigen.

Führen Sie die Serveranwendung aus

1. Stellen Sie sicher, dass das Arbeitsverzeichnis azure-webpubsub/samples/javascript/chatapp/nativeapi

2. Installieren von Node.js-Abhängigkeiten

   npm install
   

3. Öffnen Sie das Azure-Icon in der Aktivitätsleiste und finden Sie die Azure Web PubSub-Ressource my-wps. Klicken Sie dann mit der rechten Maustaste auf das Ressourcenelement und wählen Sie Connection String kopieren. Die Verbindungsreihe wird auf dein Klemmbrett kopiert

4. Führe die Serveranwendung mit kopierter Verbindungsstring aus

   node server.js "<connection-string>"
   

5. Öffne http://localhost:8080/index.html im Browser, um deine Chat-Anwendung auszuprobieren.

Tipp

Treten Probleme auf? Lassen Sie es uns auf GitHub wissen, indem Sie ein Problem im Azure Web PubSub-Repository eröffnen.