Foros del Web » Programando para Internet » Node.js »

Diversión con HTML5 canvas y socket.io

Estas en el tema de Diversión con HTML5 canvas y socket.io en el foro de Node.js en Foros del Web. Que tal mis apreciados compañeros!!!!! Pues como les gusto mucho mi ultimo post sobre Real Time con derby http://www.forosdelweb.com/f127/real-time-963345/ Ahora les comparto mi primer experimento ...
  #1 (permalink)  
Antiguo 23/12/2011, 21:44
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 9 años, 3 meses
Puntos: 122
Diversión con HTML5 canvas y socket.io

Que tal mis apreciados compañeros!!!!!

Pues como les gusto mucho mi ultimo post sobre Real Time con derby http://www.forosdelweb.com/f127/real-time-963345/

Ahora les comparto mi primer experimento de estas vacaciones que tanto necesitaba!!!!

Es otro demos real time. El experimento lo podrán ver solo en webkit y gecko, es necesario que lo vean en dos ventanas del navegador, en dos navegadores diferentes, en dos computadoras, lo que prefieran ;)

Pronto subire el codigo a github para que puedan consultarlo. Antes que nada les comento que esto es demasiado experimental, y aun en desarrollo.

Este demo corre en un servidor http://expressjs.com/, utiliza http://socket.io una maravillosa libreria para aplicaciones realtime y html5 canvas con http://easeljs.com/

Es muy importante mencionar que no logre que corriera en https://www.dotcloud.com/ ya que ellos utilizan http://nginx.org/ como proxy server y no soporta web sockets y socket.io aparte tiene problemas con el. Tampoco funciona bien en http://www.heroku.com/, ya que tampoco soportan websockets, solo long polling http://gentle-moon-9207.herokuapp.com/ aquí pueden ver la misma aplicacion en vivo, pero es extremadamente lenta y falla mas.

Hay muchas cosas que apenas estoy aprendiendo y otras que no se por que suceden. Me falta optimizar mucho la comunicación, ya que toda esta sincronización es una tarea muy intensiva que debe de quedar muy bien optimizada para que pueda funcionar bien. No se por que hay un desfase en cuanto a coordenadas, eso mas bien tiene que ver con la parte de la interfaz. Pero bueno, espero subir pronto una actualización y seguirles contando del tema.

Espero sus comentarios, saludos!!!!! :D

http://bit.ly/u0rt1G
  #2 (permalink)  
Antiguo 27/12/2011, 19:18
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 9 años, 7 meses
Puntos: 34
Respuesta: Diversión con HTML5 canvas y socket.io

Como se controlan los muñequitos?

Muy bueno dual3nigma, me encantan estos experimentos.

Un saludo :)
  #3 (permalink)  
Antiguo 27/12/2011, 23:32
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.031
Antigüedad: 11 años, 3 meses
Puntos: 1326
Respuesta: Diversión con HTML5 canvas y socket.io

Si no mal recuerdo se movían con las flechas

Excelente experimento dual3nigma, a ver si saco algo de tiempo libre y me pongo hacer los míos.

Saludos
__________________
Grupo Telegram Docker en Español
  #4 (permalink)  
Antiguo 28/12/2011, 15:00
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 9 años, 7 meses
Puntos: 34
Respuesta: Diversión con HTML5 canvas y socket.io

Pues en Chrome, Windows Vista no funciona con las flechitas :S
  #5 (permalink)  
Antiguo 28/12/2011, 15:01
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.031
Antigüedad: 11 años, 3 meses
Puntos: 1326
Respuesta: Diversión con HTML5 canvas y socket.io

Lo acabo de checar y es con ASDW, teclas de los juegos
__________________
Grupo Telegram Docker en Español
  #6 (permalink)  
Antiguo 28/12/2011, 17:19
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 9 años, 3 meses
Puntos: 122
Respuesta: Diversión con HTML5 canvas y socket.io

Hola!!!! Gracias chicos, me alegra que les haya gustado, seré mas cuidadoso ahora poniendo instrucciones ;)

Saludos!!!!
  #7 (permalink)  
