WebSocket - Apertura delle connessioni

Una volta stabilita una connessione tra il client e il server, l'evento open viene generato dall'istanza di Web Socket. Viene chiamato come handshake iniziale tra client e server.

L'evento, che viene generato una volta stabilita la connessione, è chiamato onopen. La creazione di connessioni Web Socket è davvero semplice. Tutto quello che devi fare è chiamare ilWebSocket constructor e passa l'URL del tuo server.

Il codice seguente viene utilizzato per creare una connessione Web Socket:

// Create a new WebSocket.
var socket = new WebSocket('ws://echo.websocket.org');

Una volta stabilita la connessione, l'evento aperto verrà attivato sull'istanza di Web Socket.

onopen si riferisce all'handshake iniziale tra client e server che ha portato al primo accordo e l'applicazione web è pronta per trasmettere i dati.

Il frammento di codice seguente descrive l'apertura della connessione del protocollo Web Socket:

socket.onopen = function(event) {
   console.log(“Connection established”);
   // Display user friendly messages for the successful establishment of connection
   var.label = document.getElementById(“status”);
   label.innerHTML = ”Connection established”;
}

È buona norma fornire un feedback appropriato agli utenti in attesa che venga stabilita la connessione Web Socket. Tuttavia, si nota sempre che le connessioni Web Socket sono relativamente veloci.

La demo della connessione Web Socket stabilita è documentata nell'URL fornito - https://www.websocket.org/echo.html

Di seguito è mostrata un'istantanea della creazione della connessione e della risposta all'utente:

L'impostazione di uno stato aperto consente la comunicazione full duplex e il trasferimento di messaggi fino al termine della connessione.

Esempio

Creazione del file client-HTML5.

<!DOCTYPE html>
<html>
   <meta charset = "utf-8" />
   <title>WebSocket Test</title>

   <script language = "javascript" type = "text/javascript">
      var wsUri = "ws://echo.websocket.org/";
      var output;
	
      function init() {
         output = document.getElementById("output");
         testWebSocket();
      }
	
      function testWebSocket() {
         websocket = new WebSocket(wsUri);
			
         websocket.onopen = function(evt) {
            onOpen(evt)
         };
      }
	
      function onOpen(evt) {
         writeToScreen("CONNECTED");
      }
	
      window.addEventListener("load", init, false);
   
   </script>

   <h2>WebSocket Test</h2>
   <div id = "output"></div>

</html>

L'output sarà il seguente:

Il file HTML5 e JavaScript sopra mostra l'implementazione di due eventi di Web Socket, vale a dire:

  • onLoad che aiuta nella creazione di oggetti JavaScript e nell'inizializzazione della connessione.

  • onOpen stabilisce la connessione con il server e invia anche lo stato.