Creazione di un'applicazione di chat Node.js con Socket.IO in un servizio cloud di AzureBuild a Node.js Chat Application with Socket.IO on an Azure Cloud Service

Socket.IO fornisce comunicazioni in tempo reale tra il server node.js e i client.Socket.IO provides realtime communication between between your node.js server and clients. In questa esercitazione verrà illustrato l'hosting di un'applicazione di chat basata su socket.IO in Azure.This tutorial will walk you through hosting a socket.IO based chat application on Azure. Per altre informazioni su Socket.IO, vedere http://socket.io/.For more information on Socket.IO, see http://socket.io/.

Di seguito è riportata una schermata dell'applicazione completata:A screenshot of the completed application is below:

Finestra del browser con il servizio ospitato in Azure

PrerequisitiPrerequisites

Assicurarsi che i seguenti prodotti e versioni siano installati per completare correttamente l'esempio in questo articolo:Ensure that the following products and versions are installed to successfully complete the example in this article:

Creazione di un progetto di servizio cloudCreate a Cloud Service Project

Eseguire le operazioni seguenti per creare il progetto servizio cloud che ospiterà l'applicazione Socket.IO.The following steps create the cloud service project that will host the Socket.IO application.

  1. Nel menu Start o nella schermata Start cercare Windows PowerShell.From the Start Menu or Start Screen, search for Windows PowerShell. Fare infine clic con il pulsante destro del mouse su Windows PowerShell e scegliere Esegui come amministratore.Finally, right-click Windows PowerShell and select Run As Administrator.

    Icona di Azure PowerShell

  2. Creare una directory denominata c:\node.Create a directory called c:\node.

     PS C:\> md node
    
  3. Passare alla directory c:\node.Change directories to the c:\node directory

     PS C:\> cd node
    
  4. Immettere i comandi seguenti per creare una nuova soluzione denominata chatapp e un ruolo di lavoro denominato WorkerRole1:Enter the following commands to create a new solution named chatapp and a worker role named WorkerRole1:

     PS C:\node> New-AzureServiceProject chatapp
     PS C:\Node> Add-AzureNodeWorkerRole
    

    Verrà visualizzata la risposta seguente:You will see the following response:

    Output dei cmdlet new-azureservice e add-azurenodeworkerrole

Download dell'esempio di chatDownload the Chat Example

Per questo progetto, verrà usato l'esempio di chat dell' archivio GitHub Socket.IO.For this project, we will use the chat example from the [Socket.IO GitHub repository]. Eseguire la procedura seguente per scaricare l'esempio e aggiungerlo al progetto creato in precedenza.Perform the following steps to download the example and add it to the project you previously created.

  1. Creare una copia locale dell'archivio usando il pulsante Clone .Create a local copy of the repository by using the Clone button. È inoltre possibile usare il pulsante ZIP per scaricare il progetto.You may also use the ZIP button to download the project.

    Finestra del browser con https://github.com/LearnBoost/socket.io/tree/master/examples/chat e l'icona per il download di ZIP evidenziata

  2. Spostarsi nella struttura di directory del repository locale fino alla directory examples\chat.Navigate the directory structure of the local repository until you arrive at the examples\chat directory. Copiare il contenuto di questa directory nella directory C:\node\chatapp\WorkerRole1 creata in precedenza.Copy the contents of this directory to the C:\node\chatapp\WorkerRole1 directory created earlier.

    Esplora risorse con il contenuto della directory examples\chat estratto dall'archivio

    Gli elementi evidenziati nello screenshot precedente sono i file copiati dalla directory examples\chat.The highlighted items in the screenshot above are the files copied from the examples\chat directory

  3. Nella directory C:\node\chatapp\WorkerRole1 eliminare il file server.js e quindi rinominare il file app.js in server.js.In the C:\node\chatapp\WorkerRole1 directory, delete the server.js file, and then rename the app.js file to server.js. Il file server.js predefinito creato in precedenza dal cmdlet Add-AzureNodeWorkerRole verrà così rimosso e sostituito con il file dell'applicazione dell'esempio di chat.This removes the default server.js file created previously by the Add-AzureNodeWorkerRole cmdlet and replaces it with the application file from the chat example.

Modificare Server.js e installare i moduliModify Server.js and Install Modules

