HTML5 - WebSockets

WebSockets é uma tecnologia de comunicação bidirecional de próxima geração para aplicativos da web que opera em um único soquete e é exposta por meio de uma interface JavaScript em navegadores compatíveis com HTML 5.

Depois de obter uma conexão Web Socket com o servidor web, você pode enviar dados do navegador para o servidor chamando um send() método e receber dados do servidor para o navegador por um onmessage manipulador de eventos.

A seguir está a API que cria um novo objeto WebSocket.

var Socket = new WebSocket(url, [protocal] );

Aqui, o primeiro argumento, url, especifica o URL ao qual se conectar. O segundo atributo, protocolo, é opcional e, se presente, especifica um subprotocolo que o servidor deve suportar para que a conexão seja bem-sucedida.

Atributos WebSocket

A seguir estão os atributos do objeto WebSocket. Assumindo que criamos o objeto Socket conforme mencionado acima -

Sr. Não.	Atributo e descrição
1	Socket.readyState O atributo readonly readyState representa o estado da conexão. Pode ter os seguintes valores - Um valor de 0 indica que a conexão ainda não foi estabelecida. Um valor de 1 indica que a conexão foi estabelecida e a comunicação é possível. Um valor 2 indica que a conexão está passando pelo handshake de fechamento. Um valor de 3 indica que a conexão foi fechada ou não pôde ser aberta.
2	Socket.bufferedAmount O atributo readonly bufferedAmount representa o número de bytes de texto UTF-8 que foram enfileirados usando o método send ().

Eventos WebSocket

A seguir estão os eventos associados ao objeto WebSocket. Assumindo que criamos o objeto Socket conforme mencionado acima -

Evento	Manipulador de Eventos	Descrição
abrir	Socket.onopen	Este evento ocorre quando a conexão de soquete é estabelecida.
mensagem	Socket.onmessage	Este evento ocorre quando o cliente recebe dados do servidor.
erro	Socket.onerror	Este evento ocorre quando há algum erro na comunicação.
Fechar	Socket.onclose	Este evento ocorre quando a conexão é fechada.

Métodos WebSocket

A seguir estão os métodos associados ao objeto WebSocket. Assumindo que criamos o objeto Socket conforme mencionado acima -

Sr. Não.	Método e Descrição
1	Socket.send() O método send (data) transmite dados usando a conexão.
2	Socket.close() O método close () seria usado para encerrar qualquer conexão existente.

Exemplo WebSocket

Um WebSocket é um soquete TCP bidirecional padrão entre o cliente e o servidor. O soquete começa como uma conexão HTTP e então "atualiza" para um soquete TCP após um handshake HTTP. Após o handshake, qualquer um dos lados pode enviar dados.

Código HTML e JavaScript do lado do cliente

No momento em que este tutorial foi escrito, havia apenas alguns navegadores da web com suporte à interface WebSocket (). Você pode tentar o exemplo a seguir com a versão mais recente do Chrome, Mozilla, Opera e Safari.

<!DOCTYPE HTML>

<html>
   <head>
      
      <script type = "text/javascript">
         function WebSocketTest() {
            
            if ("WebSocket" in window) {
               alert("WebSocket is supported by your Browser!");
               
               // Let us open a web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
				
               ws.onopen = function() {
                  
                  // Web Socket is connected, send data using send()
                  ws.send("Message to send");
                  alert("Message is sent...");
               };
				
               ws.onmessage = function (evt) { 
                  var received_msg = evt.data;
                  alert("Message is received...");
               };
				
               ws.onclose = function() { 
                  
                  // websocket is closed.
                  alert("Connection is closed..."); 
               };
            } else {
              
               // The browser doesn't support WebSocket
               alert("WebSocket NOT supported by your Browser!");
            }
         }
      </script>
		
   </head>
   
   <body>
      <div id = "sse">
         <a href = "javascript:WebSocketTest()">Run WebSocket</a>
      </div>
      
   </body>
</html>

Instalar pywebsocket

Antes de testar o programa cliente acima, você precisa de um servidor que suporte WebSocket. Baixe mod_pywebsocket-xxxtar.gz de pywebsocket que visa fornecer uma extensão Web Socket para Apache HTTP Server e instale-o seguindo estas etapas.

Descompacte e descompacte o arquivo baixado.
Ir para dentro pywebsocket-x.x.x/src/ diretório.
$ python setup.py build
$ sudo python setup.py install
Em seguida, leia o documento por -
- $ pydoc mod_pywebsocket

Isso o instalará em seu ambiente Python.

Inicie o servidor

Vou ao pywebsocket-x.x.x/src/mod_pywebsocket pasta e execute o seguinte comando -

$sudo python standalone.py -p 9998 -w ../example/

Isso iniciará o servidor ouvindo na porta 9998 e usará o handlers diretório especificado pela opção -w onde nosso echo_wsh.py reside.

Agora, usando o navegador Chrome, abra o arquivo html que você criou no início. Se o seu navegador oferecer suporte a WebSocket (), você receberá um alerta indicando que seu navegador oferece suporte a WebSocket e, finalmente, ao clicar em "Executar WebSocket", você receberá uma mensagem de adeus enviada pelo script do servidor.