Antiguo 30/12/2011, 01:27
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 10 años
Puntos: 269
Respuesta: Diversión con HTML5 canvas y socket.io

Muy bueno dual3nigma, soy uno más de los que están a la espera del código. Gracias por compartir tus experimentos. Felicitaciones.
  #8 (permalink)  
Antiguo 30/12/2011, 19:25
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 9 años, 3 meses
Puntos: 122
Respuesta: Diversión con HTML5 canvas y socket.io

Gracias compañeros por sus comentarios!!!! Les dejo por acá el código para que le echen un vistazo https://github.com/dual3nigma/Multiplayer-Game-Demo

Espero sus comentarios :D

Saludos!!!!!
  #9 (permalink)  
Antiguo 30/12/2011, 19:30
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.031
Antigüedad: 11 años, 3 meses
Puntos: 1326
Respuesta: Diversión con HTML5 canvas y socket.io

¿Oye solo una duda, entonces la subiste a un VPS tuyo? Ando probando algunas cosas similares pero con WebGL

Saludos
__________________
Grupo Telegram Docker en Español
  #10 (permalink)  
Antiguo 30/12/2011, 19:58
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 9 años, 3 meses
Puntos: 122
Respuesta: Diversión con HTML5 canvas y socket.io

Hola Charly!!!!! Tu avientame las dudas que sea xD

No es un VPS, los VPS son cosa del pasado, lo de ahora son los PAAS, yo todo lo pongo o en Dotcloud, o en heroku o bien en Amazon EC2, esto está en una instancia de EC2, ya que ninguno de los demás servicios tiene soporte para websockets :(


Ahora que lo comentas, este demos lo estaba haciendo en WebGL con http://www.glge.org/ pero se complicaron las cosas xD

Que estas probando tu? Cuenta!!! cuenta!!!!

Saludos :D
  #11 (permalink)  
Antiguo 30/12/2011, 21:05
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.031
Antigüedad: 11 años, 3 meses
Puntos: 1326
Respuesta: Diversión con HTML5 canvas y socket.io

Oh vaya, pues tendré que dejar mi viejo VPS Es que como dijiste que no servía ni en heroku ni en Dotcluod pensé eso.

Tendré que ver esto en Amazon a ver como se usa

Y pues todavía no llevo nada, pero estaba pensando en que tan factible sería un FPS multijugador con solo WebGL, por lo menos algún draft y de ahí optimizar y mejorar.

Yo ando viendo three.js.

Saludos
__________________
Grupo Telegram Docker en Español
  #12 (permalink)  
Antiguo 30/12/2011, 21:27
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.031
Antigüedad: 11 años, 3 meses
Puntos: 1326
Respuesta: Diversión con HTML5 canvas y socket.io

Demonios!! me piden tarjeta de crédito para lo de Amazon!, tendré que buscar otra opción.
__________________
Grupo Telegram Docker en Español
  #13 (permalink)  
Antiguo 30/12/2011, 21:40
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 9 años, 3 meses
Puntos: 122
Respuesta: Diversión con HTML5 canvas y socket.io

Nooo, si ya tienes un VPS pues usa tu VPS, yo decía que el mío no es un VPS y que en todo caso es mejor Amazon EC2 que un VPS, se oye muy interesante lo del FPS y three.js le echare un vistazo a esa librería. Compartenos detalles conforme vayas avanzando porfa :D
  #14 (permalink)  
Antiguo 30/12/2011, 21:54
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 9 años, 7 meses
Puntos: 34
Respuesta: Diversión con HTML5 canvas y socket.io

Cual es la diferencia entre montarte tus servidores en tu VPS a contratar un servicio PAAS?

Y como haces luego? Diriges tu dominio a ese servicio? DNS?

Un saludo, y gracias por la informacion extra :)
  #15 (permalink)  
Antiguo 30/12/2011, 22:08
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 9 años, 3 meses
Puntos: 122
Respuesta: Diversión con HTML5 canvas y socket.io

