Como criar um chat em tempo real com HTML, CSS e JavaScript e colocar online de graça!

[@fiquericoousofratentando]

rapaz do céu , pensa num cara bom para explicar , mano explica muito bem! detalhe por detalhe de forma tranquila. MUITO BOM!

[@zolkmusic]

manual do dev é o canal que demora pra postar, mas quando posta, a qualidade é no céu

[@ManualdoDev]

hahahah olooco... valeu demais pelo apoio, cara! Tamo junto!

[@DevGpt2024]

Esse canal é a versão full dev 3.0 do Guanabara, pqp só vídeo bom! Projetos tops, didática simple e funcional, muito bem explicado, parabéns, continue!

[@ManualdoDev]

hahahah quer isso... valeu demais pelo apoio, Gabriel! Tamo junto!

[@antoniocarlosdiniz]

eu querendo ser Backend e vendo esses vídeos me puxando pro Frontend kkk, ditádica incrível, o bom é ver um pouco dos 2 lados, e sem falar que vejo vagas do Back pedindo conhecimentos em HTML, CSS e JS. Parabéns tá show de vídeo e qualidade.

[@Dan-Seven]

Rapaz o cara só evolui. Até a edição do vídeo tá melhor. É melhor os vendedores de curso ficarem espertos porque esse cara é uma documentação em vídeo. Valeu caraa

[@hstecnologia]

Rapaz ele é bom mesmo rsrs pratico e objetivo

[@nilsonamaral9935]

Projeto incrível esse, gostei demais, primeira vez que uso backend em algum projeto

[@peter8796]

mano, nao para de fazer esses videos, me ajudam demais

[@K00LD]

16:59 Tentei fazer igual pelo celular com o replit e no process.env.PORT || 8080 deu errado mas e só colocar uma função com if e return dependendo da existência de process.env.PORT

[@felipebiondes5434]

Você é um exelente professor, e sua voz supe calma deixa a gente super a vontade para ver esses videos mais longos, parabens!

[@jair-souzaft]

Terminei o projeto recentemente, seguindo passo a passo o vídeo tutorial. Parabéns pelo excelente conteúdo.

[@rafaellalopes7824]

Melhor conteúdo que encontrei sobre WebSockets. Outras pessoas utilizam muitas libs pra fazer algo que já tem no JS nativo.

[@uelberbell]

Que coisa linda de ser ver... Um dia eu chego lá!!!! Sensacional.

[@Gal4xyTm]

Chegou a ser idêntico aos grupos do WhatsApp kkk show de bola. Seria foda ver esse projeto mostrando o online, visto por último e banco de dados de cada usuário! Espero que tenha continuação futuramente, pois esse tutorial é melhor que muitos cursos, no mais excelente vídeo.

[@NG_MODS]

Rapaziada o cara é brabo de mais, estou começando na programação com 14 anos e não sabia por onde começar e vc foi a luz mn. Pf continua com os vds mn.

[@allanmenezes5898]

Esse conceito é um pouco avançado vou te passar um guia de estudos bom que eu usei no começo para evitar possíveis frustrações comece com HTML, css, js, react Js, servidor(vídeo atual), react native

[@NG_MODS]

@@allanmenezes5898 Muito obg mn. Ajudou muito

[@nicolasferreira5573]

Cara que conteúdo incrível, continue assim, nota 1000

[@geraldocoelho2392]

@ManualdoDev sensancional, sua didática e conhecimento são incríveis, parabéns mesmo.

[@honocss]

O cara é uma máquina de javascript

[@AlexandreLiberato-tn4wh]

Cara parabéns pela didática, projeto muito top. Refiz o projeto, aprendi bastante com você. vou postar no linkedin e marcar o canal, obrigado pelo conteúdo top !

[@ManualdoDev]

Valeu demais, Alexandre! Fico feliz! Mas infelizmente tive meu LinkedIn invadido e por enquanto estou sem. Mas já já crio de novo o perfil lá pra ver e interagir com vocês lá!

[@DamiaoSouza-qc3pb]

Cara você está de parabéns que projeto fantástico.

[@barata_voadora]

Canal pequeno com muito conteúdo parabéns irmao continue assim !!

[@WaltterQuinn]

Show. Parabéns pelo trabalho man

[@faba00r0chjr7]

Sou fã desse cara oh, só projeto top, valeu mesmo mano !!!

[@viniciuslima9814]

Só vem com projetos excelentes, parece que lê minha mente

[@ManualdoDev]

Hehehehe booa, Vinicius! Tamo junto, cara!