Prima di testare l'applicazione nell'emulatore di Azure, è necessario apportare alcune piccole modifiche.Before testing the application in the Azure emulator, we must make some minor modifications. Eseguire la procedura seguente per il file server.js:Perform the following steps to the server.js file:

  1. Aprire il file server. js in Visual Studio o qualsiasi altro editor di testo.Open the server.js file in Visual Studio or any text editor.
  2. Trovare la sezione Module dependencies all'inizio del file server.js e sostituire la riga contenente sio = require('..//..//lib//socket.io') con sio = require('socket.io'), come illustrato di seguito:Find the Module dependencies section at the beginning of server.js and change the line containing sio = require('..//..//lib//socket.io') to sio = require('socket.io') as shown below:

    var express = require('express')
      , stylus = require('stylus')
      , nib = require('nib')
    //, sio = require('..//..//lib//socket.io'); //Original
      , sio = require('socket.io');                //Updated
      var port = process.env.PORT || 3000;         //Updated
    
  3. Per assicurarsi che l'applicazione resti in ascolto sulla porta corretta, aprire il file server.js nel Blocco note o in un altro editor di testo e quindi modificare la riga seguente sostituendo 3000 con process.env.port, come illustrato di seguito:To ensure the application listens on the correct port, open server.js in Notepad or your favorite editor, and then change the following line by replacing 3000 with process.env.port as shown below:

    //app.listen(3000, function () {            //Original
    app.listen(process.env.port, function () {  //Updated
      var addr = app.address();
      console.log('   app listening on http://' + addr.address + ':' + addr.port);
    });
    

Dopo aver salvato le modifiche apportate al file server.js, eseguire la procedura seguente per installare i moduli necessari, quindi testare l'applicazione nell'emulatore di Azure:After saving the changes to server.js, use the following steps to install required modules, and then test the application in the Azure emulator:

  1. Con Azure PowerShell passare alla directory C:\node\chatapp\WorkerRole1 e usare il comando seguente per installare i moduli necessari per l'applicazione:Using Azure PowerShell, change directories to the C:\node\chatapp\WorkerRole1 directory and use the following command to install the modules required by this application:

    PS C:\node\chatapp\WorkerRole1> npm install
    

    Verranno installati i moduli elencati nel file package.json.This will install the modules listed in the package.json file. Dopo il completamento del comando, l'output dovrebbe essere simile al seguente:After the command completes, you should see output similar to the following:

    Output del comando npm install

  2. Poiché l'esempio in origine faceva parte dell'archivio GitHub Socket.IO e faceva riferimento direttamente alla libreria Socket.IO mediante percorso relativo, a Socket.IO non viene fatto riferimento nel file package.json, quindi è necessario installarlo immettendo il comando seguente:Since this example was originally a part of the Socket.IO GitHub repository, and directly referenced the Socket.IO library by relative path, Socket.IO was not referenced in the package.json file, so we must install it by issuing the following command:

    PS C:\node\chatapp\WorkerRole1> npm install socket.io --save
    

