diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:47:54 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:47:54 +0100 |
commit | 30feb96f6084a2fb976a24ac01c1f4a054611b62 (patch) | |
tree | d73194ae27b60156ff0ca54013c8c4ad8519f10a /files/it/web/api/websockets_api/writing_websocket_client_applications | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-30feb96f6084a2fb976a24ac01c1f4a054611b62.tar.gz translated-content-30feb96f6084a2fb976a24ac01c1f4a054611b62.tar.bz2 translated-content-30feb96f6084a2fb976a24ac01c1f4a054611b62.zip |
unslug it: move
Diffstat (limited to 'files/it/web/api/websockets_api/writing_websocket_client_applications')
-rw-r--r-- | files/it/web/api/websockets_api/writing_websocket_client_applications/index.html | 184 |
1 files changed, 184 insertions, 0 deletions
diff --git a/files/it/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/it/web/api/websockets_api/writing_websocket_client_applications/index.html new file mode 100644 index 0000000000..a146730537 --- /dev/null +++ b/files/it/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -0,0 +1,184 @@ +--- +title: Writing WebSocket client applications +slug: WebSockets/Writing_WebSocket_client_applications +tags: + - WebSocket +translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications +--- +<p><span style="line-height: 1.5;">WebSockets è una tecnologia, basata sul protocollo ws, che rende possibile stabilire una connessione continua tra un client e un server. Un client websocket può essere il browser dell'utente, ma il protocollo è indipendente dalla piattaforma, così com'è indipendente il protocollo <code>http</code>.</span></p> + +<div class="note"><strong>Note:</strong> Abbiamo un esempio funzionante di un sistema chat/server utilizzato per gli snippet di codice che saranno resi disponibili una volta che la nostra infrastruttura sarà pronta per ospitare gli esempi di WebSocket propriamente.</div> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Creare_un_oggetto_WebSocket">Creare un oggetto WebSocket</h2> + +<p>Per rendere possibile la comunicazione utilizzando il protocollo WebSocket avrai bisogno di creare un oggetto <a href="/en/WebSockets/WebSockets_reference/WebSocket">WebSocket</a>; questo proverà automaticamente a connettersi con il server.</p> + +<p>Il costruttore del WebSocket accetta due parametri, di cui il secondo opzionale:</p> + +<pre>WebSocket WebSocket( + in DOMString url, + in optional DOMString protocols +); +</pre> + +<dl> + <dt><code>url</code></dt> + <dd>Lo URL a cui connettersi, questo dovrebbe essere lo URL al quale il server WebSocket risponderà.</dd> + <dt><code>protocols</code> {{ optional_inline() }}</dt> + <dd>Una stringa con un singolo protocollo o un array di stringhe di protocolli. Queste stringhe sono utilizzate per indicare i sotto protocolli così che il singolo server possa implementare più sotto protocolli WebSocket (per esempio, potresti volere che un server sia capace di gestire diversi tipi di interazioni dipendentemente dal protocollo specificato). Se non specifighi il protocollo, verrà usata una stringa vuota.</dd> +</dl> + +<p>Il costruttore può lanciare un eccezione:</p> + +<dl> + <dt><code>SECURITY_ERR</code></dt> + <dd>La porta a cui la connessione sta provado ad accedere è bloccata.</dd> +</dl> + +<dl> +</dl> + +<h3 id="Errori_di_connessione">Errori di connessione</h3> + +<p>Se accade un errore durante un tentativo di connessione, prima un semplice evento con il nome "error" è inviato all'oggetto <code><a href="/en/WebSockets/WebSockets_reference/WebSocket">WebSocket</a></code> (invocando così il suo gestore <code>onerror</code>), e poi <code><a href="/en/WebSockets/WebSockets_reference/CloseEvent">CloseEvent</a></code> (invocando così il gestore <code>onclose</code>) per indicare la ragione della chiusura di connessione.</p> + +<p>Da Firefox 11 tuttavia, è tipico ricevere un errore descrittivo nella console della piattaforma Mozilla e un codice di chiusura definito in <a href="http://tools.ietf.org/html/rfc6455#section-7.4">RFC 6455, Section 7.4 </a>attraverso <a href="/en/WebSockets/WebSockets_reference/CloseEvent">CloseEvent</a>.</p> + +<h3 id="Esempi">Esempi</h3> + +<p>Questo semplice esempio crea un nuovo WebSocket, connettendosi al server all'indirizzo <code><span class="nowiki">ws://www.example.com/socketserver</span></code>. Un protocollo chiamato "protocolOne" è presente nella richiesta per il socket in esempio anche se omesso.</p> + +<pre class="brush: js">var esempioSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne"); +</pre> + +<p>Alla restituzione, <code>esempioSocket.readyState</code> è <code>CONNECTING</code>. Il <code>readyState</code> diventerà <code>OPEN</code> quando la connessione sarà abilitata a trasmettere dati.</p> + +<p>Se vuoi aprire una connessione e essere flessibile sui protocolli che supporti, puoi specificare un array di protocolli:</p> + +<pre class="brush: js">var esempioSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]); +</pre> + +<p>Quando la connessione è stabilita (quindi <code>readyState</code> è <code>OPEN</code>), <code>esempioSocket.protocol</code> ti dirà quale protocollo il server ha selezionato.</p> + +<p>Negli esempi qui sopra, <code>ws</code> sostituisce <code>http</code>, così come <code>wss </code>sostituisce <code>https</code>. Per stabilire un <code>WebSocket</code> ci si basa sul <a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">meccanismo di upgrade HTTP</a>, così la richiesta per l'aggiornamento del protocollo è implicita quando richiamiamo il server HTTP come <code>ws://www.example.com</code> oppure <code>wss://www.example.com</code>.</p> + +<h2 id="Inviare_dati_al_server">Inviare dati al server</h2> + +<p>Una volta stabilita la connessione puoi trasmettere dati al server. Per farlo, chiama il metodo <code><a href="/en/WebSockets/WebSockets_reference/WebSocket#send()">send()</a> </code>dell'oggetto WebSocket per ogni messaggio che vuoi inviare:</p> + +<pre class="brush: js">esempioSocket.send("Ecco del testo che il server sta aspettando di ricevere!"); +</pre> + +<p>Puoi inviare dati come una stringa, {{ domxref("Blob") }} o un <code><a href="/en/JavaScript_typed_arrays/ArrayBuffer">ArrayBuffer</a></code>.</p> + +<div class="note"><strong>Note:</strong> Prima della versione 11, Firefox supportava solamente l'invio di dati come stringa.</div> + +<p>Stabilire una connessione è un'operazione di natura asincrona e quindi incline a errori. Chiamare il metodo <code>send() </code>immediatamente dopo la creazione del <code>WebSocket</code> non ne implica il successo. Possiamo assicurarci che l'invio di dati venga fatto dopo l'avvenuta connessione con un gestore <code>onopen</code>:</p> + +<pre class="brush: js">esempioSocket.onopen = function (event) { + esempioSocket.send("Ecco del testo che il server sta aspettando di ricevere!"); +}; +</pre> + +<h3 id="Usare_JSON_per_trasmettere_oggetti">Usare JSON per trasmettere oggetti</h3> + +<p>Una cosa utile che puoi fare è di utilizzare <a href="/en/JSON">JSON</a> per inviare dati ragionevolmente complessi al server. Per esempio, un programma di chat puoi interagire con il server utilizzando pacchetti di dati JSON-incapsulati:</p> + +<pre class="brush: js">// Invia del testo a tutti gli utenti tramite il server +function sendText() { + // Costruisci un oggetto msg contenente i dati di cui il server ha bisogno per processare il messaggio dalla chat del client. + var msg = { + type: "message", + text: document.getElementById("text").value, + id: clientID, + date: Date.now() + }; + + // Invia l'oggetto msg formattato come una stringa JSON. + esempioSocket.send(JSON.stringify(msg)); + + // Togli il testo dall'elemento di input, pronto a ricevere la prossima linea di testo dall'utente. + document.getElementById("text").value = ""; +} +</pre> + +<h2 id="Ricevere_messaggi_dal_server">Ricevere messaggi dal server</h2> + +<p>WebSockets è una API dipendente dagli eventi; quando i messaggi sono ricevuti, un evento "message" è inviato alla funzione <code>onmessage</code>. Per iniziare a ascoltare per la ricezione di dati puoi fare così:</p> + +<pre class="brush: js">esempioSocket.onmessage = function (event) { + console.log(event.data); +} +</pre> + +<h3 id="Ricevere_e_interpretare_oggetti_JSON">Ricevere e interpretare oggetti JSON</h3> + +<p>Prendiamo in considerazione l'applicazione chat sul client richiamata precedentemente in {{ anch("Usare JSON per trasmettere oggetti") }}. Ci sono diversi tipi di pacchetti di dati che il client potrebbe ricevere, come:</p> + +<ul> + <li>Login handshake</li> + <li>Messaggio di testo</li> + <li>Aggiornamenti lista utenti</li> +</ul> + +<p>Il codice che interpreta questi messaggi in arrivo potrebbe assomigliare a questo:</p> + +<pre class="brush: js">esempioSocket.onmessage = function(event) { + var f = document.getElementById("chatbox").contentDocument; + var text = ""; + var msg = JSON.parse(event.data); + var time = new Date(msg.date); + var timeStr = time.toLocaleTimeString(); + + switch(msg.type) { + case "id": + clientID = msg.id; + setUsername(); + break; + case "username": + text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>"; + break; + case "message": + text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>"; + break; + case "rejectusername": + text = "<b>Your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>" + break; + case "userlist": + var ul = ""; + for (i=0; i < msg.users.length; i++) { + ul += msg.users[i] + "<br>"; + } + document.getElementById("userlistbox").innerHTML = ul; + break; + } + + if (text.length) { + f.write(text); + document.getElementById("chatbox").contentWindow.scrollByPages(1); + } +}; +</pre> + +<p>Qui utilizziamo<code><a href="/en/JavaScript/Reference/Global_Objects/JSON/parse"> JSON.parse() </a></code>per convertire l'oggetto JSON all'oggetto originale, poi esaminiamo e agiamo sui suoi contenuti.</p> + +<h3 id="Formato_dati_testo">Formato dati testo</h3> + +<p>Il testo ricevuto attraverso una connessione WebSocket è in formato UTF-8.</p> + +<p>Prima di Gecko 9.0 {{ geckoRelease("9.0") }}, alcuni non-caratteri in UTF-8 valido causavano la chiusura della connessione. Adesso Gecko permette questi valori.</p> + +<h2 id="Chiudere_la_connessione">Chiudere la connessione</h2> + +<p>Quando hai finito di usare la connessione WebSocket, chiama il metodo <code><a href="/en/WebSockets/WebSockets_reference/WebSocket#close()">close() </a></code>del WebSocket:</p> + +<pre class="brush: js">esempioSocket.close(); +</pre> + +<p>Potrebbe essere utile esaminare l'attributo<code> bufferedAmount </code>prima di provare a chiudere la connessione per assicurarsi che non ci siano dati che devono essere ancora trasmessi al network.</p> + +<h2 id="Considerazioni_di_sicurezza">Considerazioni di sicurezza</h2> + +<p>I WebSockets non dovrebbero essere usati in un ambiente di contenuti misti; non dovresti aprire connessioni non sicure da una pagina che carica attraverso HTTPS o viceversa. Alcuni browser lo vietano esplicitamente, compreso Firefox 8 e superiore.</p> |