Come connettersi con uno StreamWebSocket (HTML)

Articolo
12/11/2015

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Questo argomento ti mostrerà come inviare e ricevere flussi di dati tramite StreamWebSocket in un'app di Windows Runtime.

La classe StreamWebSocket fornisce un'astrazione basata sul flusso del protocollo WebSocket basato su messaggio. Questo aspetto è utile per gli scenari in cui file di grandi dimensioni (quali foto o filmati) devono essere trasferiti tra un client e un server. Il server deve supportare il protocollo WebSocket. Il StreamWebSocket consente di leggere parti di un messaggio durante ciascuna operazione di lettura, anziché leggere l'intero messaggio in un'unica operazione (come nel caso di MessageWebSocket).

La classe StreamWebSocket supporta solo messaggi binari. Per i messaggi UTF-8, è necessario usare MessageWebSocket.

Prerequisiti

Gli esempi seguenti usano JavaScript e sono basati sull'esempio di WebSocket. Per informazioni generali sulla creazione di un'app di Windows Runtime in JavaScript, vedi Creare la prima app di Windows Runtime in JavaScript. Inoltre, in questo argomento si usano promesse JavaScript per eseguire operazioni asincrone. Per altre informazioni su questo modello di programmazione, vedi Programmazione asincrona in JavaScript con promesse.

Per predisporre la tua app di Windows Runtime per l'uso in rete, devi impostare le eventuali funzionalità di rete necessarie nel file Package.appxmanifest del progetto. Se la tua app deve connettersi come client a servizi remoti su Internet, è necessaria la funzionalità Internet (client). Se l'app deve connettersi come client a servizi remoti su una rete domestica o aziendale, è necessaria la funzionalità Rete casa/lavoro.

Nota In Windows Phone, c'è solo una funzionalità di rete (Internet (client e server)) che consente l'accesso a tutte le reti per l'app.

Per altre informazioni, vedi Come impostare le funzionalità di rete.

Istruzioni

1. Creare un oggetto StreamWebSocket per l'invio e la ricezione di dati

Il codice mostrato in questa sezione consente di creare un nuovo elemento StreamWebSocket, eseguire la connessione a un server WebSocket, inviare i dati al server e restare in ascolto di una risposta.

Verifichiamo prima che l'URI del server da usare sia valido. Ci connettiamo quindi al WebSocket tramite l'URI e aspettiamo di ricevere la risposta dal server.

Viene prima di tutto controllato l'indirizzo URI per verificare che l'utente abbia passato un indirizzo URI valido. Questo passaggio non è necessario se l'app conosce già l'URI per il server WebSocket.

Viene generata un'eccezione in caso di passaggio di una stringa non valida per l'URI (Uniform Resource Identifier) al costruttore per l'oggetto Windows.Foundation.Uri.

In JavaScript non esiste alcun metodo per analizzare una stringa ed estrarne l'URI. Per intercettare l'eccezione in questo caso, usa un blocco try/catch per racchiudere il codice di costruzione dell'URI.

L'esempio controlla inoltre che lo schema HTTP nell'URI sia WS o WSS, dato che questi sono gli unici schemi supportati da un StreamWebSocket.

Se l'URI ricevuto dall'input dell'utente è valido, l'app si connette al server WebSocket e può inviare e ricevere dati.

Le eccezioni dovute a errori di rete (ad esempio perdita di connettività, errori di connessione e problemi di server e HTTP) possono verificarsi in qualsiasi momento. Questi errori causano la generazione di eccezioni. Se non vengono gestite dall'app, le eccezioni possono causare la chiusura improvvisa dell'intera app da parte del runtime. Per le chiamate della maggior parte dei metodi di rete asincroni devi quindi scrivere codice per gestire le eccezioni. Quando si verifica un'eccezione, è possibile riprovare a eseguire il metodo di rete per tentare di risolvere il problema. In altri casi, si può prevedere che l'app continui a funzionare senza connessione di rete usando i dati precedentemente memorizzati nella cache. Per altre informazioni sulla gestione delle eccezioni di rete, vedi Gestione di eccezioni nelle app di rete.

Nota Potrebbe essere utile mostrare messaggi all'utente o scrivere nel registro che si sono verificati determinati eventi, ad esempio quando viene effettuata una connessione o si verifica un errore. L'esempio chiama una funzione displayStatus che devi implementare per la tua app.

Nota Nei passaggi successivi verranno definite le funzioni writeOutgoing() e readIncoming() per eseguire le operazioni di scrittura e lettura.

Apri la cartella js. Apri il file con estensione js che stai usando e aggiungi il codice seguente.


// Define some variables we will use
var streamWebSocket;
var dataWriter;
var dataReader;
// The data to send
var data = "Hello World";
var countOfDataSent;
var countOfDataReceived;