Test e distribuzioneTest and Deploy

  1. Avviare l'emulatore immettendo il comando seguente:Launch the emulator by issuing the following command:

    PS C:\node\chatapp\WorkerRole1> Start-AzureEmulator -Launch
    

    Nota

    Se si verificano problemi con l'avvio dell'emulatore, ad esempio Start-AzureEmulator: Errore imprevisto.If you encounter issues with launching emulator, eg.: Start-AzureEmulator : An unexpected failure occurred. Dettagli: Errore imprevisto Impossibile utilizzare l'oggetto di comunicazione, System.ServiceModel.Channels.ServiceChannel per la comunicazione perché è nello stato Faulted.Details: Encountered an unexpected error The communication object, System.ServiceModel.Channels.ServiceChannel, cannot be used for communication because it is in the Faulted state.

    reinstallare AzureAuthoringTools 2.7.1 e AzureComputeEmulator 2.7 - verificare che la versione corrisponda.reinstall AzureAuthoringTools v 2.7.1 and AzureComputeEmulator v 2.7 - make sure that version matches. > >

  2. Aprire un browser e passare a http://127.0.0.1.Open a browser and navigate to http://127.0.0.1.

  3. Quando si apre la finestra del browser, immettere un nome alternativo e premere INVIO.When the browser window opens, enter a nickname and then hit enter. In questo modo sarà possibile inviare messaggi con un nome alternativo specifico.This will allow you to post messages as a specific nickname. Per testare la funzionalità multiutente, aprire altre finestre del browser usando lo stesso URL e immettere nomi alternativi diversi.To test multi-user functionality, open additional browser windows using the same URL and enter different nicknames.

    Due finestre del browser con i messaggi della chat di User1 e User2

  4. Dopo aver testato l'applicazione, immettere il comando seguente per interrompere l'emulatore:After testing the application, stop the emulator by issuing the following command:

    PS C:\node\chatapp\WorkerRole1> Stop-AzureEmulator
    
  5. Per distribuire l'applicazione in Azure, usare il cmdlet Publish-AzureServiceProject.To deploy the application to Azure, use the Publish-AzureServiceProject cmdlet. Ad esempio:For example:

    PS C:\node\chatapp\WorkerRole1> Publish-AzureServiceProject -ServiceName mychatapp -Location "East US" -Launch
    

    Importante

    Assicurarsi di usare un nome univoco, in caso contrario il processo di pubblicazione avrà esito negativo.Be sure to use a unique name, otherwise the publish process will fail. Al termine della distribuzione, verrà visualizzata una finestra del browser che consente di passare al servizio distribuito.After the deployment has completed, the browser will open and navigate to the deployed service.

    Se viene visualizzato un messaggio di errore indicante che il nome della sottoscrizione specificato non esiste nel profilo di pubblicazione importato, è necessario scaricare e importare il profilo di pubblicazione per la sottoscrizione prima della distribuzione in Azure.If you receive an error stating that the provided subscription name doesn't exist in the imported publish profile, you must download and import the publishing profile for your subscription before deploying to Azure. Vedere la sezione Distribuzione dell'applicazione in Azure dell'argomento Creazione e distribuzione di un'applicazione Node.js in un servizio cloud di AzureSee the Deploying the Application to Azure section of Build and deploy a Node.js application to an Azure Cloud Service

    Finestra del browser con il servizio ospitato in Azure

    Nota

    Se viene visualizzato un messaggio di errore indicante che il nome della sottoscrizione specificato non esiste nel profilo di pubblicazione importato, è necessario scaricare e importare il profilo di pubblicazione per la sottoscrizione prima della distribuzione in Azure.If you receive an error stating that the provided subscription name doesn't exist in the imported publish profile, you must download and import the publishing profile for your subscription before deploying to Azure. Vedere la sezione Distribuzione dell'applicazione in Azure dell'argomento Creazione e distribuzione di un'applicazione Node.js in un servizio cloud di AzureSee the Deploying the Application to Azure section of Build and deploy a Node.js application to an Azure Cloud Service

L'applicazione è ora in esecuzione in Azure ed è in grado di inoltrare i messaggi di chat tra diversi client tramite Socket.IO.Your application is now running on Azure, and can relay chat messages between different clients using Socket.IO.

Nota

Per semplicità, in questo esempio viene illustrata solo la chat tra utenti connessi alla stessa istanza.For simplicity, this sample is limited to chatting between users connected to the same instance. Questo significa che se il servizio cloud crea due istanze del ruolo di lavoro, gli utenti saranno in grado di comunicare solo con altri connessi alla stessa istanza.This means that if the cloud service creates two worker role instances, users will only be able to chat with others connected to the same worker role instance. Per scalare l'applicazione in modo da usare più istanze del ruolo, è possibile usare una tecnologia come il bus di servizio per condividere lo stato dell'archivio Socket.IO tra le istanze.To scale the application to work with multiple role instances, you could use a technology like Service Bus to share the Socket.IO store state across instances. Per alcuni esempi, vedere le apposite sezioni relative a code e argomenti del bus di servizio nel repository GitHub di Azure SDK per Node.js.For examples, see the Service Bus Queues and Topics usage samples in the Azure SDK for Node.js GitHub repository.

Passaggi successiviNext steps

In questa esercitazione è stato illustrato come creare un'applicazione di chat di base ospitata in un servizio cloud di Azure.In this tutorial you learned how to create a basic chat application hosted in an Azure Cloud Service. Per informazioni su come ospitare questa applicazione in un sito Web di Azure, vedere Creazione di un'applicazione di chat Node.js con Socket.IO in un sito Web di Azure.To learn how to host this application in an Azure Website, see Build a Node.js Chat Application with Socket.IO on an Azure Web Site.

Per ulteriori informazioni, vedere anche il Centro per sviluppatori di Node.js.For more information, see also the Node.js Developer Center.