Avvio rapido: sviluppa con l'estensione Visual Studio Code

Azure Web PubSub aiuta gli sviluppatori a costruire applicazioni web di messaggistica in tempo reale utilizzando WebSockets e il modello di pubblicazione-iscrizione in modo semplice.

In questo tutorial, crei un'applicazione di chat usando Azure Web PubSub con l'aiuto di Visual Studio Code.

Prerequisiti

• È richiesto un account Azure con una sottoscrizione attiva. Se non si dispone già di un account, è possibile creare un account gratuitamente.
• Visual Studio Code, disponibile come download gratuito.
• Sono installate le estensioni di Visual Studio Code seguenti:
  • Estensione dell'account Azure
  • L'estensione Azure Web PubSub

Clonare il progetto

1. Aprire una nuova finestra di Visual Studio Code.

2. Premi F1 per aprire la tavolozza dei comandi.

3. Immettere Git: Clonare e premere INVIO.

4. Immettere l'URL seguente per clonare il progetto di esempio:

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

   Annotazioni

   Questa esercitazione usa un progetto JavaScript, ma i passaggi sono indipendenti dal linguaggio.

5. Selezionare una cartella in cui clonare il progetto.

6. Seleziona Apri -> Apri cartella per azure-webpubsub/samples/javascript/chatapp/nativeapi in Visual Studio Code.

Accedere ad Azure

1. Premi F1 per aprire la tavolozza dei comandi.

2. Selezionare Azure: Accedi e seguire le istruzioni per l'autenticazione.

3. Dopo l'accesso, tornare a Visual Studio Code.

Create an Azure Web PubSub Service

L'estensione Azure Web PubSub per Visual Studio Code consente agli utenti di creare, gestire e utilizzare rapidamente Azure Web PubSub Service e i suoi strumenti per sviluppatori come Azure Web PubSub Local Tunnel Tool. In questo scenario, crei una nuova risorsa Azure Web PubSub Service e la configuri per ospitare la tua applicazione. Dopo aver installato l'estensione Web PubSub, puoi accedere alle sue funzionalità tramite il pannello di controllo Azure in Visual Studio Code.

1. Premi F1 per aprire la palette di comandi ed esegui il comando Azure Web PubSub: Create Web PubSub Service .

2. Immettere i valori seguenti come richiesto dall'estensione.

   Rapido	Value
   Selezionare la sottoscrizione	Selezionare la sottoscrizione di Azure da usare.
   Selezionare il gruppo di risorse	Seleziona il gruppo di risorse Azure che vuoi usare.
   Inserisci un nome per il servizio	Inserisci my-wps.
   Selezionare una località	Selezionare un'area di Azure vicina.
   Seleziona una fascia di prezzo	Seleziona un fascio di prezzo che vuoi utilizzare.
   Seleziona un conteggio di unità	Seleziona il numero di unità che vuoi usare.

   Viene aperto il pannello del log attività di Azure e viene visualizzato lo stato di avanzamento della distribuzione. Il completamento di questo processo potrebbe richiedere alcuni minuti.

3. Al termine del processo, Visual Studio Code visualizza una notifica.

Crea un'impostazione hub

1. Apri l'icona Azure nella barra attività sul lato sinistro di Visual Studio Code.

   Annotazioni

   Se la barra delle attività è nascosta, non potrai accedere all'estensione. Mostra la barra delle attività cliccando su Visualizza > Aspetto > Mostra barra delle attività

2. Nell'albero delle risorse, trova la risorsa my-wps Azure Web PubSub che hai creato e clicca su di essa per espandere

3. Clicca con il tasto destro sull'oggetto Impostazioni hub e poi seleziona Crea Impostazione Hub

4. Inserisci sample_chat come nome hub e crea l'impostazione dell'hub. Non importa se creare o meno gestori di eventi extra. Aspetta che la notifica di progresso venga indicata come completata

5. Sotto le impostazioni dell'oggetto Hub, apparirà un nuovo sottoelemento Hub sample_chat . Clicca con il tasto destro sul nuovo elemento e poi scegli "Collega tunnel locale"

6. Una notifica ti ricorda di creare un gestore eventi abilitato al tunnel e compare l'appare. Clicca sul pulsante Sì . Poi inserisci i seguenti valori come richiesto dall'estensione

   Rapido	Value
   Seleziona eventi utente	Seleziona Tutti
   Seleziona Eventi di Sistema	Seleziona connesso
   Porta server di ingresso	Entra in scena 8080

7. L'estensione crea un nuovo terminale per eseguire il Local Tunnel Tool e appare una notifica che ti ricorda di aprire il Local Tunnel Portal. Clicca sul pulsante "Sì" o apri "http://localhost:4000" nel browser web manualmente per visualizzare il portale.

Esegui l'applicazione server

1. Assicurati che la directory operativa sia azure-webpubsub/samples/javascript/chatapp/nativeapi

2. Installare le dipendenze di Node.js

   npm install
   

3. Apri l'icona Azure nella Barra Attività e trova la risorsa my-wpsAzure Web PubSub. Poi clicca con il tasto destro sull'elemento risorsa e seleziona Copia Stringa di Connessione. La stringa di connessione viene copiata sulla tua cartellina

4. Esegui l'applicazione server con la stringa di connessione copiata

   node server.js "<connection-string>"
   

5. Apri http://localhost:8080/index.html il browser per provare la tua app di chat.

Suggerimento

Problemi? Faccelo sapere su GitHub aprendo un problema nel repository Azure Web PubSub.