WebSockets - Abrindo conexões

Depois que uma conexão for estabelecida entre o cliente e o servidor, o evento open é disparado a partir da instância do Web Socket. É chamado de handshake inicial entre cliente e servidor.

O evento, que é gerado assim que a conexão é estabelecida, é chamado de onopen. Criar conexões Web Socket é muito simples. Tudo que você precisa fazer é ligar para oWebSocket constructor e passe a URL do seu servidor.

O código a seguir é usado para criar uma conexão Web Socket -

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

Assim que a conexão for estabelecida, o evento open será disparado em sua instância do Web Socket.

onopen refere-se ao handshake inicial entre o cliente e o servidor que levou ao primeiro negócio e o aplicativo da web está pronto para transmitir os dados.

O seguinte snippet de código descreve a abertura da conexão do 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”;
}

É uma boa prática fornecer feedback apropriado aos usuários que aguardam o estabelecimento da conexão do Web Socket. No entanto, sempre é notado que as conexões do Web Socket são comparativamente rápidas.

A demonstração da conexão do Web Socket estabelecida é documentada no URL fornecido - https://www.websocket.org/echo.html

Um instantâneo do estabelecimento da conexão e resposta ao usuário é mostrado abaixo -

O estabelecimento de um estado aberto permite a comunicação full duplex e a transferência de mensagens até que a conexão seja encerrada.

Exemplo

Construindo o arquivo 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>

O resultado será o seguinte -

O arquivo HTML5 e JavaScript acima mostra a implementação de dois eventos do Web Socket, a saber -

onLoad que ajuda na criação do objeto JavaScript e inicialização da conexão.
onOpen estabelece conexão com o servidor e também envia o status.