Comunicação em Tempo Real com WebSockets | Dias de Dev

[@alissonsilva9419]

Aquele vídeo que vale mais que uma disciplina na faculdade.

[@DiasDeDev]

Eita, agora me senti aqui. Hahahah Muito obrigado, man!!

[@ryanphpjs]

@@DiasDeDev Cara, de 3 aulas de 50 minutos você resume em 15 minutos e bem explicado, parabéns, +1 inscrito

[@DiasDeDev]

@@ryanphpjs Que bom que curtiu. Fico feliz. :-D

[@kildersonsena8873]

Sockets e Websockets sempre foi uma parada muito obscura na minha cabeça, mas depois desse vídeo tudo faz sentido. Obrigado, muito bom vídeo! =)

[@DiasDeDev]

Opa, fico feliz demais por ter contribuído um pouco.

[@ngomafortuna2667]

Muito bom, bem explicado Vinicius.

[@jabirocasilva1692]

Caraaaa, que explicação incrível.💟

[@DiasDeDev]

Que bom que curtiu! :-D

[@JuniorSilva-rq6su]

Mais um conteúdo TOP! Se colocar o vídeo do backend é certeza que bate 1000+ views.

[@DiasDeDev]

Opa, será? 😁😁 É um conteúdo bem interessante, né!? Que bom que vc curtiu! :-D

[@marcelomsmms]

Muito bom! Parabéns pelo canal. Se rolar implementação de backend em Php seria perfeito!

[@DiasDeDev]

Rolou lá no canal da Alura, Marcelo: kzbin.info/www/bejne/oXvSh3eMZtqGiJo

[@machinehise2416]

Muito show. Simples, didático e direto. Parabéns.

[@DiasDeDev]

Fico feliz que tenha gostado. :-D

[@PauloRicardo-dk6yf]

Conheci o canal hoje e amei os assuntos.

[@DiasDeDev]

Que bom que está curtindo, Paulo

[@raunicklabs]

muito bom o video, estava com dificudades de entender isso mais vc esplicou de uma forma simples e direta, parabens!!

[@DiasDeDev]

Que bom que gostou! :-D

[@naunlbelo]

Parabéns, Vinícius. Estou fazendo seus cursos no alura. Confesso que quase desisti do Alura, mas seus cursos me deram ânimo de novo na plataforma. Você tem uma ótima didática e ensina muito bem. Parabéns. Estou aprendendo muito com seus cursos e com as documentações.

[@DiasDeDev]

Opa, fico feliz demais que tenha curtido meu conteúdo. :-)

[@mateusdeveloper56]

Parabéns. show de bola o conteúdo, chat GPT me trouxe esse conceito de web sockets ai vim aqui procurar entender como funciona valeu ajudou dms!

[@DiasDeDev]

Opa, que bom que curtiu. :-D

[@luizneri]

Muito massa Vinicius, pode fazer mais vídeos de WS, como criar no php por exemplo os fmk que fazem o trabalho braçal, etc.

[@DiasDeDev]

Boa, Luiz. Dia 14/10 vou falar um pouco numa live no canal da Alura

[@dovale81]

Muito bom. Parabéns!

[@DiasDeDev]

Muito obrigado! :-D

[@felipef6300]

Rapaz, excelente!!! Sem mais palavras!

[@DiasDeDev]

Fico feliz que tenha gostado! 🤩

[@ronaldsena9078]

Show de bola Like nele, porem cadê o vídeo ensinando a criar o Servidor WebSocet PHP em sua essência 👨🏻‍💻

[@DiasDeDev]

Tá na mão: kzbin.info/www/bejne/fXSodIaCqblnb7c

[@thiagopetherson1268]

Show de bola, Vinição.

[@DiasDeDev]

Opa, tamo junto, mano!

[@ANDREFRD1]

Parabéns pelo conteúdo a pela maneira apresentada, pelo índice na descrição enfim, todos os detalhes!

[@DiasDeDev]

