Archive | maio 2013

WebSockets com HTML5 e Fleck

Bom dia, boa tarde e boa noite jovens. Hoje criaremos um servidor WebSocket e um cliente para consumi-lo, utilizando HTML5 no cliente e C# com a biblioteca Fleck no servidor.

Mas afinal, o que é um WebSocket? Segundo a nossa duvidosa Wikipédia portuguesa:

WebSocket é uma tecnologia que permite a comunicação bidirecional por canais full-duplex sobre um único soquete Transmission Control Protocol(TCP). Ele é projetado para ser executado em browsers e servidores web que suportem o HTML5, mas pode ser usado por qualquer cliente ou servidor de aplicativos.

A tecnologia WebSocket permite criar um único canal de comunicação entre o Cliente e Servidor, e permite o Servidor mandar requisições para o cliente, e não apenas o inverso, como ocorre normalmente.

Vamos começar criando o servidor WebSocket. Estarei utilizando o Visual Studio 2012 para isso, mas irá funcionar perfeitamente no 2010. Primeiramente, vamos criar um projeto Console Application.

Criando o Projeto

Agora, para criar o servidor WebSocket, utilizarei o Fleck, biblioteca que implementa para nós o WebSocket. Ele pode ser baixado via Nuget, ou digitando o comando Install-Package Fleck no Package Manager Console.

O Fleck é bem simples e objetivo. O que precisamos fazer é implementar os métodos onOpen, onClose e onMessage do servidor.

websocketserver

Ao criar o objeto webSocket, é preciso defiinir a URL do serviço. Também criamos uma lista de Sockets, para armazenarmos todos os clients. No método onStart, incluimos o Socket que acabou de conectar na lista e no onClose retiramos ele. No método onMessage, inserimos a rotina que será executada ao recebermos uma requisição. Neste caso, ao receber uma mensagem, mandamos a mensagem com seu conteúdo para todos os clients conectados.

Agora, na parte Client:webSocketClient

Aqui, temos os mesmo métodos onOpen, onClose e onMessage. Criamos a conexão com o servidor no momento que instanciamos o WebSocket. Observe que a URL passada como parâmetro é a mesma na URL com que criamos o servidor WebSocket.

Com tudo pronto, já podemos testar nosso servidor e client. Para isso, é preciso executar o projeto do servidor WebSocket para então acessarmos nossa página HTML. O resultado:

resultado

Importante ressaltar que o client deve estar hospedado em um servidor. Se for executado localmente, a conexão não ocorrerá.

Projeto utilizado neste post se encontra no GitHub.

Anúncios