Aplicações em tempo real com ASP.NET Core SignalR \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 15 Horas 50 Min 06 Seg Tempo restante da oferta: 15 50 06 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Aplicações em tempo real com ASP.NET Core SignalR [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) [ ASP .NET ](https://www.treinaweb.com.br/blog/categoria/asp-net) [ .NET Core ](https://www.treinaweb.com.br/blog/categoria/net-core) # Aplicações em tempo real com ASP.NET Core SignalR Aprenda como criar uma streaming api utilizando a biblioteca de aplicações em templo real, SignalR. [ Wladimilson M. Nascimento ](https://www.treinaweb.com.br/blog/autor/wladimilson-m-nascimento) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/05103838/SIGNALR.png) No meu [artigo sobre streaming API](https://www.treinaweb.com.br/blog/asp-net-core-criando-uma-streaming-api/), citei que no ASP.NET Core a entrega de dados em tempo real pode ser realizada via SignalR, que é uma biblioteca criada para este fim. Neste artigo vamos conhecê-la em detalhes. ## Na época que isso aqui era só mato… Os protocolos base da internet são baseados em um modelo cliente-servidor síncrono. O cliente envia uma solicitação, o servidor a processa e retorna uma resposta, finalizando a conexão. Neste cenário, criar uma aplicação que possua/necessite de comunicação em tempo real, com acesso assíncrono de um ou mais usuários é algo extremamente complexo. Procurando contornar isso, ao longo do tempo foram surgindo tecnologias/técnicas que permitem a implementação de comunicação em tempo real, como: - WebSockets; - Long Polling; - Server-Sent Events. Entretanto, cada uma possui sua complexidade e limitação técnica. Felizmente, para os desenvolvedores ASP.NET surgiu uma nova opção, o [SignalR](https://dotnet.microsoft.com/apps/aspnet/signalr). [ ![TypeScript - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/typescript.svg) Curso TypeScript - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/typescript-fundamentos) ## SignalR O SignalR é uma biblioteca open source criada em 2011 por David Fowler e Damian Edwards com o intuito de facilitar a implementação de aplicações em tempo real no ASP.NET. Na época da sua criação, o WebSocket havia acabado de ser padronizado, não era popular e não estava disponível em todos os navegadores. Assim, para desenvolver uma aplicação em tempo real, o desenvolvedor precisava decidir se a limitaria apenas a alguns navegadores ou utilizava mais de uma tecnologia/técnica. O SignalR foi criado para resolver este problema. Nos bastidores, ele define qual é o melhor tipo de protocolo, tecnologia ou técnica que a conexão irá utilizar baseado no que o cliente e servidor suportam. Com isso, fornece um endpoint (chamado de *Hub*) que pode enviar e receber mensagens em tempo real. Como é fácil de ser utilizado, rapidamente o SignalR se tornou a principal opção para se desenvolver aplicações em tempo real no ASP.NET. ## Hubs Para abstrair a comunicação entre clientes e servidores, o SignalR fornece um pipeline de auto nível chamado Hub. O SignalR lida com o envio através dos limites da máquina automaticamente, permitindo que clientes chamem os métodos no servidor e vice-versa. É possível passar parâmetros fortemente tipados para os métodos, o que habilita model binding. Para realizar esta comunicação, o SignalR fornece dois protocolos: um baseado em JSON e outro binário, baseado em [MessagePack](https://msgpack.org/). O MessagePack geralmente cria mensagens menores, em comparação com o JSON. O navegador precisa suportar [XHR level 2](https://caniuse.com/#feat=xhr2) para ter suporte ao MessagePack. ## Colocando a mão na massa Para exemplificar o uso do SignalR, vamos alterar a aplicação demostrada no artigo [de streaming API](https://www.treinaweb.com.br/blog/asp-net-core-criando-uma-streaming-api/). Na versão 3.0 do .NET Core, o SignalR foi adicionado na biblioteca padrão, assim para utilizá-lo não é necessário adicionar nenhuma biblioteca externa ao projeto. Inicialmente iremos criar um Hub. Um Hub é uma classe que herda a classe `Hub` do namespace `Microsoft.AspNetCore.SignalR`: ```csharp public class StreamingHub: Hub { //Vazia porque a comunicação será realizada do servidor para o cliente } ``` Como neste exemplo quem irá gerar os eventos é o servidor, não é será necessário definir nenhum método dentro da classe. Para habilitar o SignalR no projeto, é necessário adicioná-lo no método `ConfigureServices` da classe `Startup`: ```csharp public void ConfigureServices(IServiceCollection services) { services.AddControllers(); services.AddSignalR(); } ``` Nesta mesma classe, no método `Configure` é necessário indicar o endpoint do hub que acabamos de definir: ```csharp public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } app.UseDefaultFiles(); app.UseStaticFiles(); app.UseRouting(); app.UseEndpoints(endpoints => { endpoints.MapControllers(); endpoints.MapHub("/streaminghub"); }); } ``` Por fim, no controller é indicado que o Hub será recebido via injeção de dependência: ```csharp private readonly IHubContext _streaming; public TodoController(IHubContext streaming) => _streaming = streaming; ``` Isso permitirá o envio de mensagens pelo servidor. No artigo anterior foi definido que a cada ação do controller uma mensagem era enviada para o endpoint de streaming. Isso é feito no método `WriteOnStream`: ```csharp private async Task WriteOnStream(Item data, string action) { string jsonData = string.Format("{0}\n", JsonSerializer.Serialize(new { data, action })); foreach (var client in _clients) { await client.WriteAsync(jsonData); await client.FlushAsync(); } } ``` Como o nosso Hub irá executar o mesmo procedimento, podemos enviar sua mensagem neste mesmo método: ```csharp private async Task WriteOnStream(Item data, string action) { string jsonData = string.Format("{0}\n", JsonSerializer.Serialize(new { data, action })); //Utiliza o Hub para enviar uma mensagem para ReceiveMessage await _streaming.Clients.All.SendAsync("ReceiveMessage", jsonData); foreach (var client in _clients) { await client.WriteAsync(jsonData); await client.FlushAsync(); } } ``` ## Definindo o cliente Para que um cliente se conecte ao endpoint do hub é necessário utilizar uma biblioteca apropriada. Apenas assim, o SignalR conseguirá determinar qual tipo de protocolo utilizar durante a conexão. Felizmente a Microsoft criou bibliotecas clientes para as mais variadas linguagens: JavaScript, Java, C#, entre outras. Neste exemplo iremos utilizar a biblioteca do JavaScript, que pode ser obtida via NPM (pacote `@aspnet/signalr`), mas aqui irei utilizar a versão CDNJS: ```html Mensagens ``` Por fim, é necessário definir no JavaScript a comunicação com o endpoint (arquivo **main.js**): ```javascript "use strict"; var connection = new signalR.HubConnectionBuilder().withUrl("/streaminghub").build(); connection.on("ReceiveMessage", function (message) { var msg = message.replace(/&/g, "&").replace(//g, ">"); var li = document.createElement("li"); li.textContent = msg; document.getElementById("messagesList").appendChild(li); }); connection.start().then(function () { var li = document.createElement("li"); li.textContent = "Connetado!"; document.getElementById("messagesList").appendChild(li); }).catch(function (err) { return console.error(err.toString()); }); ``` Note que inicialmente é criada uma conexão: ```javascript var connection = new signalR.HubConnectionBuilder().withUrl("/streaminghub").build(); ``` Esta conexão ficará “ouvindo” o evento `ReceiveMessage`: ```javascript connection.on("ReceiveMessage", function (message) { var msg = message.replace(/&/g, "&").replace(//g, ">"); var li = document.createElement("li"); li.textContent = msg; document.getElementById("messagesList").appendChild(li); }); ``` E quando a conexão for aberta isso é informado: ```csharp connection.start().then(function () { var li = document.createElement("li"); li.textContent = "Connetado!"; document.getElementById("messagesList").appendChild(li); }).catch(function (err) { return console.error(err.toString()); }); ``` [ ![ASP.NET Core - Desenvolvimento de APIs REST](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/aspnet-core.svg) Curso ASP.NET Core - Desenvolvimento de APIs REST Conhecer o curso ](https://www.treinaweb.com.br/curso/aspnet-core-desenvolvimento-de-apis-rest) Agora ao executar a aplicação e realizar ações no endpoint Todo, o SignalR informará os clientes conectados no Hub: ![](https://dkrn4sk0rn31v.cloudfront.net/2020/01/31170704/streaminghub.png) Outro uso comum do SignalR é na criação de um chat. No próximo artigo abordarei mais algumas características dele e apresentarei o exemplo de um chat. Você pode obter o código da aplicação demostrado neste arquivo no meu [Github](https://github.com/wladimilson/apisimples). - [ #Streaming API ](https://www.treinaweb.com.br/blog/tag/streaming-api) - [ #SignalR ](https://www.treinaweb.com.br/blog/tag/signalr) Autor ![Wladimilson M. Nascimento](//secure.gravatar.com/avatar/f0dd442f156a3eacd2880e9cd0eafbd1?d=mm) ## Wladimilson M. Nascimento Instrutor, nerd, cinéfilo e desenvolvedor nas horas vagas. Graduado em Ciências da Computação pela Universidade Metodista de São Paulo. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/wladimilson-m-nascimento) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/05103838/SIGNALR-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ Criando um Chat com ASP.NET Core SignalR ](https://www.treinaweb.com.br/blog/criando-um-chat-com-asp-net-core-signalr) Continuando o estudo do SignalR, aprenda como criar um chat utilizando esta biblioteca de aplicações em tempo real do ASP.NET Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/06/03131718/DIAGNÓSTICO-400x280.png) [ Infraestrutura e Sistemas Operacionais ](https://www.treinaweb.com.br/blog/categoria/infraestrutura-e-sistemas-operacionais) 8 anos atrás ## [ Diagnosticando uma aplicação no .NET Core 3.0 ](https://www.treinaweb.com.br/blog/diagnosticando-uma-aplicacao-no-net-core-3-0) Conheça as ferramentas dotnet-counters, dotnet-trace e dotnet-dump. E aprenda como elas auxiliam no diagnóstico de uma aplicação .NET Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/28160855/websockts-php-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Aplicações em tempo real com PHP usando WebSockets ](https://www.treinaweb.com.br/blog/aplicacoes-em-tempo-real-com-php-usando-websockets) Neste artigo veremos uma introdução a WebSockets com a criação de um servidor em PHP e usando o navegador do usuário como cliente. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/netdata-400x280.png) [ Computação em nuvem ](https://www.treinaweb.com.br/blog/categoria/computacao-em-nuvem) 7 anos atrás ## [ Monitorar servidor em tempo real com o Netdata ](https://www.treinaweb.com.br/blog/monitorar-servidor-em-tempo-real-com-o-netdata) O Netdata é uma ferramenta opensource que te permite monitorar o seu servidor em tempo real. Visualize métricas relacionadas a memória, CPU, rede etc. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2025/01/NOVIDADES-REACT-19-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 2 anos atrás ## [ 4 Novidades do React 19 ](https://www.treinaweb.com.br/blog/4-novidades-do-react-19) Descubra 4 novidades do React 19, incluindo novos hooks, otimizações de performance e uso prático das Actions para formulários. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/04/sistemas-mensageria-min-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 3 anos atrás ## [ O que é e quais as diferenças entre Kafka, RabbitMQ e AWSSQS ](https://www.treinaweb.com.br/blog/o-que-e-e-quais-as-diferencas-entre-kafka-rabbitmq-e-awssqs) Confira nesse artigo o que são sistemas de mensageria, o que são e quais as diferenças entre Kafka, RabbitMQ e AWSSQS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/firebase-1-400x280.png) [ Computação em nuvem ](https://www.treinaweb.com.br/blog/categoria/computacao-em-nuvem) 10 anos atrás ## [ Firebase: descubra no que esta plataforma pode te ajudar ](https://www.treinaweb.com.br/blog/firebase-descubra-no-que-esta-plataforma-pode-te-ajudar) O Firebase é uma plataforma do Google que contém um conjunto de ferramentas e infraestrutura para ajudar no desenvolvimento web e mobile. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/conhecendo-o-next-js-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Conhecendo o Next.js ](https://www.treinaweb.com.br/blog/conhecendo-o-next-js) Veja neste artigo o que é o Next.js e suas principais características. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/o-que-e-programacao-reativa-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 6 anos atrás ## [ O que é programação reativa? ](https://www.treinaweb.com.br/blog/o-que-e-programacao-reativa) Confira neste artigo o que vem a ser programação reativa, um princípio de desenvolvimento de software que vem ganhando espaço entre os desenvolvedores. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/04/05114857/ORLEANS-400x280.png) [ Infraestrutura e Sistemas Operacionais ](https://www.treinaweb.com.br/blog/categoria/infraestrutura-e-sistemas-operacionais) 9 anos atrás ## [ Conhecendo o Microsoft Orleans ](https://www.treinaweb.com.br/blog/conhecendo-o-microsoft-orleans) Conheça o framework Microsoft Orleans e veja como ele tenta resolver o "problema" dos sistemas distribuídos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/07/node-js-por-que-voce-deve-conhecer-essa-tecnologia-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 10 anos atrás ## [ Node.js: por que você deve conhecer essa tecnologia? ](https://www.treinaweb.com.br/blog/node-js-por-que-voce-deve-conhecer-essa-tecnologia) Neste artigo, Bruna Goss, da Umbler, esclarece o que vem a ser o Node.js, onde a sua utilização pode ser vantajosa e quando é melhor ou não contar com ele. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/04204421/capa-alm--400x280.png) [ Governança ](https://www.treinaweb.com.br/blog/categoria/governanca) 8 anos atrás ## [ Você sabe o que é ALM? ](https://www.treinaweb.com.br/blog/voce-sabe-o-que-e-alm) Veja neste artigo o que vem a ser o ALM (Application Lifecycle Management). Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **15h 50min 06s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58