[@dener.criarbr]

confesso que ate hoje o projeto mais legal seu foi o backend e frontend juntos aquilo foi fantastico, quando puder faz outro por exemplo controle estoque ou um sistema de agendamento para autonomos

[@wemersonalmeida2335]

Qual o titulo do video desse projeto?

[@dener.criarbr]

​@@wemersonalmeida2335 lista de tarefa com html css sao 2 video 1 do back end e outro de frontend

[@tonyls0367]

muito show, fiz e funcionou redondinho, tudo certo! como faço pra colocar botão emoji?

[@netocajeh]

Cara que conteúdo show!!!! Parabéns cara! Vou ficar mais esperto no seu canal, uma riqueza de conteúdo pra treinar JS e pra portfólio pessoal

[@ManualdoDev]

Tamo junto, meu amigo! Obrigado pelo apoio!

[@WebTechmoz]

Voce é bom demais heeee um abraço de Moçambique

[@ManualdoDev]

Um abraço, amigo! Tamo junto 👊

[@dulii4238]

Magnifico demais Manual do Dev, kakakakakaka, po eu queria saber seu nome cara, mas mano, seus videos sao otimos, muito bons mesmo, cara tras mais conteudo pra gente, relacionado a frameworks, eu particularmente trabalho com Angular e se voce trouxesse um conteudo de Angular ia ser magnifico, mas idependente do ter framework ou nao, os videos sao perfeitos, meus parabens

[@developerjs-jr8237]

Só tenho uma palavra, parabéns, que didática! 🎉🎉🎉

[@imparcialista]

eu amo seu canal, parabéns, você é incrível

[@samuelarildo2387]

SHOW DE BOLA SEUS PROJETOS

[@dener.criarbr]

conteudo show de bola, sua didatica eh incrivel cara e seus projetos relevantes parabens mesmo

[@davidm.1263]

Não sabia essa do “Watch” legal.

[@josephmatheus3718]

Like antes de assistir!! depois volto hehehe Canal top demais! aparece mais vezes mano! ❤

[@ManualdoDev]

aí simm, Joseph! Valeu demais, cara! Parecerei sim heheh

[@Pablo_Frk]

Obrigado pela contribuição

[@Sabretooth2]

espero um dia conseguir fazer projetos assim completamente sozinho, mas atualmente muito difícil

[@mw16ferrer11]

1:38:08 alguém me explica como que ele fez para aparecer esse terminal dessa forma? eu não consegui fazer essa parte que ele chama de "commit" esse comandos que ele escreveu, simplesmente não são reconhecidos no terminal

[@DANIEL-lw2xd]