Opa, muito obrigado pelo feedback, André. Fico muito feliz que esteja gostando.

[@adrianonascimentocale3540]

Very Informative, helpful and Educational video! Thx for the tutorial man!

[@caiopertence1771]

todos nós sabemos que vc é brasileiro amigo

[@octacilio_rx]

Muito boa a explicação, simples e objetivo, sucesso cara.

[@DiasDeDev]

Que bom que gostou. Muito obrigado! 🤩

[@devacademy7839]

Seria top um vídeo de como implementar em inputs para fazer um crud simples. Valeu pelo video 😀 Abraços!

[@wesley4973]

Muito massa, mais conteúdo de alta qualidade.

[@DiasDeDev]

Valeu, Wesley. Que bom que curtiu

[@nathanraposo]

back end em php bora!

[@DiasDeDev]

Opa. Tá na mão: kzbin.info/www/bejne/oXvSh3eMZtqGiJo

[@brunocfelipe]

Show de bola!!! Faz um video mostrando a implementação de websockets, vai ser show!

[@DiasDeDev]

Opa, que bom que curtiu, Bruno. Vou preparar sim.

[@Acessodesign]

Parabéns, muito bom!

[@DiasDeDev]

Opa, que bom que gostou. 😁

[@diogomascarenha]

Parabéns pelo vídeo! 👏🏽 Só faltou mostrar o Backend e deixar o código disponível no Github! 😋 Estou gostando de ver a evolução do canal, aguardando os próximos vídeos! Um abraço! 😊

[@DiasDeDev]

Aí tem aquela jogada de KZbinr, né!? Mostro o back se a galera clicar em curtir e comentar. 🤣😂

[@LuizEduardo-ke3be]

Que massa pow! Muito bem explicadinho kkkkk

[@DiasDeDev]

Que bom que gostou, Luiz. :-D

[@sadstationbrasil3255]

Quem ai está assistindo na era das Inteligências artificiais? elas escrevem praticamente tudo agora, a vida do programador está maravilhosa.

[@DiasDeDev]

kkkkkkkk

[@sergiovilar5689]

Tbm quero ver a implantação da parte do servidor. Sempre imaginei que fosse algo mega complexo, vc desmistificou esse tema! Obrigado por compartilhar.

[@DiasDeDev]

Que bom que tornei um pouco mais simples, Sérgio. Vou preparar a parte do back sim.

[@sergiovilar5689]

@@DiasDeDev aguardo ansioso rs

[@DiasDeDev]

@@sergiovilar5689 Rolou hoje no canal da Alura: kzbin.info/www/bejne/oXvSh3eMZtqGiJo :-D :-D

[@sergiovilar5689]

@@DiasDeDev show!!!!

[@NELSON6358]

Muito bom. Parabéns.

[@DiasDeDev]

Valeu pelo feedback, Nelson. :-D

[@mateusdesousaesilva4382]

Bom demais!!!!! Eu tava interessado demais em saber sobre isso!

[@DiasDeDev]

Que bom que foi útil, Mateus. :-D

[@TCodeRunner]

Conteudo otimo nunca desista

[@DiasDeDev]

Opa, muito obrigado pela moral, Bruno! :-D

[@mateusl.5994]

Não conhecia o canal, dei like logo de cara só pela organização do vídeo kk

[@DiasDeDev]

Opa, que bom que curtiu. Espero que goste dos demais conteúdos também.

[@_alexollie]

Ótimo video! Mas no backend, o que vai?

[@DiasDeDev]

Alex, na tela final desse vídeo tem o card pro vídeo onde falo do back-end com swoole. Numa live já falei do ratchet também.

[@flyingnerdsproducoes]

Vinícius, excelente vídeo. Bem prático. Seria interessante saber como implementar um servidor de conexões websockets. Se for em PHP, melhor ainda! Abraços

[@DiasDeDev]

Só conferir o último vídeo do canal, Ricardo. :-D

[@flyingnerdsproducoes]

