felipehuggler.com

Assim como o XmlHttpRequest, webSocket eh um componente acessível por Javascript disponível em todo browser que implementa HTML 5. Já existe no Google Chrome 4.x, no Safari/WebKit e no Firefox 3.7.

Com o WebSocket é possível abrir uma conexão HTTP, mantê-la aberta, ?escutar? seu stream por novas mensagens e reagir a elas via javascript e inclusive enviar novos dados (como uma nova mensagem), tudo na mesma conexão, sem precisar passar pelo peso da rotina de abrir conexão, enviar/receber dados, fechar conexão e repetir daqui a alguns segundos. Ou seja, a vantagem é diminuir a quantidade enorme de conexões batendo no servidor para uma ordem de grandeza menos.

Obviamente vai demorar um bom tempo para aparecer no IE, mas relaxa, existe uma alternativa muito interessante chamada Web-Socket.js. Ela simula a mesma API do WebSocket padrão (e no Chrome ela nem se ativa), mas usa um pequeno Flash como ponte para criar a conexão HTTP permanente, com os mesmos eventos.

Interessante neh, ficou curioso? Entaum vambora!

O construtor: WebSocket

O WebSocket (url, protocolo) construtor leva um ou dois argumentos. O primeiro argumento, URL, especifica a URL para o qual deseja se conectar. A, segundo o protocolo, se presente, especifica um sub-protocolo que o servidor deve oferecer suporte para a conexão seja bem sucedida.

Quando o WebSocket() é invocado, executa as seguintes etapas:

1.  Parse da url, para obter host, porta, nome do recurso, e seguro. Se falhar a conexao, lancara um SYNTAX_ERR.
2. Se a conexao falhar devido bloqueio do acesso a porta, lancara um SECURITY_ERR. Por exemplo porta 80 ou porta 443.
3. Se o protocolo estiver presente, contém a seqüência de caracteres com pontos de código Unicode, então lance um SYNTAX_ERR.
4. Deixe origem ser a serialização ASCII da origem do script que invocou o WebSocket () construtor, convertida em minúsculas ASCII.

Retorna uma nova WebSocket objeto, e prosseguir com estas etapas em segundo plano (sem bloquear scripts).

Estabelecer uma conexão Socket Web para um host host, na porta da porta (se foi especificado), de origem, com a bandeira seguro, com o nome do recurso como o nome do recurso, e com o protocolo como o protocolo (se houver).

bufferedAmount:

O atributo bufferedAmount deve retornar o número de bytes que foram enfileiradas, mas ainda não foi enviada.

readyState:

O atributo readyState representa o estado da conexão. Pode ter os seguintes valores:

CONNECTING (valor numérico 0)
A conexão ainda não foi estabelecida.

OPEN (valor numérico 1)
A Web Socket conexão é estabelecida e comunicação é possível.

CLOSED (valor numérico 2)
A conexão foi fechada ou não pôde ser aberto.

Quando o objeto é criado a sua readyState deve ser definida para (0)

send:

O metodo send(dados) transmite dados usando a conexão. Se o readyState atributo é CONNECTING, deve lancar um INVALID_STATE_ERR.
O método deve retornar true se a conexão ainda está estabelecida (e os dados foram enviados com sucesso ou em fila), ou falso se a conexão é fechada.

close:

O metodo close() deve fechar a conexão WebSocket, se houver, e mudar o readyState do valor do atributo para CLOSED(2). Se a conexão já está fechada, ele deve fazer nada.

Manipuladores de evento:

onopen:
Quando a conexao eh estabelecida, nesse momento o agente altera o readyState para OPEN(1)

onmessage:
QUando uma mensagem eh recebida, o agente usa a interface MessageEvent. Verifica se a conexao esta ativa e encaminha os dados.

onerror:
Quando uma conexao WebSocket eh detectada um erro.

onclose:
QUando o socket eh fechada. O agente altera o readyState para CLOSED(2), e em seguida lanca para o evento.

//*******************************************

INTERFACE:

[Constructor(in DOMString url, in optional DOMString protocols)]
[Constructor(in DOMString url, in optional DOMString[] protocols)]
interface WebSocket {
  readonly attribute DOMString url;

  // ready state
  const unsigned short CONNECTING = 0;
  const unsigned short OPEN = 1;
  const unsigned short CLOSING = 2;
  const unsigned short CLOSED = 3;
  readonly attribute unsigned short readyState;
  readonly attribute unsigned long bufferedAmount;

  // networking
           attribute Function onopen;
           attribute Function onmessage;
           attribute Function onerror;
           attribute Function onclose;
  readonly attribute DOMString protocol;
  void send(in DOMString data);
  void close();
};
WebSocket implements EventTarget

//*******************************************

Vamos ao exemplo:

Javascript bem simples

        var sock;
        function connectToServer() {
            try {
                sock = new WebSocket("ws://localhost:8181/websock");
                sock.onopen = sockOpen;
                sock.onerror = sockError;
                sock.onclose = sockClosed;
                sock.onmessage = sockMessage;
            } catch (e) {
                log("error:" + e);
            }
        }

        function sockOpen() {
            log("connected");
        }

        function sockError(error, p2) {
            log("socket error!");
        }

        function sockClosed() {
            log("socket closed");
        }

        function sockMessage(event) {
            log("Received message: " + event.data);
        }

        function log(msg) {
            var txtLog = document.getElementById("log");
            txtLog.value += "\r\n" + msg;
        }

Coloquei um video de demonstrando a aplicacao rodando na minha maquina. Eh isso galera, bons estudos!!!