Criando um Chat com ASP.NET Core SignalR \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 04 Horas 34 Min 06 Seg Tempo restante da oferta: 04 34 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) Criando um Chat 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) # 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. [ 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 artigo passado, [abordei aplicações em tempo real com a biblioteca SignalR](https://www.treinaweb.com.br/blog/aplicacoes-em-tempo-real-com-asp-net-core-signalr/), onde demonstrei seu uso em uma streaming API. Como citei no artigo, um uso muito comum desta biblioteca é na criação de chats. Para conhecer mais recursos dela, vamos criar este tipo de aplicação. ## Começando pelo começo Antes de mais nada, criaremos uma aplicação web: ```dos dotnet new web -n ChatSignalR ``` E nela, iremos criar um Hub: ```csharp namespace ChatSignalR.Hubs { public class ChatHub: Hub { public async Task SendMessage(string usuario, string mensagem) { await Clients.All.SendAsync("ReceiveMessage", usuario, mensagem); } } } ``` Note que para esta aplicação o Hub possui um método. Será para este método que o cliente enviará mensagens. Assim que a mensagem for recebida, o Hub a enviará para todos os clientes. Esta será a dinâmica do nosso chat. Um chat aberto, onde todos os usuários conectados receberão todas as mensagens dos demais usuários. Na parte do servidor, por fim, é necessário habilitar o SignalR e registrar o hub na classe `Startup`: ```csharp public class Startup { public void ConfigureServices(IServiceCollection services) => services.AddSignalR(); public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { app.UseDefaultFiles(); app.UseStaticFiles(); app.UseRouting(); app.UseEndpoints(endpoints => { endpoints.MapHub("/chat"); }); } } ``` ## Criando o cliente: O nosso cliente será uma página web simples, que conterá um campo para o usuário informar seu nome e uma mensagem: ```html Mensagens Usuário Mensagem ``` Na parte do JavaScript, conectaremos ao Hub do servidor e definiremos o envio e recebimento de mensagens: ```javascript "use strict"; var connection = new signalR.HubConnectionBuilder().withUrl("/chat").build(); $("#send").disabled = true; connection.on("ReceiveMessage", function (user, message) { var msg = message.replace(/&/g, "&").replace(//g, ">"); var li = $("").text(user + ": " + msg); li.addClass("list-group-item"); $("#messagesList").append(li); }); connection.start().then(function () { $("#send").disabled = false; }).catch(function (err) { return console.error(err.toString()); }); $("#send").on("click", function (event) { var user = $("#usuario").val(); var message = $("#mensagem").val(); connection.invoke("SendMessage", user, message).catch(function (err) { return console.error(err.toString()); }); event.preventDefault(); }); ``` Note que quando uma mensagem for recebida, ela é exibida em uma lista: ```javascript connection.on("ReceiveMessage", function (user, message) { var msg = message.replace(/&/g, "&").replace(//g, ">"); var li = $("").text(user + ": " + msg); li.addClass("list-group-item"); $("#messagesList").append(li); }); ``` E no envio é indicado o método definido no Hub: ```javascript $("#send").on("click", function (event) { var user = $("#usuario").val(); var message = $("#mensagem").val(); connection.invoke("SendMessage", user, message).catch(function (err) { return console.error(err.toString()); }); event.preventDefault(); }); ``` [ ![C# (C Sharp) - APIs REST com ASP.NET Web API](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/csharp.svg) Curso C# (C Sharp) - APIs REST com ASP.NET Web API Conhecer o curso ](https://www.treinaweb.com.br/curso/c-sharp-apis-rest-com-asp-net-web-api) ## 1,2, 3…. Testando Agora, ao executar a aplicação e abrir várias abas, note que todos os usuários irão receber as mensagens que forem enviadas: ![](https://dkrn4sk0rn31v.cloudfront.net/2020/02/13115047/chat-signalr.png) Simples, não é? Você pode obter o código da aplicação demonstrado neste artigo no meu [Github](https://github.com/wladimilson/ChatSignalR). - [ #C# ](https://www.treinaweb.com.br/blog/tag/csharp) - [ #ASP .NET Core ](https://www.treinaweb.com.br/blog/tag/asp-net-core) - [ #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 ## [ Aplicações em tempo real com ASP.NET Core SignalR ](https://www.treinaweb.com.br/blog/aplicacoes-em-tempo-real-com-asp-net-core-signalr) Aprenda como criar uma streaming api utilizando a biblioteca de aplicações em templo real, SignalR. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/10/24165940/chatbot-400x280.png) [ Algoritmos ](https://www.treinaweb.com.br/blog/categoria/algoritmos) 8 anos atrás ## [ Criando um Chatbot com Python ](https://www.treinaweb.com.br/blog/criando-um-chatbot-com-python) Veja neste artigo como criar um Chatbot utilizando o Python. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/05/01125223/react-php-imagem-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Trabalhando com Sockets no ReactPHP ](https://www.treinaweb.com.br/blog/trabalhando-com-sockets-no-reactphp) Veremos neste artigo como usar o componente de socket do ReactPHP para criar um chat pelo terminal. Além disso, veremos as bases para a construção de servidores TCP/IP. 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/2017/07/node-js-por-que-voce-deve-conhecer-essa-tecnologia-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 9 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/2018/09/27171404/diego-eis-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 8 anos atrás ## [ TW Entrevista 11: Diego Eis ](https://www.treinaweb.com.br/blog/tw-entrevista-11-diego-eis) Fizemos uma série de entrevistas chamada "TW Entrevista". O entrevistado de hoje é o Diego Eis, fundador do Tableless, um dos maiores sites sobre desenvolvimento web do Brasil. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/18171011/ELECTRON-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ O que é Electron? ](https://www.treinaweb.com.br/blog/o-que-e-electron) Veja neste artigo o que é o Electron. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/17150123/desenvolvimento-colaborativo-em-tempo-real-com-live-share-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 7 anos atrás ## [ Desenvolvimento colaborativo em tempo real com Live Share ](https://www.treinaweb.com.br/blog/desenvolvimento-colaborativo-em-tempo-real-com-live-share) Aprenda como trabalhar com a ferramenta Live Share da Microsoft, que permite o desenvolvimento colaborativo em tempo real usando Visual Studio Code ou VS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/05/Criando_componente_snackbar_com_JavaScript_e_CSS-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ Criando componente snackbar com JavaScript e CSS ](https://www.treinaweb.com.br/blog/criando-componente-snackbar-com-javascript-e-css) Nesse artigo, você irá ter o passo a passo de como criar um componente de snackbar do zero. Sendo capaz de adapta-lo como preferir. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/24110903/O-QUE-E-REACT-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando aplicações React com Vite e TypeScript ](https://www.treinaweb.com.br/blog/criando-aplicacoes-react-com-vite-e-typescript) Neste artigo veremos como criar aplicações React com Vite, que permite desenvolvermos aplicações modernas com recursos como HMR, entre outros. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/Criando_mascara_monetaria_com_expressoes_regulares-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando máscara monetária com expressões regulares ](https://www.treinaweb.com.br/blog/criando-mascara-monetaria-com-expressoes-regulares) Nesse artigo aprenderemos a criar uma máscara para inputs que irá deixar seus projetos mais profissionais utilizando as expressões regulares. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 3 anos atrás ## [ Criando CRUD com Prisma ORM e NestJS ](https://www.treinaweb.com.br/blog/criando-crud-com-prisma-orm-e-nestjs) Neste artigo vamos implementar um CRUD com Prisma ORM e NestJS, abordando as principais operações básicas com o banco de dados. 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 **04h 34min 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