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

No video

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

Рет қаралды 25,483

Күн бұрын

Nesse vídeo, vamos aprender a criar um chat em tempo real usando basicamente JavaScript puro e colocá-lo online de graça! Sim, você vai poder conversar com seus amigos usando o seu próprio chat online!
Repositório do projeto:
github.com/man...
Compartilhe o seu projeto e marca lá no LinkedIn do Manual do Dev:
/ manualdodev
Resumo do que você vai aprender com esse vídeo:
Nesse vídeo, vamos criar um backend simples usando Node.js e vamos desenvolver um frontend usando HTML, CSS e JavaScript puro. Em seguida, vamos conectar os dois. Vamos criar componentes estilizados e bem bonitos usando CSS puro e manipulá-los de forma dinâmica através do nosso JavaScript!
No final, vamos fazer o deploy do nosso backend e do nosso frontend de graça!
Etapas do vídeo:
00:00:00 - Introdução e demonstração do projeto
00:02:11 - Estrutura, ferramentas e pré-requisitos
00:04:24 - Backend
00:17:20 - Frontend: HTML e CSS
00:49:19 - Frontend: JavaScript
01:29:58 - Deploy
#javascript #html #css #websocket

Пікірлер: 119

@guilbervieira 4 ай бұрын

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

@GabeWentz 9 ай бұрын

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 9 ай бұрын

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

@zolkmusic 9 ай бұрын

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

@ManualdoDev 9 ай бұрын

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

@bell7956 3 ай бұрын

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

@antoniocarlosdiniz 8 ай бұрын

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.

@jair-souzaft 7 ай бұрын

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

@peter8796 7 ай бұрын

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

@nilsonamaral9935 4 ай бұрын

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

@dhsplays07 9 ай бұрын

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 9 ай бұрын

Rapaz ele é bom mesmo rsrs pratico e objetivo

@Gal4xyTm 9 ай бұрын

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.

@AlexandreLiberato-tn4wh 2 ай бұрын

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 2 ай бұрын

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á!

@darksideeditions4251 9 ай бұрын

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

@ManualdoDev 9 ай бұрын

é uma boa, em!

@rikimariano9024 3 ай бұрын

Seria muito bom chamada de vídeo 😊

@rafaellalopes7824 5 ай бұрын

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

@NG_MODS 4 ай бұрын

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 4 ай бұрын

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 4 ай бұрын

@@allanmenezes5898 Muito obg mn. Ajudou muito

@geraldocoelho2392 Ай бұрын

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

@nicolasferreira5573 6 ай бұрын

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

@netocajeh 9 ай бұрын

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 9 ай бұрын

Tamo junto, meu amigo! Obrigado pelo apoio!

@Riz_Rizu 8 ай бұрын

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

@WaltterQuinn 9 ай бұрын

Show. Parabéns pelo trabalho man

@DamiaoSouza-qc3pb 6 ай бұрын

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

@developerjs-jr8237 9 ай бұрын

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

@barata_voadora 7 ай бұрын

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

@viniciuslima9814 9 ай бұрын

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

@ManualdoDev 9 ай бұрын

Hehehehe booa, Vinicius! Tamo junto, cara!

@faba00r0chjr7 7 ай бұрын

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

@samuelarildo2387 6 ай бұрын

SHOW DE BOLA SEUS PROJETOS

@imparcialista 8 ай бұрын

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

@hono5185 8 ай бұрын

O cara é uma máquina de javascript

@josephmatheus3718 9 ай бұрын

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

@ManualdoDev 9 ай бұрын

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

@dener.criarbr 9 ай бұрын

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

@Pablo_Frk 4 ай бұрын

Obrigado pela contribuição

@DANIEL-lw2xd 5 ай бұрын

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

@K00LD 3 ай бұрын

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

@dulii4238 9 ай бұрын

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

@cryptosbrazil 8 ай бұрын

Muito legal, parabéns

@d4ito 9 ай бұрын

Muito top! Conteúdo de qualidade 👏

@ManualdoDev 9 ай бұрын

Valeu demais! Tamo junto!