Hola mariomon17, para mi la ventaja de los PAAS como EC2 es principalmente el costo, ya que pagas lo que usas, en un VPS tienes una cuota fija lo uses o no, por eso a mi me gusta mas EC2, aparte estos cloud hostings por lo general te ofrecen horas gratis, lo que si es que los VPS la mayoría de las veces vienen ya configuraditos y listos y una instancia de EC2 viene sin nada, en cierta forma es cosa de gustos.

Después lo mas fácil es utilizar un cname.

Saludos!
  #16 (permalink)  
Antiguo 30/12/2011, 22:15
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.031
Antigüedad: 11 años, 3 meses
Puntos: 1326
Respuesta: Diversión con HTML5 canvas y socket.io

Si la opción es el VPS, voy a ver que configuración necesito, por que como de echo lo comparto con alguien más no quiero tumbarle algo También me acabo de encontrar con http://pusher.com/ que ofrece 5 websockets al mismo tiempo gratuitamente, no he visto si me va a servir para lo que quiero pero voy a mirarlo.

En cuanto a los avances los compartiré en un post, por ahora voy a trazar mis planos y a modelar con Blender para empezar.

Saludos
__________________
Grupo Telegram Docker en Español
  #17 (permalink)  
Antiguo 30/12/2011, 22:21
Avatar de alejandromg  
Fecha de Ingreso: noviembre-2011
Ubicación: Tegucigalpa, HN
Mensajes: 35
Antigüedad: 7 años, 7 meses
Puntos: 15
Respuesta: Diversión con HTML5 canvas y socket.io

dual3nigma excelente. Solo queria saber si ya habias visto esto acerca de heroku:

http://devcenter.heroku.com/articles...e-js-on-heroku

y esto:
http://blog.heroku.com/archives/2011..._capabilities/

Yo tengo varias aplicaciones allí y me funciona bastante bien. Lástima que tu código esta en coffee-script :P (/me hides), me hubiera gustado hacer un pull request ;)

Saludos.
__________________
¿Te gusto mi comentario? +1 ;)

Alejandro Morales. La mejor forma de contactarme :: via twitter @_alejandromg
CTO at numbus

Última edición por cvander; 01/01/2012 a las 14:44
  #18 (permalink)  
Antiguo 30/12/2011, 22:55
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 9 años, 3 meses
Puntos: 122
Respuesta: Diversión con HTML5 canvas y socket.io

Hola alejandromg, gracias. Si es lo que comento arriba que Heroku si soporta socket.io pero solo con long polling, no soportan websockets por que dicen que es una tecnología que esta cambiando mucho ahorita, y que una vez que haya algo mas establecido le darán soporte. Esta es una aplicacion de comunicación intensiva ya que cada movimiento debe de tratar de mandarlo a todos los usuarios: "broadcasting volatile" por lo que si se requieren de sockets, en cambio long polling/server side events, etc como fallback para una aplicacion de chat o un muro esta bien ya que no es tan intensivo.

Si, para todo uso coffeescript :/, no sabes cuanto tiempo me ahorra a la hora de hacer estos experimentos.

Saludos y gracias por comentar!!!
  #19 (permalink)  
Antiguo 30/12/2011, 22:59
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.031
Antigüedad: 11 años, 3 meses
Puntos: 1326
Respuesta: Diversión con HTML5 canvas y socket.io

Oye oye!! buscando info sobre WebGL me encontré con esto: http://www.pokki.com/1up/#home No me vendrían mal esos 400,000 pesos!

</offtopic>

Saludos
__________________
Grupo Telegram Docker en Español
  #20 (permalink)  
Antiguo 30/12/2011, 23:07
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 9 años, 3 meses
Puntos: 122
Respuesta: Diversión con HTML5 canvas y socket.io

Hola Carlangueitor, ya que sacas el tema te comento un poco de mi servidor.

Yo estoy utilizando http://redis.io como datastore con hiredis ( un wrapper del cliente oficial en C de redis) por que es muy rápido. Instalar redis es extremadamente sencillo http://redis.io/download

Una manera fácil de correrlo es con screen http://www.gnu.org/software/screen/ que por lo general vendrá instalado ya.

