Node Recipe 00: Socket Drawings

    Node Concepts

    • Using Socket.IO to send and receive realtime data in Max .
    • Extracting dictionary data from JSON to a Jitter Matrix
    • Combining server, client, and web interface
    • Adding mobile interactions to a Max project


    Connecting a Max patch to interactive data is a fundamental interest many of us share. This recipe provides a quick dive into Socket.IO, a full-featured realtime data package for Node that can handle everything from chat to image and data transfer. Here, we create a simple drawing interaction that has both a web and Max front end that can communicate together. This could serve as the first step in an interactive art installation or crowd-interaction performance experience when combined with the rich media available in Max.


    • ExpressJS : quick and easy web server package for node
    • Socket.IO : Node package for real-time communication over a network
    • dict.iter: unroll a dictionary into a series of smaller dictionaries

    Things to Note

    1. Socket.IO uses a web server to route communicate between different client processes. For this recipe we have a NodeJS script that runs this drawing_server in addition to a client drawing_friends patch/JS combo. The drawing_server also uses ExpressJS to serve up a public webpage that communicates via Socket.IO as well.
    2. While Max most often works best using simple messages and lists, NodeJS tends to rely heavily on JSON data. In this patcher, we pass out the Socket.IO JSON data as a Max Dictionary and use dict.iter to unravel the data from each of the connected peers.
    3. To visualize the incoming peer data, we first pack the coordinates into a Jitter Matrix and send that along to Note that this patch is only rendering the most recent peer locations, but a little texture feedback is used to accumulate gestures.


    • To get started setting up the server, I worked from the Socket.IO Getting Started Tutorial which shows how to set up a simple messaging app. From there, it was simply a matter of determining how to format the communication between Max and the web page. The important thing to do is to make sure you create message handler functions on each end for any messages you’d like to use.
    • Similarly, much of the front-end site (inside /public folder) borrows code provided by Socket.IO, with some additional HTML5 Canvas handling. All of the physical interactions are handled by JQuery for the sake of ease.
    • For each client, we track the location (x, y) and whether they are “active”. On the webpage, this is done using canvas coordinates and in Max we use mouse coordinates from the window. These values are packed into a JSON object and broadcast as a message to Socket.IO.
    • In this recipe, the server is running locally, on your computer, and the website can only be accessed on your computer or local machines in your network, depending on your security settings. One way to make it accessible from any Internet-connected device is to use Heroku or a similar cloud service to host the drawing_server code and public website.

    • Jan 26 2019 | 8:50 pm
      Great Recipe! But whenever i use the page my Max will crash if there's too much information coming in. It works fine if i just make single dots but when i start drawing a line Max just shuts down.
      I'm wondering why this happens?
    • Jan 28 2019 | 5:55 am
      Beautiful recipe, AB! Can't wait for 01.
    • Aug 07 2019 | 4:12 pm
      Thank you!
    • May 20 2020 | 10:46 pm
      Laurens Inauen: Did you get this to work without crashing using It's doing the same for me. Is there a way to try/catch an error to prevent a full out crash?
      EDIT: Max crashes when I stick with the localhost as well. I'm going to try a couple of simple exercises passing basic numbers without the jitter to see what happens. This capability is super cool - as long as it doesn't predictably crash :)
      Very cool introductory concepts though... thanks!!