A API WebSocket

O Internet Explorer 10 e os aplicativos da Windows Store em JavaScript adicionam suporte à API WebSocket conforme definido na especificação API WebSocket do W3C (World Wide Web Consortium). A tecnologia WebSockets oferece uma nova API JavaScript do W3C e um protocolo para comunicação bidirecional na Internet. Esse novo protocolo torna mais fácil trabalhar diretamente com formatos de dados fixos e ignora o protocolo HTTP baseado em documento e mais lento.

O protocolo padrão HTTP atual é lento porque precisa solicitar documentos de um servidor e aguardar que o documento seja enviado antes de poder exibir uma página da Web. Com WebSockets, você pode enviar e receber seus dados imediatamente usando texto, matrizes binárias ou blobs.

A API do WebSocket é simples e descomplicada, exigindo pouco código. Você pode tirar proveito facilmente do intercâmbio de dados bidirecional de baixa latência que irá ajudá-lo a criar mais rapidamente jogos online, notificações instantâneas de rede social, exibições em tempo real de informações meteorológicas e de ações, e outros dados oportunos.

Implementando WebSockets

Se você seguir estas etapas, a implementação desta nova tecnologia de intercâmbio de dados será simples:

1. Use um navegador cliente que implemente o protocolo WebSocket.
2. Escreva o código em uma página da Web que crie um websocket cliente.
3. Escreva o código em um servidor Web que responda a uma solicitação do cliente por meio de um websocket.

Use um cliente de WebSocket

Assim como outros navegadores populares, o Internet Explorer 10 também implementa o protocolo WebSocket. Você pode ver o estado atual de suporte do navegador no site caniuse.com.

O protocolo WebSocket, conforme definido no site IETF Tools, usa os esquemas de URL a seguir.


ws://
wss://

Programar código de cliente WebSocket

O código da sua página da Web deve:

1. Inicializar o WebSocket e conectar-se ao servidor.
2. Testar se a conexão teve êxito.
3. Enviar e receber dados.

Veja a seguir o código geralmente usado para definir o URL do WebSocket:


var host = 'ws://example.microsoft.com';

O código a seguir mostra como conectar-se a um WebSocket e depois testar se a conexão teve êxito.


 var host = "ws://sample-host/echo";
 try {
    socket = new WebSocket(host);

    socket.onopen = function (openEvent) {
       document.getElementById("serverStatus").innerHTML = 
          'WebSocket Status:: Socket Open';
    };

 socket.onmessage = function (messageEvent) {

    if (messageEvent.data instanceof Blob) {
    var destinationCanvas = document.getElementById('destination');
    var destinationContext = destinationCanvas.getContext('2d');
    var image = new Image();
    image.onload = function () {
       destinationContext.clearRect(0, 0, 
          destinationCanvas.width, destinationCanvas.height);
       destinationContext.drawImage(image, 0, 0);
    }
    image.src = URL.createObjectURL(messageEvent.data);
 } else {
    document.getElementById("serverResponse").innerHTML = 
       'Server Reply:: ' + messageEvent.data;
    }
 };

 socket.onerror = function (errorEvent) {
    document.getElementById("serverStatus").innerHTML = 
      'WebSocket Status:: Error was reported';
    };

 socket.onclose = function (closeEvent) {
    document.getElementById("serverStatus").innerHTML = 
      'WebSocket Status:: Socket Closed';
    };
 }
  catch (exception) { if (window.console) console.log(exception); }
 }

 function sendTextMessage() {

    if (socket.readyState != WebSocket.OPEN) return;

    var e = document.getElementById("textmessage");
    socket.send(e.value);
 }

 function sendBinaryMessage() {
    if (socket.readyState != WebSocket.OPEN) return;

    var sourceCanvas = document.getElementById('source');

    socket.send(sourceCanvas.msToBlob());
 }    


O código anterior pressupõe que você tenha serverStatus, destination, serverResponse, textmessage e serverData como elementos com IDs em sua página da Web. O resultado da solicitação será exibido na janela do console se as ferramentas para desenvolvedores F12 estiverem em execução. Para enviar dados de mensagem de texto, use o tipo de código a seguir.


var e = document.getElementById("msgText");
socket.send(e.value);

O exemplo de código anterior pressupõe que a mensagem de texto que você deseja enviar esteja em um elemento msgText com ID em sua página da Web. De modo semelhante, você pode usar o evento onmessage para detectar novas mensagens ou enviar uma mensagem para o servidor usando o método de envio. O método send pode ser usado para enviar texto, matrizes binárias ou dados blob.

Programar código de servidor WebSocket

O código de servidor que manipula soquetes pode ser programado em qualquer linguagem de servidor. Seja qual for a linguagem escolhida, você deve programar um código que aceite e devidamente processe solicitações WebSocket.

Programação de WebSocket

O WebSocket fornece um conjunto de objetos, métodos e propriedades que você pode usar na programação de WebSocket.

NomeTipoDescrição
WebSocket objetoFornece o canal bidirecional para o host remoto.
close métodoFecha um WebSocket.
send métodoEnvia dados para um servidor usando um WebSocket.
binaryType propriedadeFormato de dados binários recebido pelo onmessage.
bufferedAmount propriedadeNúmero de bytes de dados enfileirados pelo envio.
extensions propriedadeRelata as extensões selecionadas pelo servidor.
onclose propriedadeManipulador de eventos chamado quando o soquete é fechado.
onerror propriedadeManipulador de eventos chamado quando ocorre um erro.
onmessage propriedadeManipulador de eventos para notificar que uma mensagem foi recebida.
onopen propriedadeManipulador de eventos chamado se o WebSocket se conectar.
protocol propriedadeRelata o protocolo selecionado pelo servidor.
readyState propriedadeRelata o estado da conexão do WebSocket.
url propriedadeRelata o URL atual do soquete.

 

Referência de API

WebSocket API

Postagens no blog do IE

WebSockets no Windows
WebSockets prontos para sites

Especificação

A API WebSocket

Tópicos relacionados

Criando aplicativos Web em tempo real com WebSockets do HTML5
Criando aplicativos Web em tempo real com WebSockets usando IIS, ASP.NET e WCF
Criando aplicativos de soquetes do Tempo de Execução do Windows
Começando com WebSockets no Windows 8
Conhecendo System.Net.WebSockets: um servidor de eco ASP.NET simples
WebSockets: estável e pronto para desenvolvedores

 

 

Mostrar:
© 2014 Microsoft