Dibujando con Nodejs, Socket.io y HTML5 Canvas

Рет қаралды 14,716

Күн бұрын

Пікірлер: 31

@carlosenriquecastanedaguti8130 6 жыл бұрын

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.

@josequisbert8160 3 жыл бұрын

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

@supermixpc450 3 жыл бұрын

Te mereces todo el sueldo de mi profesor

@alexpineda1720 4 жыл бұрын

Gracias fazt, Dios le bendiga enormenmente por aportar tanto.

@brawnie3969 11 ай бұрын

Muchas gracias por este video.

@andresfidelradarojas9596 3 жыл бұрын

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

@jhonestebanmezarodriguez5063 6 жыл бұрын

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

@sebastianolivera3124 6 жыл бұрын

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 6 жыл бұрын

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 5 жыл бұрын

@@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 5 жыл бұрын

Muchas gracias por el tutorial, aprendi mucho

@jebbarbas 2 жыл бұрын

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.

@JValenteM92 5 жыл бұрын

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

@ricardoolivaresventura4603 4 жыл бұрын

sí se puede usar con php

@JamonDuroMexicano 4 жыл бұрын

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.

@juancarlosaguilera4042 6 жыл бұрын

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

@yimivaldezr7762 6 жыл бұрын

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

@luisavila8421 6 жыл бұрын

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 6 жыл бұрын

Android y y escritorio amigo.

@zaguetszo 6 жыл бұрын

hola