function start() {
   if (streamWebSocket) {
      // The WebSocket is already running. Go ahead and immediately return,  
      // or display a message that indicates that it is running.
      return;
   }

   var webSocket = new Windows.Networking.Sockets.StreamWebSocket();
   webSocket.onclosed = onClosed;

   // WebSocket server to test connections
   // If the scheme is wss:, then the server will
   // echo back what it receives
   var uriString = "wss://echo.websocket.org";

   // We might get the uriString from the user so
   // we need to check that we have a valid URI
   var serverUri;
   try {
      serverUri = new Windows.Foundation.Uri(uriString);
      }
   catch (Exception) {
      displayStatus("Invalid URI, please re-enter a valid URI.");
      return;
   }

   if (serverUri.schemeName != "ws" && serverUri.schemeName != "wss") {
      displayStatus("Only 'ws' and 'wss' schemes supported. Please re-enter URI");
      return;
   }

   // Asynchronous networking methods can throw execptions
   webSocket.connectAsync(uri).done(function () {
      diaplayStatus("Connected");

      streamWebSocket = webSocket;
      dataWriter = new Windows.Storage.Streams.DataWriter(webSocket.outputStream);
      dataReader = new Windows.Storage.Streams.DataReader(webSocket.inputStream);
      // When buffering, return as soon as any data is available.
      dataReader.inputStreamOptions = Windows.Storage.Streams.InputStreamOptions.partial;
      countOfDataSent = 0;
      countOfDataReceived = 0;

      // Continuously send data to the server
      writeOutgoing();

      // Continuously listen for a response
      readIncoming();

   }, function (error) {
      var errorStatus = Windows.Networking.Sockets.WebSocketError.getStatus(error.number);
      if (errorStatus === Windows.Web.WebErrorStatus.cannotConnect ||
         errorStatus === Windows.Web.WebErrorStatus.notFound ||
         errorStatus === Windows.Web.WebErrorStatus.requestTimeout) {
         displayStatus("Cannot connect to the server");
      } else {
         displayStatus("Failed to connect: " + getError(error));
      }
   });
}

2. Inviare dati in uscita

Il codice mostrato in questa sezione consente di inviare dati a un server con un oggetto WebSocket.

Nota La funzione writeError() verrà definita in un passaggio successivo.

Aggiungi il codice seguente al file con estensione js per definire la funzione writeOutgoing().

function writeOutgoing() {
   try {
      var size = dataWriter.measureString(data);
      countOfDataSent += size;

      dataWriter.writeString(data);
      dataWriter.storeAsync().done(function () {
         // Add a 1 second delay so the user can see what's going on.
         setTimeout(writeOutgoing, 1000);
      }, writeError);
   }
   catch (error) {
      displayStatus("Sync write error: " + getError(error));
   }
}

3. Leggere dati in entrata

Il codice mostrato in questa sezione consente di leggere dati da un server con un oggetto WebSocket.

Nota La funzione readError() verrà definita in un passaggio successivo.

Aggiungi il codice seguente al file con estensione js per definire la funzione readIncoming().


function readIncoming(args) {
   // Buffer as much data as you require for your protocol.
   dataReader.loadAsync(100).done(function (sizeBytesRead) {
      countOfDataReceived += sizeBytesRead;

      var incomingBytes = new Array(sizeBytesRead);
      dataReader.readBytes(incomingBytes);

      // Do something with the data.
      // Alternatively you can use DataReader to read out individual booleans,
      // ints, strings, etc.

      // Start another read.
      readIncoming();
   }, readError);
}

4. Aggiungere il codice di gestione degli errori

Per le chiamate della maggior parte dei metodi di rete asincroni devi quindi scrivere codice per gestire le eccezioni. Il gestore delle eccezioni può recuperare ulteriori dettagli sulla causa in modo da comprendere meglio l'errore e prendere le decisioni appropriate. Per ulteriori informazioni, vedi Come gestire le eccezioni nelle app di rete.

Aggiungi il codice al file con estensione js per definire le funzioni writeError() e readError() per registrare rispettivamente gli errori di scrittura e lettura (o eseguire altre azioni). L'implementazione specifica usata può variare.
```
function writeError(error) {
   // Add your code to handle write errors.
}

function readError(error) {
   // Add your code to handle read errors.
}
```

5. Registrare il callback per l'evento StreamWebSocket.Closed

Quando si verifica l'evento StreamWebSocket.Closed, il callback registrato viene chiamato e riceve i dati da WebSocketClosedEventArgs per chiudere la connessione.

Aggiungi il codice seguente al file con estensione js.

function onClosed(args) {
   // You can add code to log or display the code and reason
   // for the closure (stored in args.code and args.reason)
   if (streamWebSocket) {
      streamWebSocket.close();
   }
   streamWebSocket = null;
}

Riepilogo e passaggi successivi

In questa esercitazione abbiamo esaminato come eseguire la connessione a un server WebSocket e come inviare e ricevere dati usando un elemento StreamWebSocket.

Per un esempio completo sull'invio e la ricezione di dati mediante WebSocket, vedi l'esempio di WebSocket.