@@DiasDeDev Assisti na sequência! Muito bom também. Sabe que quando a pessoa consegue fazer uma coisa ela já quer fazer outra né? A dificuldade agora é manter uma lista de presença online no chat utilizando websockets. Como o chat roda em um código PHP separado, está difícil identificar qual usuário tem qual conexão... Bom, vou continuar quebrando a cabeça aqui.

[@DiasDeDev]

Ricardo, existe o evento 'close' que indica a "saída" do usuário do WebSocket. Sobre identificar o usuário, você pode enviar uma mensagem de autenticação assim que abrir a conexão. Assim você pode vincular o ID da conexão com o usuário em questão. Existem outras alternativas também, mas essa é a mais simples, na minha opinião. :-D

[@rogeriossilva1]

Parabéns pelo video, se fosse essa comunicação com email, como seria? Pode exemplificar usando o gmail?

[@DiasDeDev]

Não entendi bem, Rogério. Você quer saber como enviar um e-mail? Cada linguagem vai fornecer uma API diferente para isso. Isso é um trabalho a ser feito no back-end

[@leonardoantoniomaundokabon786]

muto top

[@DiasDeDev]

Que bom que gostou, Leonardo. :-D

[@guilhermemazarotto1267]

Alura tá perdendo esse professor brabo

[@DiasDeDev]

Tá não, ué. Eu ainda gravo cursos pra eles. :-D

[@vicentecamilo608]

Bom dia. Eu só consegui testar localmente o primeiro que vc fez, o segundo precisa do servidor como vc mesmo disse mas vc já o tinha criado então não consegui testar. Por acaso vc tem algum vídeo mostrando como criar o servidor? Caso não, poderia fazer um? Grato.

[@DiasDeDev]

Tem até uma live no canal da Alura sobre isso, onde fiz o código ao vivo com Rachet. Mas aqui no canal tem um com Swoole. O card pra ele ta no fi al desse video que voce assistiu, mas vou deixar o link aqui tbm: kzbin.info/www/bejne/fXSodIaCqblnb7csi=TSGmYokvDFMVHou6

[@vicentecamilo608]

@@DiasDeDev E js puro? Não sou profissional.

[@DiasDeDev]

Essas ferramentas são de PHP, não de JS. Eu não trabalho com JS no back-end. :-)

[@sueprbr]

Muito bom cara!

[@DiasDeDev]

Opa, que bom que curtiu. Fico feliz. :-D

[@bruno2182]

Queria muito ver como se faz no backend! Uso uma library para fazer esse tipo de comunicação PusherJs. Mas sempre dou mais valor a algo "home made". Valeu mano, ótimo video!

[@DiasDeDev]

Opa, tá na mão, Bruno! kzbin.info/www/bejne/oXvSh3eMZtqGiJo

[@bruno2182]

@@DiasDeDev Iraaado!! Valeeeu!

[@wpontog]

não consigo me conectar ao servidor ws(s) da minha hospedagem(Homehost) . Dá sempre connection failed. Pode ajudar?

[@othonfelipe6851]

Será que serviria para atualizar, por exemplo, os dados vindo do Banco de dados MySQL? Tipo, na rota '/usuarios', exibe todos os usuários. Quando a rota '/criar-usuarios' fizer uma requisição de registro no banco de dados, em tempo real a rota '/usuarios' exibiria esse novo usuário criado. Seria possível?

[@DiasDeDev]

Seria sim. Não é comum fazer esse tipo de atualização em tempo real, pela falta de necessidade mesmo. Mas possível, é.

[@otavio.bambans]

Dias, adorei seu vídeo! Pode nos ajudar com uma coisa? Como integrar o PHP com os WebSockets? Abraço!

[@DiasDeDev]

Eu falei disso aqui, Otávio: kzbin.info/www/bejne/oXvSh3eMZtqGiJo

[@otavio.bambans]

@@DiasDeDev Muito obrigado cara!

