Chat en TIEMPO REAL con Node.js, Socket.io, SQL, HTML y CSS
HTML-код
- Опубликовано: 24 июл 2024
- Descubre cómo crear un emocionante chat en tiempo real con Node.js, Socket.io, HTML y CSS en este tutorial paso a paso. Aprende a establecer conexiones en tiempo real y mejora tus habilidades de desarrollo web. ¡Comienza a construir tu propio chat ahora!
Durante el video, cubriremos:
• La configuración inicial del entorno de desarrollo.
• La creación del servidor Node.js y la integración de Socket.io.
• El diseño y estructura del chat utilizando HTML y CSS.
• La gestión de eventos en tiempo real para enviar y recibir mensajes.
▶ No te pierdas más directos en: / midudev
▶ Repositorio: github.com/midudev/curso-node-js
00:00:00 - Inicio
00:01:23 - Qué es Node?
00:03:32 - TCP
00:03:51 - HTTP vs Web Sockets
00:16:22 - Cuál es mejor?
00:17:48 - Creando Proyecto e instalando dependencias
00:18:57 - Creando el servidor
00:21:31 - Instalando Morgan Qué es?
00:23:43 - Servir HTML
00:28:24 - Creando el websocket
00:33:16 - Creando el cliente
00:36:46 - Agregando estilos
00:38:41 - Comunicar Cliente con Servidor
00:41:46 - Comunicar Servidor con Cliente
00:44:32 - Creando mensajes (CSS y HTML)
00:48:07 - Por hacer (problemas)
00:50:24 - No perder información por of-line (desconexión)
00:53:55 - Persistencia de Datos
00:54:38 - Creando una BD
01:00:29 - Creando una tabla
01:03:05 - Resultado de la query
01:08:25 - Ultimo mensaje a enviar
01:09:52 - Recuperar los mensajes anteriores
01:14:47 - Creando usuarios random
01:16:21 - Generando usuarios
01:17:16 - Ocupando usuario
01:20:02 - Socket handshake
01:21:18 - la coma (,)
01:22:39 - Probando midu-chat
01:23:54 - Corrigiendo error al recuperar la info de usuario
01:25:21 - Agregándole CSS
01:26:30 - Agregando Scroll (hacia abajo)
01:28:01 - Subiendo la clase al repositorio
01:28:33 - Tu tarea 🤓
01:29:33 - Despedida 
Наука
Muchas gracias midu, de verdad, la forma en la que explicas primero dando una introducción visual antes de pasar al codigo es excelente.
yo soy muy visual así que me viene de maravilla.
De verdad que explicas mejor que muchos profesores 👏👏
Es una locura lo mucho que se aprende con vos Midu! Mejor que muchos profesores universitarios! 😁😁
Hola. En que tipo de proyectos trabajas?
@@gonzalotorres5238 ahora web app con angular y Spring boot
INCREIBLE lo que sabe este muchacho!!!.
Genio midu!! cada video que veo aprendo 300 cosas nuevas y soluciones a problemas que no se me hubiera ocurrido. gracias genio! saludos de Argentina!!
Resulta impresionante ver como te es tan natural y sencillo compartir tu conocimiento. Gracias Midu!
Magistral midu!!!, no sabes lo mucho que nos ayudas!!!! muchas gracias. 👏👏👏
Gracias Midu, me han gustado un monton estos videos y los cursos que has estado subiendo , la arquitectura y demas , estuvo genial !
Hoy no me perdí tu stream, muchas gracias por las palabras que me diste y el apoyo que me diste igualmente, te lo agradezco midu ♥♥💪💪
Hola. En que tipo de proyectos trabajas?
es increible que justo hoy me decidi a hacer esto, y hace 1 hora sale este video. Quería hacerlo sin frameworks de frontend.
midu es un grande algun dia podre verte a los ojos y decirte "lo logre midu" porque gracias a ti me he dado cuentas de muchas errores, métodos, una mente progresiva que quiera cada dia avanzar mas!!
El truco para poder ver los ultimos mensajes del chat estando en los primeros de este quedo genial y lo demas extraordinario.
Lo esperaba con ansias midu, graciaaaas!
Que hermosura de clase! Muchas gracias 🎉
¡Muy bueno! 👏
Tu te lo haces todo, el front, el back, la base de datos, .... todo.
Esto demuestra lo facil que se pueden hacer las cosas, y como nos complicamos en ocasiones.
Gracias Xavi! Un abrazo! Espero que vaya todo genial!
pero si es un genio como no va hacer todo, jaja
excelente clase, aprendí mucho!
como se dice en inglés: "What a legend Midu!"
muchísimas gracias!
Muchas gracias! 😊
@@midulive una pregunta:
se puede hacer utilizar Turso para recrear la base de datos de la clase 5? ya que Planetscale no ofrece ese servicio..
Mil gracias
GENIO!! Gracias por compartir tu conocimiento sos un grande Midu
Gracias Midu! Curso fantástico desde la raíz, lo recomendaré por todos lados!
Un crack don Midu!!!
aunque un web-eo utilizar el Turso con windows.
Tuve que instalar una consola de ubuntu, posteriormente me daba el siguiente problema: WSL error exec: “xdg-open,x-www-browser,www-browser,wslview”: executable file not found in $PATH
lo solucione con los siguientes codigos (desde consola ubuntu)
sudo add-apt-repository ppa:wslutilities/wslu
sudo apt update
sudo apt install wslu
Espero que les sirva.
gracias crack
@@devvvolf si todo un problema instalar en windows
gracias crack, me salio y el mismo error y me ayudo
genial curso de principio a fin visto y estudiado Gracias midu nunca pares👏
justo necesitaba sockket io para un proyecto de la u de un ramo, muchas gracias miduuuu
Justo lo que nececitaba Miduu!! Te amo gracias saludos desde Uruguay jaja
Julio 2024, funcionó a la perfección el Tutorial, pude instalar Turso en Windows... todo una maravilla 👌🏻✨
Justo lo necesitaba, gracias ❤ :3
Estaba esperando estoo!!!!! gracias!!!
Estuve todo el fin de semana buscando una base de datos para mi api de prueba, y la tenia tan cerca! No sabes lo bien que terminé mi finde gracias a que me compartieron este video midu! Saludos desde Argentina!
Me alegro, crack!
Excelente explicacion de socket!. Gracias desde Mar del Plata - Argentina
Gracias a ti
Un grande midu, ayudas mucho, sigue asi crack!
ultimamente estas haciendo unos videos super buenos
Muy bueno el curso, muchas gracias!
Que buenísima introducción!!!!!
Muy epico! Buen video :D ❤❤
Hola midu! gracias x tanto y tan buen contenido. Seguro ya lo descubriste pero el problema con el connectionStateRecovery era q habia q pasarle maxDisconnectionDuration
Impresionante!
¡GRACIAS MIDU!
No lo hizo con Turso, porque no me funcionaba, lo hice con MySql
de la clase 5 y todo me funciona de maravilla!
MIL GRACIAS POR COMPARTIR TUS CONOCIMIENTOS,
TE QUIERO ♥
Saludos Cordiales,
Desde Perú.
Crack midu, exitos!!! Y gracias!!
Te quiero mucho midudev
Yo mirando sin saber mucho del tema muy bueno
que maestro🏴☠
Gracias midu por compartir tus clases!! Estaría bueno implementar una aplicación usando docker
Hola. En que tipo de proyectos trabajas?
:) aprendiendo a usar la herramienta de desarrollador con vos
Excelente!
buen contenido audiovisual.
Una locura total si des clien side los WS parten a la gente pero el Midu los parte como todo un DEVOPS
midu cuando haras un video sobre microservicios gracias por tu contenido de calidad crack
Que contenido mas excelente.
Mil gracias!
Saludos profesor... Muchas gracias por el tiempo dedicado, esta clase estuvo buenísima... Le pido si es posible incluya entre las clases futuras el diseño e implementación de un Tablero de Mando en Javascript o Node... Muchas gracias
Hola. En que tipo de proyectos trabajas?
Gracias midu
Genial¡
Saludos Midu, Gracias por el contenido. Podrías hacer un video sobre herramientas/complementos/componentes de react que usas
PLS
Hola. En que tipo de proyectos trabajas?
Midu el proceso para utilizar react con node es de la misma forma que utilizaste para enlazar el html con process.cwd al bundle cuando corres npm run prod en react?
gracias midu
una base de datos mas dificil de instalar no habia?
Es una barbaridad de codigo.
websocket serviría para hacer una conexión con un sistema de cobro por qr y esperar a que se realice el pago para continuar con la compra o pago de servicios?
Hola, dónde podría desplegar un servidor de sockets que siempre mantenga el mismo puerto?, en heroku me cambiaba el puerto cada vez q se reiniciaba el server
fuaa ojala la universidad le diera emocion para enseñar
Midu (o alguien), como se instala Turso en windows por favor??? No logro hacerlo... 😕🙏🙏🙏
mas claro que mi profe de redes en la u
Midu me gustarias que hablas un poco sobre seguridad al momento de desarrollar aplicando cifrado RSA entre API y Cliente
Hola. En que tipo de proyectos trabajas?
Holle tienes videos muy interesantes, voy a ver si tienes php y JavaScript que me parece que lo vamos a usar en el cursillo dentro de una semana. Tiene prácticas en empresa y tengo que esforzarme para llamar la atención, quiero ir volando los próximos meses
para el tema de los loggers, es mejor pino por tema de performance o winston es mejor?
Hola! clase magistral... gracias! si el chat tubiera miles de usuarios, guardar cada mensaje en cada evento en la DB, no la saturaría? puede la DB manejar es carga? o habria que implementar otra forma de persistir los mensajes?
como puedo hacer, para que unicamente el modulo de chat esta incrustado en la pagina de otro dominio??? gracias
Tengo una duda, se pueden usar en conjunto protocolos socket y http? oh en caso de querer usar ambos sistemas en mi aplicacion debo hacer 2 backs separados?
*¡AQUI!*
💡💡Para los que quieran instalar turso en windows tienen que hacerlo a traves de un shell de linux, primero habria que instalar ubuntu mediante WSL, no es muy complicado ya pude instalarlo sin problemas
gracias por el dato, algun tutorial de como instalar la consola de lnux?
@@fedescarpecci6677 en youtube hay bastantes. Yo lo que tuve que hacer luego de instalar wsl fue instalar brew, despues de eso recien ahi pude instalar turso. Podes buscar un blog sobre como instalar brew con wsl
Hola, yo lo instale en la distro de Debian, aun asi cuando trato de ejecutar los comandos turso db create no me los reconoce
Venía bucando este comentario... intentaré probarlo. Gracias!
Hola Midu, quiero saber, con cuál protocolo puedo hacer un websocket para el tráfico de los bits de un video en tiempo real
que onda, cual tema o plugin estas usando para que el cursor se redimensione mientras esta inactivo?
Gracias Midu! excelente tutorial! Me podrías decir cual es el navegador que usas?
Me parece muy interesante, pero en ambientes productivos que tan fácil es escalar web sockets?
como hago para que el archivo package lock este dentro del package.json
hola me lanza el siguiente error: node:internal/modules/esm/resolve:854
throw new ERR_MODULE_NOT_FOUND(packageName, fileURLToPath(base), null);
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@libsql/client' imported from C:\Users\pcdam\Desktop\chat-node\server\index.js ayuda porfa
BU-E-NI-SI-MO !
como se llama la extencion que hace como un autocompletado?
Estuvo re-genial el tutorial.
saludos midu muchas gracias ojala lo continues o lo integres a otra app
Por supuesto!
No puedo installar turso en windows, a alguien mas le pasó? o hay alguna alternatida de servicio sql gratuita?
no la he podido instalar tampoco en win11
es sencillo solamente instalar ubuntu por WSL
Cual seria la diferencia entre Socket y Chat Box
Cual es la extencion de vscode que usa midu para que el package.json se pueda colapasar con el package-lock, el gitignore y todo eso?
Es github copilot pero es de paga
@@danielroa9618 que?, me refiero a la extensión que hace que los archivos de configuración se vean como una carpeta
Esté será el final del curso?
no consigo instalar turso en windows :c
edit: ejecute el comando curl en git bash y me dice
"Operating system MINGW64_NT-10.0-19045 is not supported by this installation script"
Té amo
Yo lo estoy haciendo con termux ❤
Intente instalar turbo y me decia que esa linea de comandos no estaba en el codigo
y ahora como se sube eso a internet, yo estoy ahi, la url nose cual esss probe con todo pero nadaaa
🥰🥰🥰🥰
Miduuuu, ayudaaa porfa... Minuto 34:10 el vinculo no existe, meto otro que encontré y tampoco avanzo... ¿Que hago?
hola midu cuando envio el formulario el mensaje se agrega en la url y me refresca la pagina ayudaa use el prevenDefault
e.preventDefault() debería de ser llamado de esa manera
Al separar el css en un styles.css y lo mismo para el script.js y utilizar igualmente bien el link con su href y src , en el localhost obtengo un error de MIMO type
Para los que quieran usar los estilos y el js de manera externa, pueden crearlos en la carpeta client y agregar esta linea en el archivo index.js del server:
// Configuración para servir archivos estáticos
app.use(express.static('client'));
y en el html la ruta para el estilo dentro de client seria asi:
La herramienta que usas para predecir codigo es de VSCode? O como haces para que VSCode te muestre esas predicciones de codigo como en el minuto 32:04
El copilot de GitHub es el que lo hace
tiene github copilot
es copilot, hay un trial de unos días, luego de eso, subscripción mensual de 10 dólares, o anual. Es realmente útil la verdad, siento que vale muchísimo la pena la inversión.
cuando hago el comando para instalar turso, funciona pero me responde esto:
Operating system MINGW64_NT-10.0-19045 is not supported by this installation script
alguien me hecha un cable? windows esta actualizado, i el WSL i el kernel me da miedo liarla, no entiendo mucho de sistemas
a mi tambien me salta error con Windows 10
Cuidado Mark zukerberg ahí va tu némesis
Pregunta random midu: Qué paquete de iconos utilizas en vscode?
Lo has descubierto? Jajajja también estoy buscándolos
Morgan es como nodemon?
Me pregunto si será posible que mi g0d Midu siga con este curso integrando sequelize ORM
Deberias intentar utilizar el mismo motor de BD del video pasado que no a todos nos funciona turco y los que tenemos windows 11 nos da problema el wsl2, asi que nada me quedo a la mitad del video
Tuve que utilizar vmware y Kali xd
hola midu tengo un problema que al enviar el menssage se agrega en la url y no se inserta el msg ayudaaa
no lo entiendo, por que ocultar el token si esta todo en github, por cierto gracias por este curso
Poyin!
Podes sumar un video explicando como usarlo en windows? Intente con WSL pero no pude :c
llegaste a instalar ubuntu?
@@eldamdyx Sisi pero igual no me deja instalar turso :c
@@sewa-devsi instalaste Linux tenés que chequear que tenés brew para usar el cli de turso, si no lo tenés intenta instalarlo
Alguien sabe porque solo un cliente recibe la información de su propio mensaje? Los demás no. Copie bien todo
No puedo instalar turso DB en Windows
llegaste a instalarlo?
X2, alguién lo logro??
X3
el comando solo funciona en un shell de linux compañeros
Wsl
Alguien tuvo problema al utilizar turso con windows? estoy tratando de instalar wsl desde el powershell para poder instalar luego turso pero me devuelve esto:
Se devolvió esta operación porque se agotó el tiempo de espera.
Probe varias formas relacionadas con la configuración de red y otras cosas y no he podido
@@CamilaCitro-k5h puedes utilizar directamente la librería LibSql, que es la que usa Turso para manejar las consultas, y seguir utilizando una db Sqlite
55:49