No post passado, mostrei como é a criação de um chat com NodeJs e Socket.io. O chat é um bom e simples exemplo de como trabalhar com Sockets e aplicações Web conectadas.
Não vou revisar os conceitos que já passei no post anterior, então recomendo que leia-o antes.
https://andrebaltieri.wordpress.com/2015/07/09/criando-um-chat-com-nodejs-e-socket-io/
Pacotes necessários
Quem me conhece sabe que não gosto dos templates padrões que o ASP.NET tem, vem muito lixo junto! Então, para este projeto vamos usar um Empty Web Application, e adicionar os seguintes pacotes.
- Install-Package Microsoft.Owin.Host.SystemWeb
- Install-Package Microsoft.Owin.Cors
- Install-Package Microsoft.AspNet.SignalR.SelfHost
- Install-Package Microsoft.AspNet.SignalR.JS
Sim, vamos utilizar Owin como base, já que seu pipeline é bem mais reduzido e só precisamos do SignalR. O último pacote são os Scripts para front-end. Neste exemplo, deixarei o front/back no mesmo projeto, mas o ideal seria separá-los. Eu mostrarei onde eles se referenciam.
Criando o backend
Com a aplicação criada, crie uma nova classe chamada “Startup.cs” na raíz da aplicação (É o padrão do Owin) com o seguinte conteúdo.
Pronto, tudo que você precisa para o SignalR funcionar é isto! Tão simples quanto o Node/Socket.io.
O SignalR trabalha com um conceito de Hubs ao invés dos convencionais Controllers do MVC/WebAPI. Os Hubs nada mais são do que classes que herdam de uma classe base chamada “Hub”.
Nesta classe você pode criar seus métodos, receber seus parâmetros e enviar as mensagens para grupos ou todos os usuários conectados. Para nosso simples chat, vamos adicionar um Hub como o abaixo, chamado de “ChatHub.cs”. Para organizar melhor, criei uma pasta chamada “Hubs” na raiz da aplicação.
No exemplo acima, na linha cinco temos a herança da classe base que nos permite utilizar a variável “Clients” da linha nove.
Criei um método “Send” que não retorna nada e espera uma mensagem do tipo string como parâmetro. Neste método, utilizo o “Clients.All.addMessage(message)” para enviar esta mensagem para todos os usuários conectados.
Se notarmos, o “All” é um tipo dinâmico, o que significa que podemos colocar qualquer valor depois dele… Este nome “addMessage” será a função JavaScript a ser disparada no cliente. Então, se mudar aqui, tem que mudar lá 🙂
E simples assim nosso backend está pronto!
Frontend
Para trabalhar no frontend, eu criei um arquivo “index.html” na raíz da aplicação e utilizei o mesmo conteúdo do “index.html” do post passado, alterado apenas os Scripts.
Assim que rodamos nossa aplicação SignalR, um endereço fica disponível em nosso Browser, contendo os scripts dos nossos Hubs (http://localhost:PORTA/signalr/hubs). Temos que incluir o jQuery, o jQuery.SignalR e também esta URL que o SignalR nos gera. Caso você esteja hospedando sua aplicação em outro endpoint, você teria que alterar esta URL para apontar para ele.
Como estou rodando o back/front no mesmo caminho, os locais em amarelo se iniciam da raiz. Caso sua aplicação estivesse em outra porta ou outro domínio você precisaria alterar estes pontos.
Assim como o Socket.io, o primeiro passo é se conectar com o servidor, que é feito através do “$.connection.hub.url” na linha seis.
Com a conexão aberta, você precisa da instância do Hub (Linha sete) que você vai utilizar, que no nosso caso é o “ChatHub”. É importante salientar que há uma conversão de nomes aqui. No C# normalmente utilizamos a primeira letra em maiúscula na criação das classes, métodos e propriedades públicas, no JavaScript não. Sendo assim, nosso “ChatHub” se torna “chatHub”.
Lembra do método “addMessage”? Pois é ele está disponível agora no objeto “chat” (Linha nove), e como ele esperava uma mensagem como parâmetro, na criação da sua função declaramos uma variável para representar este valor (… = function(message){…).
Ao adicionada uma mensagem, esta função será chamada e assim temos na linha dez a adição da mensagem na tela.
Para finalizar, ao clicar no botão enviar, temos o “chat.server.send” que representa o método “Send” criado no C# sendo chamado, e enviamos a mensagem para ele, que por sua vez envia a mensagem para todos os clientes conectados.
Simples né 🙂
O código completo deste exemplo você encontra aqui:
https://github.com/andrebaltieri/signalr-chat
Abraços,
@andrebaltieri 