[@chapulinazulado7717]

Esse websockt fica fazendo requisição constante ou somente quando há algo novo? Esse sistema é parecido com o Ajax só que atualiza sem setinterval

[@DiasDeDev]

WebSocket é um protocolo que mantém a conexão aberta. Não há "requisições" após a conexão ter sido firmada. As mensagens são enviadas sob demanda. No próprio vídeo eu explico como isso é diferente de "ajax com setinterval". :-)

[@me.dwesley]

Implementa o protocolo no back

[@DiasDeDev]

Já implementei, David. :-D kzbin.info/www/bejne/fXSodIaCqblnb7c kzbin.info/www/bejne/oXvSh3eMZtqGiJo

[@guilhermechaves2053]

Que video show, sempre quis saber como funcionava um chat muito bom o conteúdo Vinicius . No alura tem algum curso relacionado a isso ? E no back-end da pra usar o PHP?

[@DiasDeDev]

Ainda não tem curso não, Guilherme, mas muito provavelmente vai ter. rsrs Esse back-end do vídeo eu fiz em PHP. Dia 14 numa live no canal da Alura eu vou mostrar esse back-end. ;-)

[@guilhermechaves2053]

Dias de Dev estarei la !!

[@robsonrodrigues6100]

Vinicius, em Java como ficaria o back? tem alguma sugestão de lib?

[@DiasDeDev]

Já tem vídeo aqui no canal usando Swoole e live no canal da alura usando Ratchet. 😁

[@robsonrodrigues6100]

@@DiasDeDev Valeu Vinicius! Obrigado!! Mas será que consigo usar num projeto escrito em Java?

[@DiasDeDev]

Com ctz consegue, mas eu não manjo de Java.

[@brambatimoreira]

Opa, blz, mostra aí como criar o serviço ws com o PHP

[@DiasDeDev]

Opa, ta na mão: kzbin.info/www/bejne/oXvSh3eMZtqGiJo

[@brambatimoreira]

@@DiasDeDev vlww

[@mateusgabriel4316]

ganhou 1 inscrito

[@DiasDeDev]

Opa. Valeu, Mateus

[@Redquitos]

Muito bom, tem algum curso ou material sobre websockets com PHP que você pode me recomendar?

[@DiasDeDev]

Opa. Tem uma live no canal da Alura e tem um curso na plataforma da Alura também. A live só mostra o uso da lib. O curso mostra todo o fundamento por trás.

[@Redquitos]

@@DiasDeDev vou olhar na Alura então, valew

[@lucasbueno4262]

eu consigo fazer uma api com node usando o protocolo http junto com o websocket?

[@DiasDeDev]

Não entendi bem sua dúvida. Você quer saber se é possível criar um servidor de WebSocket com node? Se for essa a dúvida, sim é possível. É possível com qualquer linguagem de programação web. Só cuidado com os conceitos. API e Servidor WebSocket são coisas diferentes. E WebSocket é um protocolo feito "em cima" do HTTP. :-) Bons estudos.

[@lucasbueno4262]

@@DiasDeDev obrigado!!! não era bem isso mas ajudou a dar um norte, o que estou querendo dizer é se consigo fazer uma api com node usando o protocolo http e dentro desse sistema utilizar websocket só para um chat por exemplo, deu pra entender? usar os dois ao mesmo tempo...

[@DiasDeDev]

@@lucasbueno4262 Aahh, saquei. Eu não manjo muito de node, mas pelo pouco que conheço, é pra ser possível sim. Talvez tenha que estar em uma porta diferente, mas é pra ser possível. Em PHP eu sei que é. rsrsrs

[@lucasbueno4262]

@@DiasDeDev obrigado novamente! ajudou muito

[@bruxoleonardo]

Salve salve, existe pouquíssimos conteúdos sobre streaming de vídeo ao vivo com ws, pelo menos em português br, se poder fazer algo agradeço, e acredito que seria "sucesso".

[@DiasDeDev]

