[BR][Front-End] React - Aplicações real time com Socket.io
ฝัง
- เผยแพร่เมื่อ 23 ม.ค. 2025
- Neste vídeo mostro como criar um simples utilizando Socket.io, Node e React. Nesse projeto criamos um chat real time simples, simulando uma conversa entre duas pessoas.
Projeto:
github.com/mah...
Apoie:
apoia.se/mahen...
Redes Sociais:
Blog: blog.matheuscas...
Site Pessoal: www.matheuscast...
Facebook: / matheus.castiglioni.5
Github: github.com/mah...
Google Plus: plus.google.co...
Instagram: / mahenrique94
Linkedin: / matheus-castiglioni-7a...
Medium: / mahenrique94
Twitter: / mahenrique94
Referências
Sons: / @arefeitossonoros
Animações: / @greenscreenbrasil e / channel
Imagens: www.freepik.com/
![[BR][Front-End] React - Aplicações multi idiomas](http://i.ytimg.com/vi/5p9EMWwieyo/mqdefault.jpg)
![[BR][Front-End] React - Aplicações multi idiomas](/img/tr.png)
Muito obrigado por compartilhar o conhecimento conosco. Explicação clara e coesa. 👏
Eu que agradeço Pablo
Super aula , infelizmente o meu da bloqueio no cors, baixei a corskoa e msm assim não resolver, triste hahaha
um update :
const io = socket(server,{
cors:{
origin:'*'
}
})
vai liberar , bons estudos
Fala Bruno, tenta utilizar essa lib: www.npmjs.com/package/cors
@@MatheusCastiglioni consegui fazer , coloquei um update ali que foi liso
Salvou DMS
Humilde demais, valeu
Muito obrigado, Matheus. Aprecio muito esse tipo de explicação onde aparecem erros no meio e como soluciona-los ao invés de simplesmente seguir o roteiro de caminho feliz.
Obrigado Dustin, é sempre explicar né kkk
Muito bom parabéns Matheus. Meu objetivo era criar um chat para entender como melhorar o gerenciamento de sessão... pois tenho um chat corporativo que vive desconectando da sessão do lado cliente. Muito obrigado e parabéns por compartilhar o conhecimento.
Obrigado Fabio.
Muito simples a sua explicação, vi o vídeo inteiro e agora vou implementar da minha forma valeuuuuuuuuuu
Obrigado Hugo
Super didático, se pra mim que sou da área de negócios consegui entender super bem, imagino pra quem é de fato programador. Eu procurava uma forma de criar uma atividade interativa onde eu pudesse acompanhar um paciente "de psicologia por exemplo" via web cam, e dependendo da reação ou resposta dele eu "psicólogo" poderia alterar os componentes que ele está vendo na tela, até mesmo exibir uma animação, um mini vídeo, ou uns 3 botões pra ele clicar, etc. Já percebi que a questão é websockets. Só falta evoluir aqui nas ideias. Show obrigado.
Show Valdonei, obrigado, manda bala na ideia que é top
Muito boa explicação...Conteúdo atualizado e funcional inclusive no repositório.
Obrigado Eureudes.
Excelente conteúdo, Matheus! E bem atualizado!
Para quem quiser testar no Chrome mobile, ou em outro computador conectado à mesma rede WiFi:
- No terminal que você rodou o cliente aparecerá o seu IP: On Your Network.
Substitua as duas occorências de localhost pelo IP no código e use a url com IP no seu navegador.
Obrigado Philip, boa man, deixei passar essa pequena observação.
como assim? kk
valeu matheus, seu conteudo agregou muito
Obrigado Henrique
Obrigado Mateus, sua logica é sensacional
obrigado Davi
Parabéns pela abordagem do conteúdo. Me ajudou muito! 👏🏽👏🏽👏🏽
Obrigado Natalia
Cara sou novo no canal, e o conteúdo é top demais.
Obrigado Nelson, fico muito feliz por ouvir isso.
Muito bom a dinâmica da explicação
Obrigado Daniel
Muito bacana! valeu por compartilhar o conhecimento... :)
Obrigado Rimidel, eu que agradeço pela visualização.
Excelente aula! Muito obrigado pelo aprendizado. :)
Obrigado Gabriel
quando vai para produção tudo muda kkkkkkkkk ai começa as dor de cabeça no localhost e brincadeira de acriança!! vlw abraço.
prod é outros quinhentos né kkkkk
Bom conteúdo matheus , parabéns !!!
è isso ai compartilhar é aprender !!!!!
Obrigado Saulo, bora \o/
Parabéns, você é incrivel!
Obrigado Paulo
Ótimo vídeo Matheus, parabéns pelo Trabalho, vai fazer uma parte dois desse conteúdo? hehehe. Vlww
Obrigado Paulo, daria para fazer mais sim, porem no momento dei uma pausa no canal.
@@MatheusCastiglioni Poxa que pena, seu canal é muito bom, fico aguardando retornar então. Obrigado pelos conteúdos que já fez até então, sempre me ajudou muito!!
@@Paulo-cf4mh Obrigado mano, vamos ver kkk
Muito bom, parabéns
Obrigado Anna
boa tarde pessoal... seguindo a apresentação do Matheus, empaquei no problema de Cors. Alguém resolveu esse problema?
Fala Marco, como tu esta lidando com o cors? Eu recomendo usar a biblioteca cors (www.npmjs.com/package/cors). Seria algo do tipo: app.use(cors())
Alguém aí sabe como dar LIKE mais de uma vez? kkk
Parabéns, muito bom o vídeo, obrigadoooo
Da like, dislike e like de novo kkkkk. Obrigado Paulo
fala irmão, porque pra você não ta dando erro de cors? Os servidores estão rodando em portas diferentes certo?
Fala Rodrigo, estranho, geralmente o procotolo WS (WebSocket) não tem CORS, você deve estar utilizando HTTP em... dá uma conferida nisso.
@@MatheusCastiglioni pior que não irmão, to fazendo o mesmo exemplo que você kkkkkk, pior que tentei resolver da mesma forma que costumo fazer quando utilizo REST padrão e mesmo assim não funcionou
@@rodrigolustosa9090 conseguiu resolver?
@@RafaelSantos-pp1iz pior que não mano, eu dei uma parada nesse pq tive que focar em outros projetos, mas Jajá volto nele e vejo se consigo resolver
@@rodrigolustosa9090 massa mano, tbm tou batendo cabeça pra resolver. Caso consiga compartilha ai com a galera.
Use o ngrok para compartilhar meu localhost e tentei usar o chat no celular mas ele não envia a mensagem para o server, nem se eu colocar um botão submit. Saberia me dizer o que pode ser?
Fala Giovanni, teria que dar uma debugada na requisição e seu fluxo, provavel que houve uma falha de comunicação ou conexão dos websocket.
@@MatheusCastiglioni já descobri o que é. O ngrok estava roteando só a porta 3000, ou seja, só o React. O servidor estava rodando em outra porta e o celular não consegue acessar ela.
42:05 - 42:15
Sobre o uuid, no app aparece o erro: Failed to compile Module not found: Can't resolve 'uuid/v4' in 'C:meudiretório.
Queria saber se tem que instalar o uuid, se tiver, como eu instalo, porque no meu VSCode não tem a opção v4 igual apareceu no seu vídeo...
Obrigado pela atenção.
Fala Paozinho, tem que instalar a lib uuid sim, no caso `npm i uuid`: www.npmjs.com/package/uuid
@@MatheusCastiglioni Eu acredito que o pacote tenha sido atualizado, agora o caminho correto é "uuid/dist/v4", ficando assim: import uuid from 'uuid/dist/v4'
Sim, agora podemos importar direto da uuid: import uuid from ‘uuid’ e usar: uuid.v4()
@@MatheusCastiglioni Funcionou!!!
Muito obrigado Matheus, vlw cara, muito bacana o seu canal, parabéns.
Só mais uma pergunta, já que utilizamos o React, esse chat em real time pode ser utilizado no celular ?
@@viniciusresende3605 Obrigado Vinícius
Muito bom, amigo! Uma dica de ideia de video seria a trabalhar com animações CSS com as bibliotecas do React, tipo o React Animation Group
Obrigado Rodrigo, Show, vou adicionar no meu Trello, tenho um vídeo sobre a GreenSock e estou gravando outro sobre a Motion, ambos são sobre animações.
estou com esse erro Module not found: Can't resolve 'uuid/v4', alguem pode me ajudar? eu instalei o uuid e ja peguei o repositorio no git e nada
Fala Gustavo, se você estiver utilizando as versões mais recentes a forma de uso mudou: import { v4 as uuidv4 } from 'uuid';
Como deixo o Scroll automático, tipo quando as mensagens chegarem no limite da div, subirem para aparecer as outras?
Você pode pegar a posição da última mensagem e, se no limite da div, faz o scroll pra ela... uma das formas de fazer, no meu ver.
@@brunosousa2251 Já procurei como fazer isso, mas não encontro.
@@wpswill3387 Pegue o tamanho da div com o element.scrollHeight... pegue a posição da última mensagem e compare... se próximo do fim da tela, você usa o window.scrollTo(position_da_msg) pra rolar pra mensagem...
@@wpswill3387 Pra rolar pra última mensagem, você pode usar algo como document.getElementById('.msg-div').lastChild.scrollIntoView(false)
@@brunosousa2251 Verei aqui amigo. Obrigado!
Top demais
Obrigado =DDD
Bom de mais, muito top
Obrigado Wiliam.
Muito obrigado!
Magina Breno
cara me deu esse problema e eu ainda não consegui achar soluçao, mesmo lendo a documentação
Access to XMLHttpRequest at 'localhost:8080/socket.io/?EIO=4&transport=polling&t=NQXZa09' from origin 'localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Fala Flavio, você fez a configuração do CORS na API?
@@MatheusCastiglioni eu tentei fazer como esta aqui socket.io/docs/v3/handling-cors/ mas mesmo assim estava dando erro, isso ate eu ler um issue no github do socket.io, falando para adicionar o transporte junto, "const socket = io("127.0.0.1:8080", { transports: ["websocket"] }); ", ai deu certo
@@FlavioZanoni Boa man, obrigado por compartilhar a solução
@@MatheusCastiglioni obrigado a você pelo otimo conteudo !!
Muito bom, parabéns!!
Obrigado Venâncio
BRABO!
Valeu Cristiano
Fala Matheus bllz? No caso eu queira enviar a mensagem para um usuário especifico como ficaria a lógica do emit no server?
Fala Lucas, nesse caso você pode utilizar o id do usuario como identificador na mensgem, algo assim: io.emit(`chat.message.${user.id}`, data).
Ou você pode trabalhar com salas, utilizando o rooms da Socket.io, algo assim:
socket.join(userId)
io.to(userId).emit('Alguma mensagem')
@@MatheusCastiglioni Boa, obrigado
Como manda as mensagem em buffer ao invez de enviar string?
Fala Weverton, se tu criar um Buffer e enviar como parâmetro nos eventos ele vai chegar para ambos os lados.
@@MatheusCastiglioni problema e pegar no navegador, ouvi dizer que n suporta buffer
Dá uma olhada no Blog ou ArrayBuffer, talvez um deles possa te ajudar ou talvez eu não tenha entendido direito o que tu precisa fazer.
@@MatheusCastiglioni eu quero pegar um objeto json transformar em byte e mandar pelo socket, simplesmente socket.emit(objeto) custa muito na banda de rede
@@canalred3609 Acho que essa não precisaria ser uma preocupação sua Weverton, o próprio protocolo ws vai ser responsável por realizar essa compressão e transferir apenas bytes na rede.
Oi. Boa tarde.
Como você faz para não exibir a barra superior do Chrome e mostrar somente o conteúdo da navegação?
Eu deixo ele full screen Jonatan e tem outra opção que você marca para esconder a toolbar.
@@MatheusCastiglioni ah sim. Então você está em duas telas né? Ou tem como usar esse modo sem preencher toda a tela?
Ótimo vídeo!!!! Como eu uso isso no vercel???
Obrigado Pedro, primeiro você precisa subir a API em algum cloud e disponibilizar um ponto de entrada para o front que vai estar na Vercel se comunicar.
@@MatheusCastiglioni tipo o ABLY??? É que eu quero fazer um videochat com o socket.io e tudo que eu sei até agora sobre o socket.io é o que eu vi no seu vídeo...
@@anjonegro1982 Eu recomendo subir a API na Digital Ocean e o front na Netlify, me atendem muito bom, com preços acessiveis e as vezes free (Netlify)
Fala Matheus, cara estou com uma dúvida no meu código. Vou explicar.
Tenho um servidor websocket rodando em um microcontrolador. Este atualiza uma variável a cada 300ms em um arquivo json. Eu preciso mostrar esse valor na tela sem que precise dar refresh na página inteira. Em um teste para controlar um led por meio de um botao switch funciona normalmente. Salva e atualiza quando a mudança vem do microcontrolador ou por meio de uma outra conexão ao servidor.
Mas não atualiza um valor dentro de um componente de texto.
Se puder me ajudar com alguma dica de como fazer. Agradeço.
Fala Paulo, conheço muito pouco sobre controladores e coisas relacionadas a IoT. Mas, nesse caso o que tu poderia fazer é ter o servidor websocket nas nuvens e ambos o controlador e um cliente web estarem conectados ao mesmo, assim, quando o evento de atualização for disparado, tanto o controlador quanto a página web irá recebê-lo e se atualizarem.
@@MatheusCastiglioni Minha dúvida é com relação ao react. Quando o servidor faz a mudança, o react precisa de alguna rotina para se atualizar ou a atualização ocorre automática mente. Desconfio que eu esteja usando o componente errado...
@@paulocesarbenetti7272 O que tu precisa fazer é na aplicação React estar conectado no socket, tu pode fazer essa conexão com useEffect e registrar os listeners com seus callbacks, dai precisa atualizar o estado do componente em si ou publicar alguma ação para atualizar uma store global da aplicação.
muito obrigado
Eu que agradeço Leonardo
Cara, ajudou muito seu conteúdo, valeuuuu
Obrigado man
Se o meu servidor eu estou usando a biblioteca nativa de Websocket (no caso Websocket do novo Deno pra testes) e no front eu usar o socket.io, tem alguma incompatibilidade?
Fala Bruno, teoricamente não, a ideia da Socket.io é seguir o protocolo WS onde ele emite e recebe eventos, mas, pode ser que algum ajuste precise ser feito sim.
Olá, Matheus. Excelente vídeo! Sou novato na programação e tenho uma dúvida: utilizando localhost para o socket é possível a comunicação entre dispositivos diferentes em locais diferentes? Obrigado.
Fala Vagner, o localhost vai funcionar apenas para as coisas locais na sua máquina, caso os dispositivos estejam na mesma rede daria para utilizar por IP. O ideal é tu subir o servidor socket nas nuvens, dai sim será possível em qualquer lugar os mesmos estarem conectados.
Seria legal se fizesse um vídeo de como criar o chat com um sistema de usuários
Opa, obrigado pela sugestão, vou adicionar na lista de coisas.
10:36 funcionou qndo colocou o html/jsx dentro do return.
const Chat = () => {
return(
ola
)
}
Nesse caso você poderia ter feito assim:
const Chat = () => (
ola
)
Ja cria a arrow function e retorna o JSX
Muito bom seu vídeo, é mesmo necessário usar o society.off? Fiz algumas coisas diferentes...
Obrigado Alan, depende, normalmente um problema tem várias soluções, sendo diferentes ou não.
Gostei do seu tema do vscode , qual é?
é o Palenight
Fala Matheus blz, parceiro como seria a implementação do websocket nesse cenário: toda vez que o user1 receber um like seja enviada uma notificação privada para ele? sem enviar para os demais user2, user3...vlw abraço.
Nesse caso você poderia criar um id para cada usuário e utilizar esse id como parte do tópico, dessa maneira, somente esse usuário com esse id iria receber. Algo do tipo: uuid-notification (onde uuid seria gerado automaticamente)
top
Obrigado Ellson
meu sonho é apreender isso mensagem privada para usuario rs
Opa, assisti o video e sucesso \o/
Se você está vendo esse vídeo no ano de 2021 (ou posterior), e seu front-end não conecta ao servidor, aqui vai uma dica:
O Socket.io, a partir da v3, precisa habilitar explicitamente o CORS (mesmo no localhost).
Fazer isso é bem simples, se liga:
1 - instale o cors na pasta de seu server: " 'npm install cors "
2 - importe o cors no seu arquivo server.js: " const cors = require('cors') "
3 - procure o codigo * const io = socket(server) *, e substitua por:
const io = socket(server, {
cors: {
origin: "localhost:3000" ,
methods: [ "GET" , "POST" ]
}
})
E voilà, seu chat conseguirá se conectar com sucesso ao seu servidor! ; )
Boa , muito obrigado por compartilhar a dica com a gente
matheus você pode me ajudar com essa parte pelo insta ?
Opa, me pinga la que eu algum momento eu irei responder hehe
Muito bom. Parabéns 👏
Obrigado Rafael