@tonyls0367 4 ай бұрын

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

@dener.criarbr 9 ай бұрын

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 9 ай бұрын

Qual o titulo do video desse projeto?

@dener.criarbr 9 ай бұрын

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

@davidm.1263 7 ай бұрын

Não sabia essa do “Watch” legal.

@PabloHenrique-pi1pc 4 ай бұрын

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

@pedronascimento979 2 ай бұрын

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

@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

@fibeck2613 9 ай бұрын

cara vc é show d+!

@marconny3364 9 ай бұрын

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?

@lataazul 3 ай бұрын

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 2 ай бұрын

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

@N0TZ3R0 9 ай бұрын

Fantástico, keep up the good work 💪

@williamsnts6500 4 ай бұрын

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.

@petres171 9 ай бұрын

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

@ronicarvalho3386 3 ай бұрын

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

@jefersonsantos8762 9 ай бұрын

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 9 ай бұрын

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

@jefersonsantos8762 9 ай бұрын

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

@mywork6882 6 ай бұрын

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

@Kelvin_jfn 2 ай бұрын

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

@ManualdoDev 2 ай бұрын

Por enquanto só esse mesmo hehehe

@iamsleepy-2457 3 ай бұрын

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

@Hinrikao 5 ай бұрын

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

@Leossj1 4 ай бұрын

Tem alguma biblioteca que explica passo a passo sobre Websockets?

@andreanjunior5138 4 ай бұрын

muito bom

@vandeilsonbatista7746 9 ай бұрын

Finalmentee

@brunaalves-iw5fo 8 ай бұрын

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

@OMunis 9 ай бұрын

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

@igorfidelis2384 9 ай бұрын

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

@david_laionce 3 ай бұрын

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

@enigmasdamusicaacriacao 5 ай бұрын

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

@franciscoigor8515 3 ай бұрын

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

@Manuelesteves-2848sb 5 ай бұрын

Valeu

@srjhonzin2339 Ай бұрын

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

@israel.reis.pereira 6 ай бұрын

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.

@enllyn 2 ай бұрын

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

@josuealves7929 4 ай бұрын

Top

@Sammdev 13 күн бұрын

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 13 күн бұрын

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

@enigmasdamusicaacriacao 5 ай бұрын

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

@flipskies3807 8 ай бұрын

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

@Zentrox83 5 ай бұрын

*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 5 ай бұрын

Pode usar, amigo! Sem problemas!

@Manuelesteves-2848sb 5 ай бұрын

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

@otamat320 2 ай бұрын

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 2 ай бұрын

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. kzfaq.info/get/bejne/r5OnYMqS0taYhWQ.htmlfeature=shared

@otamat320 2 ай бұрын

@@ManualdoDev Muito obrigado por ter me ajudado.

@JulioCesar-gv5mr 7 ай бұрын

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 ?

@dhsplays07 9 ай бұрын

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

@allanmenezes5898 8 ай бұрын

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

@vitoriabakugou1033 16 күн бұрын

vei eu envio mensagem ela n aparece oq sera:

@reigado3281 6 ай бұрын

Precisa desse wsl?

@politflix 9 ай бұрын

top d+ \o/

@keomarenato6845 9 ай бұрын

Vai ter mais projetos de ReactJs ??

@ManualdoDev 9 ай бұрын

Vai sim, em!

@roberioalbuquerque3222 8 ай бұрын

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 8 ай бұрын

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 5 ай бұрын

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.

@cordeiroconfuso 6 ай бұрын

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

@pietromassensine2071 7 ай бұрын

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

@pietromassensine2071 7 ай бұрын

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!

@user-fv4fc8je1j 5 ай бұрын

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

@pietromassensine2071 5 ай бұрын

@@user-fv4fc8je1j vlw irmão

@LuaDeFreitasRamos 2 ай бұрын

@@user-fv4fc8je1j Vlw

@hstecnologia 9 ай бұрын

Pode postar pra portifólio amigo ??

@ManualdoDev 9 ай бұрын

Pode sim, amigo! :D

@hstecnologia 9 ай бұрын

@@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