Ótima dica, Leonardo. Não é minha área mas vou preparar algo sim.

[@bruxoleonardo]

@@DiasDeDev esse funciona mas só em localhost, se vc conseguir funcionar no servidor será bom d+, inclusive lá tem muita gente querendo m.kzbin.info/www/bejne/fX7FlXikgJ2babc

[@canarilmachado]

faz um tutorial de chat completo em php

[@DiasDeDev]

Opa, Felipe. Participei de uma live no canal da Alura explicando a parte do back end. :-D Confere lá.

[@Vha412]

Preciso baixar alguma API para utlizar websocket como cliente em js ou já existe algo nativo?

[@DiasDeDev]

O cliente é nativo do navegador. Não precisa instalar nada. Existem algumas libs que facilitam o trabalho, mas precisar, não. 😁

[@Vha412]

@@DiasDeDev se eu quiser usar websocket como client sem nenhuma API em js como eu uso? Não achei nada. Apenas com node. Js

[@DiasDeDev]

@@Vha412 mas nesse vídeo eu criei exatamente um cliente de websocket sem nenhuma biblioteca. Rsrsrs

[@valdeirsapara3156]

Eu tenho uma dúvida, a URL pra funcionar o websocket é qualquer uma? Ou não? Ou precisa ser um servidor expecifico?

[@DiasDeDev]

Não entendi sua dúvida. Consegue elaborar?

[@marcelorafael23]

👏👏

[@gamesetecnologiabr8475]

Eu fico triste, por que nunca funciona pra mim............... Ja fiz varios exemplos, e esse foi so mais uma falha............... Da problema na const ws ela dis que nao consegue achar..... ja tentei trocar pro meu ip, troca o nome de teste, de tudo mas n funciona............. Mesmo assim adorei o video, muita qualidade 1+ inscrito... Então, como abro esse container Docker em minha máquina?

[@DiasDeDev]

Pra esse exato exemplo funcionar você precisa ter um servidor rodando. Aqui nos comentários tem o link pra uma live onde eu mostro como fazer o back-end. :-D

[@gamesetecnologiabr8475]

@@DiasDeDev Aquele que o cara disse do back end com php?

[@DiasDeDev]

@@gamesetecnologiabr8475 Essa live aqui: kzbin.info/www/bejne/oXvSh3eMZtqGiJo

[@gamesetecnologiabr8475]

@@DiasDeDev Tu usa alguma dependecia tipo npm install ws, websocket, require etc?

[@DiasDeDev]

Não, @@gamesetecnologiabr8475 . Isso é nativo do JS

[@agente.dev.oficial]

Mano faz sem ser do localhost

[@kbgalvao]

show

[@DiasDeDev]

Que bom que curtiu, Kleber

[@gilsongoes6116]

Tentei fazer com o ESP8266 mas não deu certo.

[@AgenciaPaginaDigital]

Fiz o mesmo teste porém estou usando esse servidor wss://echo.websocket.org, por que quando abro em um novo navegador não aparece o que eu escrevi na outra aba?

[@DiasDeDev]

Esse servidor simplesmente retorna a mensagem para o cliente que enviou a mensagem, não para todos os clientes. Por isso. :-) Aqui nos comentários tem uma sugestão de live onde eu mostro a implementação desse chat no back-end. :-D

[@AgenciaPaginaDigital]

@@DiasDeDev rss Obrigado pelo breve retorno. Realmente depois vi que tem a parte do back. Estou precisando fazer um script que desloga e cai sessão se a pessoa entrar no sistema de um outro dispositivo. Vou tentar implementar com aquele parâmetro from que vc alterou.

[@eduardocarlos1960]

faz um chat com real time com websockets e laravel

[@DiasDeDev]

Eduardo, já fiz um chat aqui no canal. Laravel não é uma ferramenta pra isso. Não faria sentido.

[@eduardocarlos1960]

