Diversión con HTML5 canvas y socket.io

dual3nigma · #1 (**permalink**) 23/12/2011, 22:44

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

mariomon17 · #2 (**permalink**) 27/12/2011, 20:18

Como se controlan los muñequitos?

Muy bueno dual3nigma, me encantan estos experimentos.

Un saludo :)

Carlangueitor · #3 (**permalink**) 28/12/2011, 00:32

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

mariomon17 · #4 (**permalink**) 28/12/2011, 16:00

Pues en Chrome, Windows Vista no funciona con las flechitas :S

Carlangueitor · #5 (**permalink**) 28/12/2011, 16:01

Lo acabo de checar y es con ASDW, teclas de los juegos

dual3nigma · #6 (**permalink**) 28/12/2011, 18:19

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

Saludos!!!!

cristian_cena · #7 (**permalink**) 30/12/2011, 02:27

Muy bueno dual3nigma, soy uno más de los que están a la espera del código. Gracias por compartir tus experimentos.

Felicitaciones.

dual3nigma · #8 (**permalink**) 30/12/2011, 20:25

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

Carlangueitor · #9 (**permalink**) 30/12/2011, 20:30

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

Saludos

dual3nigma · #10 (**permalink**) 30/12/2011, 20:58

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

Carlangueitor · #11 (**permalink**) 30/12/2011, 22:05

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

Carlangueitor · #12 (**permalink**) 30/12/2011, 22:27

Demonios!! me piden tarjeta de crédito para lo de Amazon!, tendré que buscar otra opción.

dual3nigma · #13 (**permalink**) 30/12/2011, 22:40

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

mariomon17 · #14 (**permalink**) 30/12/2011, 22:54

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

dual3nigma · #15 (**permalink**) 30/12/2011, 23:08

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!

Carlangueitor · #16 (**permalink**) 30/12/2011, 23:15

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

alejandromg · #17 (**permalink**) 30/12/2011, 23:21

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.

dual3nigma · #18 (**permalink**) 30/12/2011, 23:55

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

Carlangueitor · #19 (**permalink**) 30/12/2011, 23:59

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

dual3nigma · #20 (**permalink**) 31/12/2011, 00:07

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

dual3nigma · #21 (**permalink**) 31/12/2011, 00:13

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

alejandromg · #22 (**permalink**) 31/12/2011, 13:44

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.

dual3nigma · #23 (**permalink**) 31/12/2011, 15:51

Hola alejandromg gracias por los datos :D le echare un ojo al rato!!!!

mgocx · #24 (**permalink**) 10/01/2012, 13:52

Gracias a esto se pueden lograr Videosjuegos RPG online muy fácilmente!
Saludos Gracias Por Compartir!!!

Exzce · #25 (**permalink**) 07/03/2012, 07:51

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