Dibujando con Nodejs, Socket.io y HTML5 Canvas

[@carlosenriquecastanedaguti8130]

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.

[@supermixpc450]

Te mereces todo el sueldo de mi profesor

[@josequisbert8160]

Fazt Code gracias estoy aprendiendo programacion eres el mejor muchas gracias por tus ejemplos y videos.

[@alexpineda1720]

Gracias fazt, Dios le bendiga enormenmente por aportar tanto.

[@jhonestebanmezarodriguez5063]

Eres el puto amo!!, evoluciono mucho viendo tus videos :)

[@sebastianolivera3124]

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

[@FaztCode]

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 :)

[@sebastianolivera3124]

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

[@diegocamilopenaramirez6101]

Muchas gracias por el tutorial, aprendi mucho

[@andresfidelradarojas9596]

hola, el socket.js el socket cliente sir para un servidor con socketIO pero en python flask???

[@brawnie3969]

Muchas gracias por este video.

[@jppachar]

Fazt últimamente estas subiendo contenido muy interesante !!! Sigue adelante... :D :D

[@yimivaldezr7762]

saludos code espero y sigas subiendo bro, soy el joven que te pregunto sobre que lenguaje aprender jeje.

[@luisavila8421]

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)

[@yimivaldezr7762]

Android y y escritorio amigo.

[@zaguetszo]

hola

[@JValenteM92]

Hay una forma de poder implementar socket.io a php sin utilizar nodejs....o depende de nodejs?

[@ricardoolivaresventura4603]

sí se puede usar con php

[@juancarlosaguilera4042]

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));

[@JamonDuroMexicano]

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.

[@robertovr2398]

Genial

[@ErkanOkman]

👍👏

[@luisorellana1252]

claveee

[@andyj9273]

Sería genial un vídeo de subir nodejs q un vps :D

[@jebbarbas]

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.

[@Jannerparejagutierrez]

Excelente, aunque después del "for" ya no se podía actualizar el navegador para limpiar la pantalla. 🐱‍👤

[@JoseAngel-qn8sv]

As un tuto donde expiliques y ensines como crear un sistema de login con MYSQL y q guarde en cookie

[@inversioncomercial]

Big boss

[@percyalvarez2277]

hola.. muy buenos tu videos.. una pregunta como se haria para dibujar en la pagina web desde una telefono ??

[@samuel14luis]

[@zaguetszo]

estoy escribiendo esto mientras youtube esta caido