@@DiasDeDev tenho um sistema que desenvolvi com laravel , e nesse sistema precisarei de um chat para comunicação entre os usuarios do sistema e tambem precisarei de um sistema de chamada de senhas para os atendimentos

[@DiasDeDev]

@@eduardocarlos1960 Se você quiser continuar no Laravel, talvez isso te ajude: laravel.com/docs/8.x/broadcasting Mas eu teria um servidor com Ratchet ou Swoole pra servir essa comunicação em tempo real.

[@edson_augusto]

cara eu queria sbaer como se fez seu pc hostear o backend meu socket não conecta com meu backend, estou travado nisso : ( kkkk

[@DiasDeDev]

Não precisei fazer nada. Só rodei o Ratchet, normal.

[@gsservicos]

Aula mto boa, intuitiva e viciante. Porém faltou mostrar o lado do servidor pra gente entender como se recebe os dados enviados com o websocket. Mas parabéns pela aula...

[@DiasDeDev]

Já tem um vídeo sobre o assunto. Na tela final desse vídeo há um card para ele.

[@oporteiro6166]

Foda

[@DiasDeDev]

Que bom que gostou. :-)

[@BrunoMendes1]

se tivesse o servidor seria perfeito

[@DiasDeDev]

Tá na mão, Bruno: kzbin.info/www/bejne/oXvSh3eMZtqGiJo Provavelmente vou fazer um vídeo aqui pro canal no futuro, mas usando Swoole ao invés de Rachet.

[@jeffersonm06]

traz em python pô

[@DiasDeDev]

Mas o vídeo foi sobre o conceito. rsrsrs E a parte prática foi no front-end, então tem que ser JS.

[@bruxoleonardo]

Faltou a pasta server que é onde a mágica acontece 😢

[@DiasDeDev]

Não faltou, Leonardo. Tá no vídeo que aparece na tela final. rsrsrs

[@carcleo]

Fiz assim: const port = 8081; const host = 'wss://127.0.0.1'; const conn = host + ':' + port; const ws = new WebSocket(conn); Mas o meu sempre para na linha const ws = new WebSocket(conn); Sempe com a mensagem WebSocket connection to 'wss://127.0.0.1:8081/' failed: Para qualquer que srja a porta que eu usar. O que eu fiz de errado?

[@_boraprogramar]

Nossa com web sockets é muito mais rápido, tinha feito um chat com Ajax e me incomodava as requisições a cada 1s

[@DiasDeDev]

Pois é. Requisições HTTP não foram feitas pra isso. :-) WebSockets sim. :-D

[@lucianofran4696]

Parabéns pelo vídeo, não está dando certo, WebSocket connection to failed:

[@DiasDeDev]

Como está o servidor?

[@lucianofran4696]

@@DiasDeDev Uso o Xampp, no php.ini está habilitado, extension=php_sockets.dll , quais seria as configurações corretas do servidor ? qual a versão do php que funciona ?

[@danielmartins4842]

Queremos implementação do backend i.pinimg.com/originals/b5/60/65/b56065ca1f51070288e9dea3cf438d2c.jpg

[@DiasDeDev]

Hahahah Prometo que vou preparar, Daniel

[@cpp33]

passou da hora do protocolo http ser um "ws", sem depender do "ws" em si o http ser um tunel por natureza... tudo ser bidirecional

[@DiasDeDev]

Isso exigiria bastantes mudanças nas ferramentas atuais.

[@cpp33]

@@DiasDeDev as vezes nao... de repente o http usar o WS como uma "api" interna sem que o usuario final perceba... client solicita http... http abre automaticamente um tunel e mantem, sem que o dev precise implementar

[@DiasDeDev]

@@cpp33com certeza alguém tem que implementar. Atualmente os servidores web e navegadores já mantém a conexão aberta (pra isso serve o Keep-Alive), mas a comunicação bidirecional sem mudança de protocolo vai exigir mudanças nos servidores.

[@adrianonascimentocale3540]

Very Informative, helpful and Educational video! Thx for the tutorial man!