Dibujando con Nodejs, Socket.io y HTML5 Canvas
HTML-код
- Опубликовано: 8 фев 2025
- Aprende a crear una pizarra de dibujo dentro del navegador web utilizando la API Canvas de HTML5, unido a un servido de Nodejs a través de socketio para tener una conexión en tiempo real.
CURSO DE NODEJS:
• Nodejs Curso Desde Cer...
CURSO DE WEBSOCKETS:
• Socket.io | Curso Prác...
CÓDIGO FINAL:
github.com/Faz...
VISUAL STUDIO CODE
• Visual Studio Code, Ed...
VISITA MI SITIO WEB PARA MAS CURSOS Y CONTENIDO
www.faztweb.com
blog.faztweb.com
FAZT - RUclips:
/ fazttech
TWITTER
/ fazttech
INSTAGRAM
/ fazttech
FACEBOOK
/ fazttech
DISCORD
/ discord
#nodejs #canvas #html5 #websockets
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
Fazt, lo que haces por la humanidad no tiene precio!!!. Prometo que cuando consiga un trabajo te hago una donación. Deberías crearte una cuenta en Patreon o algo así. Muchas gracias por tu aporte.
Te mereces todo el sueldo de mi profesor
Fazt Code gracias estoy aprendiendo programacion eres el mejor muchas gracias por tus ejemplos y videos.
Gracias fazt, Dios le bendiga enormenmente por aportar tanto.
Eres el puto amo!!, evoluciono mucho viendo tus videos :)
Hola Fazt, no me he perdido ningun video, la verdad que da gusto lo que sabes y como lo explicas, los ejemplos practicos son de lo mejor!!
Quisiera ver videos de como organizar la arquitectura de una app con muchas clases, mucha logica y separada en backend, frontend, explicado de como funciona toda la logica del proyecto, ya sea uso de interface, etc. Gracias espero leas y nos ayudes!!
Es una buena idea, tomaria batante tiempo, pero sí planeo hacerlo, de hecho el día de hoy publico un ejemplo un poco largo en el canal principal, pero ya estoy preparando ejemplos con frameworks web y aplicaciones moviles :)
@@FaztCode Estaré esperando más videos, mi idea es separar la lógica de la interfaz de usuario. No es algo que haya visto por acá, aparte de que no he visto videos como los tuyos y que sepa tanto.
Muchas gracias por este video.
Fazt últimamente estas subiendo contenido muy interesante !!! Sigue adelante... :D :D
Muchas gracias por el tutorial, aprendi mucho
hola, el socket.js el socket cliente sir para un servidor con socketIO pero en python flask???
Hola, si alguien quiere hacer que esto también funcione en móviles, y se les presentan los siguientes problemas, les comparto como pueden arreglarlo.
1. En móviles no se dibuja en el canvas: Esto es (según lo que vi) porque en móviles los eventos que se "disparan" al tocar el canvas no son 'mouse****', sino 'touch****', y estos TouchEvent tienen propiedades un tanto diferentes, por lo que hice fue crear funciones nuevas que en base a las coordenadas del toque, emita artificialmente un evento 'mouse****'. Y posteriormente, añadir estos eventos al canvas
~~~
const downTouch = e => {
const touch = e.touches[0];
const mouseEvent = new MouseEvent("mousedown", {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(mouseEvent);
}
const moveTouch = e => {
const touch = e.touches[0];
const mouseEvent = new MouseEvent('mousemove', {
clientX: touch.clientX,
clientY: touch.clientY
})
canvas.dispatchEvent(mouseEvent)
}
const upTouch = () => {
const mouseEvent = new MouseEvent("mouseup", {})
canvas.dispatchEvent(mouseEvent)
}
canvas.addEventListener('touchstart', downTouch, false)
canvas.addEventListener('touchmove', moveTouch, false)
canvas.addEventListener('touchend', upTouch, false)
~~~
Con esto ya pude dibujar en teléfono, pero tenía otro problema, que era
2. La primera línea empieza desde una esquina, y las posteriores empiezan donde terminó la anterior: Esto es porque digamos que se queda "guardada" la posición, porque en computadora, al mover el mouse al no estar escribiendo, se cambia la posición, cosa que en móviles, al no tener mouse, no pasa. Esto tardé un poco más en resolverlo pero la solución fue bastante fácil, solo hay que actualizar las coordenadas del mouse al empezar el "toque", por lo que nuestro evento "mousedown" quedaría así
~~~
canvas.addEventListener('mousedown', e => {
mouse.pos.x = e.clientX / width
mouse.pos.y = e.clientY / height
mouse.click = true
})
~~~
Hay que tener en cuenta que lo puse en el evento mousedown en vez de touchstart ya que en la solución anterior hicimos que cada vez que se "dispare" el evento touchstart, se haga un "mousedown" artificialmente.
saludos code espero y sigas subiendo bro, soy el joven que te pregunto sobre que lenguaje aprender jeje.
Yimi VReyes no soy Fatz pero una pregunta que talves te pueda ayudar a entender. Que cosas quieres contruir quieres construir para la Web or para mobiles ( android or Apple)
Android y y escritorio amigo.
hola
en vez de hacer emit por cada elemento en el array, por qué no enviar el historial completo en otro evento y añadirlo al array con concat?
socket.emit('history', line_history);
socket.on('history', history => line_history.concat(history));
Hay una forma de poder implementar socket.io a php sin utilizar nodejs....o depende de nodejs?
sí se puede usar con php
👍👏
Genial
Sería genial un vídeo de subir nodejs q un vps :D
claveee
Excelente, aunque después del "for" ya no se podía actualizar el navegador para limpiar la pantalla. 🐱👤
Hola Fazt. Tengo una duda, tengo abierto un socket. En unas cuantas líneas de código hice un mini Google Docs.
El tema es que funciona a través del evento "onChange" de JS. De tal forma que cuando el usuario que manipula el contenido; éste cuando se replica en los otros clientes, vuelva a entrar en el mismo "onChange" y se queda atrapado repitiéndose ilimitadas veces. No logro resolverlo.
Aquí anexo el diagrama de lo que sucede para ilustrar el caso.
wbo.ophir.dev/boards/jV-L8Qmq-bQeR47HSj1IRAZjqEbO-ASBoF-mwLbH95I-
Qué podría hacer, o qué recomendarías para este caso. El socket está configurado en PHP.
Big boss
As un tuto donde expiliques y ensines como crear un sistema de login con MYSQL y q guarde en cookie
estoy escribiendo esto mientras youtube esta caido
hola.. muy buenos tu videos.. una pregunta como se haria para dibujar en la pagina web desde una telefono ??