Yo utilizo http://upstart.ubuntu.com/ , http://mmonit.com/monit/ y http://haproxy.1wt.eu/
Pero eso es tal vez mas cuando ya quieres correrlo "enserio"

Ahora para los que quieran probar el código de github, ósea correrlo en sus maquinas es muy sencillo:

Necesitan node.js instalado obviamente con npm y http://redis.io/download

En el directorio hagan "npm install -d" para que se instalen las dependencias del proyecto (express, socket.io, stylus, redis, etc)

Y por utilmo necesitan compilarlo con coffeescript de la siguiente manera: "coffee -o lib/ -c src/"

De ahí solo es cuestión de hacer "node app.js" para iniciar la aplicacion y "ctr+c" para detenerla, ojalá les sirva y si tiene problemas comenten ;)


Saludos
  #21 (permalink)  
Antiguo 30/12/2011, 23:13
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 9 años, 3 meses
Puntos: 122
Respuesta: Diversión con HTML5 canvas y socket.io

Wow que bonito sitio ese de puki, me encanto <3 y de hecho el concurso esta abierto worldwide, solo no puedo descargar el demo :(

Yo ya me metí con Three.js xD Tengo que aprovechar mis últimos días de vacaciones jajaja
  #22 (permalink)  
Antiguo 31/12/2011, 12:44
Avatar de alejandromg  
Fecha de Ingreso: noviembre-2011
Ubicación: Tegucigalpa, HN
Mensajes: 35
Antigüedad: 7 años, 7 meses
Puntos: 15
Respuesta: Diversión con HTML5 canvas y socket.io

dual3nigma claro... Con respecto a CS sin duda que te ahorra tiempo pero ahí dejemoslo :P (js-purista aquí)

Mira no se si conoces el trabajo de[URL="http://rawkes.com/"] Rob Hawkes[/URL], en especial [URL="http://rawkets.com/"]Rawkets[/URL] , vengo siguiendo el experimento/juego desde enero de este año, [URL="https://github.com/robhawkes/rawkets"] es código abierto[/URL], y sin duda una de las cosas que más me gustan de rawkets es lo que él llama: "client-prediction", ya te haz de imaginar a que se refiere, aparte te ayuda a optimizar y evitar realizar tantas interacciones con el servidor o lo que tu llamas intensivo. Sin duda sin quieres entrar de lleno a esto, él y su trabajo es una persona a tomar en cuenta.
__________________
¿Te gusto mi comentario? +1 ;)

Alejandro Morales. La mejor forma de contactarme :: via twitter @_alejandromg
CTO at numbus
  #23 (permalink)  
Antiguo 31/12/2011, 14:51
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 9 años, 3 meses
Puntos: 122
Respuesta: Diversión con HTML5 canvas y socket.io

Hola alejandromg gracias por los datos :D le echare un ojo al rato!!!!
  #24 (permalink)  
Antiguo 10/01/2012, 12:52
Avatar de mgocx  
Fecha de Ingreso: agosto-2010
Ubicación: Argentina - Bahia Blanca
Mensajes: 83
Antigüedad: 8 años, 9 meses
Puntos: 2
Respuesta: Diversión con HTML5 canvas y socket.io

Gracias a esto se pueden lograr Videosjuegos RPG online muy fácilmente!
Saludos Gracias Por Compartir!!!
  #25 (permalink)  
Antiguo 07/03/2012, 06:51
 
Fecha de Ingreso: marzo-2012
Mensajes: 2
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Diversión con HTML5 canvas y socket.io

Tengo una duda sobre socket.io

al conectar el cliente, genero un div en la pagina... pero pasado un tiempo esta conexion se reconecta y me vuelve a crear el div (diplicandolo)..

tengo en la funcion disconnect el remove de dicho div, por ejemplo si cierro el navegador.. este div desaparece para los diferentes clientes que visualicen el sitio.. funcionando bien el disconnect en un unload, pero no si el sitio queda sin movimientos

mi duda es, que paremetro de configuracion, tanto en cliente o servidor es el que maneja este tiempo de reconexion del socket al no generar movimientos en la web.

de ante mano, muchas gracias

Etiquetas: canvas, html5, realtime, websockets
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:16.