WebSockets - Abrir conexiones

Una vez que se ha establecido una conexión entre el cliente y el servidor, el evento abierto se dispara desde la instancia de Web Socket. Se llama como el protocolo de enlace inicial entre el cliente y el servidor.

El evento, que se genera una vez que se establece la conexión, se llama onopen. Crear conexiones Web Socket es realmente sencillo. Todo lo que tienes que hacer es llamar alWebSocket constructor y pase la URL de su servidor.

El siguiente código se utiliza para crear una conexión Web Socket:

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

Una vez que se ha establecido la conexión, el evento abierto se activará en su instancia de Web Socket.

onopen se refiere al apretón de manos inicial entre el cliente y el servidor que ha llevado al primer trato y la aplicación web está lista para transmitir los datos.

El siguiente fragmento de código describe la apertura de la conexión del protocolo 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”;
}

Es una buena práctica proporcionar comentarios adecuados a los usuarios que esperan que se establezca la conexión Web Socket. Sin embargo, siempre se observa que las conexiones Web Socket son comparativamente rápidas.

La demostración de la conexión Web Socket establecida está documentada en la URL proporcionada: https://www.websocket.org/echo.html

A continuación se muestra una instantánea del establecimiento de la conexión y la respuesta al usuario:

El establecimiento de un estado abierto permite la comunicación full duplex y la transferencia de mensajes hasta que se termina la conexión.

Ejemplo

Construyendo el archivo cliente-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>

La salida será la siguiente:

El archivo HTML5 y JavaScript anterior muestra la implementación de dos eventos de Web Socket, a saber:

  • onLoad que ayuda en la creación del objeto JavaScript y la inicialización de la conexión.

  • onOpen establece conexión con el servidor y también envía el estado.