Running Box2D on server with Node.js via Socket.io

I was kinda bored from the TV this friday and decided that learning a little more on Node.js was more fun. Once able to run a “Hello World” example, I wanted to advance into working on websockets using Socket.IO. Socket.IO is a library for both browser and server which simplifies working with websockets, and at the same time provides fallbacks for older browsers. It was really easy to get started, sending messages between browser and server after short peek into the docs & examples.

Next step was mixing it all up and adding my favorite js library – Box2D.js! I took the code from my Box2D DOM demo in to the main file and created a module from Box2D, exposed  via module.exports. And shockingly the backend-to-frontend-port worked on (almost) the first run! So now instead of the browser animates it’s own DOM objects via JS, it receives CSS for all objects at 30fps from server!

4 browsers, 2 iPhones and 1 iPad, with a lot of boxes animated in sync:

You can download the source here. . All needed libs are embedded, just run ‘node box2dserver.js’ and host the same folder on your localhost. Also remember to change the ‘host’ address in index.html to the one running Node:

window.socket = io.connect('http://<node-server-IP-or-name-here>:8080');

  • http://www.flashgamer.com Jensa

    Ser helt nydelig ut på Mac’en! Lekker demo! Sliter litt med å få den til å spille på andre devices på samme nett? Siden vises, men kommunikasjonen svikter. Forsøkte dette:

    app.listen(8080,”10.0.1.39″);

    siden 10.0.1.39 er IP’en på Mac’en hjemme hos meg, men fungerte ikke. Triks?

    J

  • http://blog.paal.org paal.org

    Takk :) Fikk publisert min forrige ‘demo’ på CreativeJs i dag og, gøy.

    Sjekk i index.html, kobler den seg opp mot din mac sin ip? Altså:
    window.socket = io.connect(‘http://10.0.1.39:8080′);

  • hivemind

    This is very cool. You have inspired me to start my own experimentation with Javascript and Box2D.

    • John

      You have inspired me to start my own experimentation with Javascript and Box2D

      You are definately right
      more

  • Dima Rudzon

    Niice, thanks for code, it really helped to figure out some things!

  • TETR

    This doesn’t work with recent nodejs version. There is a problem witch the require box2d.js. Did you know why ?

    • paalorg

      Haven’t tried that no. Are you getting any error messages when starting the Node server?

      • TETR

        Yes i get :

        “TypeError: Cannot call method ‘write’ of undefined

        at Console.log (console.js:53:16)
        at Logger.log (C:wampwwwJeuHTML5node_modulessocket.ioliblogger.js:78:
        15)
        at Logger.(anonymous function) [as info] (C:wampwwwJeuHTML5node_modules
        socket.ioliblogger.js:95:14)
        at new Manager (C:wampwwwJeuHTML5node_modulessocket.iolibmanager.js:1
        50:12)
        at Object.exports.listen (C:wampwwwJeuHTML5node_modulessocket.iolibso
        cket.io.js:78:10)
        at Object. (C:wampwwwJeuHTML5jsserver.js:19:31)
        at Module._compile (module.js:456:26)
        at Object.Module._extensions..js (module.js:474:10)
        at Module.load (module.js:356:32)
        at Function.Module._load (module.js:312:12)”

        • paalorg

          Try updating/reinstalling socket.io with npm or d/l.

          • TETR

            Same error. A friend of mine have test on his computer and he have the same problem.

          • paalorg

            Hm, well. It’s “just” Javascript & open sorce, so start debugging and tell me when you fixed it :)

            I can still start the server here with Node v.0.8.19. But I’ve heard that they have rewritten a lot of it in the newest version.

        • GrymmyD

          FYI – The following line (26 of Box2D.js) is the issue:

          Object.defineProperty = function(obj, p, cfg) {

          The issue is that console.js relies on the defineProperty method for setting _stdout and _stderr… I’ve commented out that statement and it runs in Node… I’m early along in development, so I don’t know if there are any side effects, but my guess is that that code was in there for debugging purposes…?

          • http://blog.paal.org paal.org

            Probably, think the only alteration I did to Box2D was to wrap it as a module. And a lot has happened to Node since then :)

  • Nyme

    You did a great job !

    Where can I download the box2D.js file that you use in this demo ?

    • paalorg

      Thanx! :)

      Did you download the source code? Link just below the video.

      • Nyme

        Yes, i did. I was just wondering how i can install it with npm.
        After some research, I found this : https://npmjs.org/package/box2dweb-commonjs, which seems to be nearly the same.

        • paalorg

          Good, I had to wrap it into a module getting it to work on Node.

          PS. I should deploy it on my GIT account, updated with package.json working on newest Node. Just need to find the time….

  • http://artemkoval.com Artem Koval

    Hi! Interesting approach.

    But when I’m trying to run ‘node box2dserver.js’ I’m getting error ‘Cannot call method ‘write’ of undefined’ in the box2dserver.js, line 165.

    Can you help with this issue?

    Thanks, Artem.

    • paalorg

      Hello Artem :) This was written on an earlier version of Node.js and I haven’t had the time to update it yet. See the comments below (by GrymmyD) for a fix, just commenting out the logging.

      • http://artemkoval.com Artem Koval

        Yep, it helped. Thanks a lot, really good starting point to html5 multiplayer physics.