Alguém pode me ajudar? Eu não consigo passar dessa parte aqui 👉 35:18, os botões de escrever a msg e mandar fica separado a e muito largos ai fica um la em cima e o outro pra cima e o outro la em baixo, já não sei pq fazer fiquei o dia td tentando arrumar mais to desistindo chat { background-color: #555; 81 width: 100%; 82 height: 100%; 83 85 display: flex; flex-direction: column; justify-content: space-between; Eu coloco exatamente como ta mais mesmo assim fica tud separado e muito largo

[@felipenonato1621]

As vezes o erro pode ser no seu html, se vc estiver usando o visual code, muito provável q ele tenha fechado alguma tag automaticamente e vc n viu , meu amigo fechou a tag do form e ele tava com o mesmo problema aí consegui ajudar ele, vê se a tag do form fechou na mesma linha.

[@felipenonato1621]

Se tiver ocorrido isso, a classe q vc colocou lá nem está sendo usada no css

[@pedronascimento979]

Quem estiver com problemas em rodar o NPM RUN DEV, no meu server.js comentei as linhas do dotenv e eu consegui fazer o servidor rodar, espero ter ajudado alguém

[@cryptosbrazil]

Muito legal, parabéns

[@thiagocavalcante6414]

Eu fiquei tão entretido que nem percebi que o vídeo era de 1hr,obrigado pela vídeo aula,agora eu so queria saber como eu importo isso para um aplicativo So que filtrado

[@petres171]

mn faz uma parte dois do vídeo, tipo, adicionando sistema de guardar login do usuário, as horas que foram enviadas as mensagens, etc, eu ia gostar muito

[@N0TZ3R0]

Fantástico, keep up the good work 💪

[@fibeck2613]

cara vc é show d+!

[@d4ito]

Muito top! Conteúdo de qualidade 👏

[@ManualdoDev]

Valeu demais! Tamo junto!

[@williamsnts6500]

Cara, você poderia dar continuidade implementando mais funcionalidades, como: Envio de mensagens privadas, mostrar quem está online, moderação (me coloca de adm)... E então deixa online com alguns anúncios pra gerar uma receita.

[@igorfidelis2384]

Parabéns para você por mostra e encinar seus conhecimentos para todos, aproposito qual o nome do tema que você esta usando ?

[@PabloHenrique-pi1pc]

Achei muito legal so queria saber como eu fixo as mensagens pra salvar no banco usando uma rota / que busque todas as informações de dentro do próprio codigo e salvo no banco de dados

[@darksideeditions4251]

Sabe o que eu nunca vi em conteudo brasileiro? Chamada de voz. Séria legal se você soubesse explicar sobre.

[@ManualdoDev]

é uma boa, em!

[@rikimariano9024]

Seria muito bom chamada de vídeo 😊

[@alexsandro666]

meu amigo, gostei do vídeo e tenho uma dúvida, como q eu poderia fazer um mapa simples por exemplo com o opentreetmap pegar a localização de usuários logados e mostrar a posição deles no mapa para todos que estivessem logados e se possível dar um alerta assim que um se aproximar do outro?

[@marconny3364]

No meu a parte do servidor tá dando error: (Emitted 'error' event on WebSocketServer instance at: at Server.emit (node:events:514:28) at emitErrorNT (node:net:1899:8) at process.processTicksAndRejections (node:internal/process/task_queues:82:21)) Alguém sabe o que pode ser?

[@Kelvin_jfn]

Completei o Jogo da Memória ontem e hoje vou brincar aqui.

[@ManualdoDev]

Por enquanto só esse mesmo hehehe

[@Hinrikao]

Pode atualizar um novo esse config de vscode completo por favor, gostei muito desse!

[@lataazul]

Uma pergunta: Porque usar "arrow function" ao invés de "função normal"? Por exemplo, na função getRandomColor... Há alguma regra de quando é melhor uma ou outra? Ou é questão de preferência?

[@ManualdoDev]

Nem sempre é questão de preferência. A gente percebe mais essa diferença quando estamos trabalhando com classes e objetos. Quero trazer um vídeo sobre isso. É um assunto bem legal. Mas basicamente eu considero as seguintes vantagens em usar Arrow Function: 1. Sintaxe Concisa: Geralmente a gente escreve menos, fica fácil de entender e também é legal hehehe 2. Binding de this: Arrow functions não têm seu próprio this. Elas herdam o this do escopo de onde foram definidas. Isso pode ser útil para evitar problemas de binding do this em callbacks e métodos de instâncias. Pode parecer uma coisa complicada, mas não é hehe Na prática, eu só uso função normal quando essa parada do "this" me obriga. Já fiz projetos que tava batendo muita cabeça com erros e quando fui ver era por conta que tava usando Arrow Function. Vou trazer um videozinho curto falando disso. É um assunto importante :D

[@canalQuimeraAdm]

Rapaz... ficou SHOWW.... mas me diz uma coisa... nesse mesmo estiloi é possivel usar banco de dados e ao inves de um chat, ser um formulário para armazenar respostas que um usuário for digitando???

[@brunaalves-iw5fo]

Muito bom o projeto, bem desafiador. Tive um erro com .querySelector no navegador retornava como null, o que pode ser?

[@iamsleepy-2457]

eu tenho uma pergunta a respeito da aparência do terminal e do vs code, como faz pra deixar igual o seu?

[@israel.reis.pereira]

O começo eu não entendi bem, como você utilizou o websocket no começo? Precisou instalar e como? Quando criou a pasta do projeto CHAT [WSL: UBUNTU] você fez algo a mais além de colocar esse nome? Porque o meu está completo mas quando aperta para enviar as mensagens elas não aparece na tela, se puder esclarecer essas dúvidas ficaria grato e valeu pelo ótimo vídeo.

[@jefersonsantos8762]

Ele faz parecer tão simples, mas na hora de colocar a mão na massa e fazer sozinho e mo difícil kkkkkk, mas um dia eu chego nesse nivel.

[@LuizHenrique-sq7bd]

Mas assim q é massa po, o ngc é praticar mesmo

[@jefersonsantos8762]

@@LuizHenrique-sq7bd verdade ai tu tem um ponto kkkk,

[@ronicarvalho3386]

o chato é que o video esta desfocado. funciona no subime??

[@maathmatics]

muito top

[@mywork6882]

Boa noite e ae belez? tem como fazer e como podemos fazer para quem logar só conseguir falar com algum usuário padrão? ou seja, se entrar com nome Peter, ele só consegue falar com algum ADM definido....seria algo mais p suport ao usuario

[@RiderFlames]

eu aqui aprendendo java e pensei vou me entrar em um projeto pra colocar no linkedin estudo na faculdade de engenharia de software a 2 anos achei curso que em videos de 9 minutos me ensinou mais que a faculdade em 1 ano kkkkkk n quase nada de java script mais to aprendendo e vou mexer nesse projeto e ir estudando mais e mais kkk

[@RiderFlames]

Pulei etapas demais kkk vou voltar a estudar a base primeiro 20 minutos de vídeo me senti burro e acabei de pensar que tô no ramo errado vou voltar pro meu curso de Java script

[@aconfusa]

consegui depois de 10 meses !!!!

[@cordeiroaraujo3189]

eu também kkkk

[@cordeiroconfuso]

eu tambem consegui !!!

[@Leossj1]

Tem alguma biblioteca que explica passo a passo sobre Websockets?

[@Islandboy-g2i]

Estou fazendo no terminal pq n tenho acesso a ide, e queria saber uma coisa Eu fiz até a parte 1:01:20 No caso como eu n estou usando ide alguém sabe uma maneira de fazer esse teste, eu rodo o npm start, mas como acesso a página para lá no terminal do npm aparecer o "cliente connected", se alguém souber me ajuda pfv

[@deyvidsilva7343]

Por curiosidade não tá usando por qual motivo?

[@flipskies3807]

estou aprendendo faz um mês, o nível desse exercício para um junior conseguir fazer? tô procurando uma base

[@OMunis]

Manual do Dev faz um video ensinando a fazer um weather app mas só com html, css e js por que eu não tenho react js nem tailwing css no meu notbook

[@LaGarTinhoh]

eu sou iniciante no quesito programador, algm pode me ajudar falando como eu posso usar este terminal do video, o zsh?

[@OndoPlay]

Oi! Eu não queria ver, por isso copiei o código no repositório. Mas, quando fiz isso, a conexão com WebSocket deu errado

[@enigmasdamusicaacriacao]

Posso dar o comando cmd para meu Pc em língua portuguesa?

[@andreanjunior5138]

muito bom

[@Zentrox83]

*Ei colega, eu posso pegar o seu código e usá-lo como base pra modificar e adaptar pra um projetinho de produção que estou querendo fazer?* 🙂 *Eu tava procurando uma espécie de Web Chat onde todo mundo pudesse conversar através do navegador, sem aplicativo, e o seu código é exatamente o que eu procuro kkk.*

[@ManualdoDev]

Pode usar, amigo! Sem problemas!

[@franciscoigor8515]

alguem poderia me ajudar o meu nao aparece nehuma mudança feita no css

[@moisesmarques-ww4xq]

como eu coloco esses chat ai no terminal. Eu escrevo chat e so da erro

[@david_laionce]

seguir o passo a passo, mas quando coloco no terminal node src/server.js não aparece nada

[@srjhonzin2339]

Eu baixei o repositório do GitHub mais não está funcionando

[@enigmasdamusicaacriacao]

Como um humano trabalha como servidor central enviando dados e mensagem?

[@keomarenato6845]

Vai ter mais projetos de ReactJs ??

[@ManualdoDev]

Vai sim, em!

[@allanmenezes5898]

Alguem que saiba pode me esclarecer eu fiz um projeto react separado em duas pastas uma sendo a backend e a outra sendo a frontend mas a parte do backend fiz usando o json-server mas não consigo hospedar alguém pode me responder

[@JulioCesar-gv5mr]

uma dúvida que tenho, caso esse sistema seja implementado em uma conversa com duas pessoas, uma manda uma mensagem importante para a outra e que, por sua vez, tem seu ponto de acesso interrompido pela queda de energia, sendo assim, aquela pessoa perdeu a conversa, correto ? mas, dá para contornar isso utilizando banco de dados ?

[@otamat320]

Só de curiosidade qual a extensão você usa para aparecer o nome no terminal sem mostrar onde que ele está localizado dentro do PC, no seu terminal aparece backend direto, no meu aparece as pastas e depois o backend, isso é realmente uma extensão ou uma configuração do VS, caso seja uma configuração, tem vídeo explicando como que faz para deixar dessa forma, pergunto isso pois visualmente é muito mais agradável.

[@ManualdoDev]

Não é bem uma extensão. É como um "terminal novo". No windows você já tem algumas opções como o powershell e tudo mais... Esse aí que você viu, que fica bonitinho é o ZSH. Porém pra ficar com essa aparência você precisa instalar o Oh My ZSH junto. Parece muita coisa, mas é bem simples hehe. O problema é que não dá pra instalar nativamente no windows, então você teria que usar o WSL no windows e instalar o zsh e o Oh My ZSH no WSL. Tem um vídeo bem legal do @OtávioMiranda que ele ensina a fazer essas instalações. kzbin.info/www/bejne/r17aXpqXotVni5Ifeature=shared

[@otamat320]

@@ManualdoDev Muito obrigado por ter me ajudado.

[@reigado3281]

Precisa desse wsl?

[@Dan-Seven]

Cara posso pedir pra você trazer o mesmo conteúdo usando o react native? Eu queria muito um app disso

[@Sammdev]

cara to fazendo agora e deu B.O no meu servidor eu faço o login mas nao aparece no terminal "client connected" o que que eu faço?

[@ManualdoDev]

Da uma olhada do console do navegador e ver se aparece algum erro

[@Manuelesteves-2848sb]

Podes criar um site de mensagens ,basico ,nao precisa de tantos codigo ,no html,css,js

[@enllyn]

Mano eu quero fazer isso, preciso criar um chat online privado e sem guardar as mensagens, eu não entendo nada do que ele tá falando, por onde eu começo? Alguém me ajuda

[@roberioalbuquerque3222]

o meu sempre ta dando erro, até a parte de receber uma mensagem uqando alguém se conectasse no servidor ok, mas quando precisei criar o alert pra receber mensagem do servidor, começou a dar o erro EADDRINUSE, dizendo que a minha porta 8080 ja estsva em uso, ja troquei umas 3x e continuo sem conseguir prosseguir :(

[@ManualdoDev]

Que estranho, Roberio... Tenta matar todos os processos node que estão rodando pra ver se ajuda. Roda o comando killall node no terminal.

[@pubggames575]

Opa amigo depois de 3 dias com esse mesmo bug, eu consegui resolver. Não sei se é o seu caso.... O meu também estava dando esse mesmo erro EADDRINUSE, também troquei de porta e não funcionou. Depois verifiquei no terminal e vi que a porta 8080 não estava sendo usada. Ai depois de tentar tudo isso eu decidir apagar todo o projeto e fazer do 0. Ai quando eu rodava o npm start para iniciar o server.js aparecia a seguinte frase DESEJA FINALIZAR O ARQUIVO EM LOTES S/N?. No primeiro projeto eu encerrei em lotes e tava dando erro. Ai quando apaguei e refiz o projeto mas fechado tudo de uma vez o sistema parece que matou todos os processos que estavam rodando e funcionou perfeitamente.

[@Manuelesteves-2848sb]

Valeu

[@hstecnologia]

Pode postar pra portifólio amigo ??

[@ManualdoDev]

Pode sim, amigo! :D

[@hstecnologia]

@@ManualdoDev Top mano curto demais seus tutorias rsrs vc é fera só uma duvida a minha imagem ficou tipo reptindo coloquei no-repeat mas chega um certo ponto a imagem acaba rsrsr

[@josuealves7929]

Top

[@vitoriabakugou1033]

vei eu envio mensagem ela n aparece oq sera:

[@vandeilsonbatista7746]

Finalmentee

[@pietromassensine2071]

O texto da mensagem ta saindo fora da caixa de mensagem, alguem pode me ajudar?

[@pietromassensine2071]

Descobri aqui gente! Na parte do css, procurem a class .message--self e no final do código coloquem word-wrap: break-word. E vai estar funcionando!

[@LucasBelato-w5m]

Na class .chat_messages > div, coloca isso word-wrap : break-word;

[@pietromassensine2071]

@@LucasBelato-w5m vlw irmão

[@LuaDeFreitasRamos]

@@LucasBelato-w5m Vlw

[@politflix]

top d+ \o/

[@RealLifeSuperheroes-Official]

nao envia as mensagens

[@cordeiroconfuso]

ainda sequer aprendi a intalar as extenções!!! kkkk

[@cordeiroconfuso]

agora conseguiu pow kkkkkkkk 10 meses depois!!!!

[@aconfusa]

hahaha vc conseguiu

[@DaviCalô-y5r]

'WebSocket is not a constructor' 😭😭

[@petres171]

parei nos 42:16

[@Manuelesteves-2848sb]

Valeu