In this example, we will be using Node.js and Socket.io on the Raspberry Pi to communicate in real-time with web browsers. How could this be used? Let's say you are an artist who uses Max, Pure Data, or ChucK for live performances, and want the audience to be able to interact with your performance. You could use this method to allow audiences to change parameters from the web browsers on their smart phones.
For this example we will be using the osc example patch in Max. The Pure Data and Chuck examples also will work, but to keep things simpler, we will be looking at this one environment.
Starting the Node.js Script
To start the node script for this example, navigate to the osc-examples folder on your Pi and start the script by running node socketio.js. Once you have the script started, leave the window open.
Opening the Test Web Page
Next, you will need to open the test web page in a web browser. You can see in the output of the node script that the HTTP server is listening on port 8080. To open the page, you will need to open the IP address of your Pi at port 8080 in the format of http://x.x.x.x:8080. Replace x.x.x.x with the IP address of your Pi.
Open the Test Patch
As I mentioned earlier, I will be demonstrating this example using the Max osc example patch, but you can use the Pure Data or Chuck examples for the same results. Just as we did when testing communication, we will need to point the patch at the IP address of the Pi.
Once you have changed the IP, you can click the /socketio message button in Max to send a message to the browser! You will see the inputs update with the sent values, and the output printed to the page. You can also send values to Max by changing the inputs and clicking send. You will see the number boxes update in Max.
Behind the Scenes
The Node.js script that is acting as the broker between the web browser and Max is fairly simple. The node script simply listens for OSC messages and passes them to socket.io, while at the same time listening for socket.io messages and passing them to Max via OSC. Here's a simplified snippet of the script that listens for OSC messages and passes them to socket.io.
var udp_server = dgram.createSocket('udp4', function(msg, rinfo) {
// parse message
msg = osc.fromBuffer(msg);
// send args to browser
io.emit('osc', {
x: msg.args[0].value,
y: msg.args[1].value
});
});
Here's a simplified version of sending data from the browser to Max via OSC.
socket.on('browser', function(data) {
var osc_msg = osc.toBuffer({
oscType: 'message',
address: '/socketio',
args:[{
type: 'integer',
value: parseInt(data.x)
},
{
type: 'integer',
value: parseInt(data.y)
}]
});
var port = 9999,
ip_of_computer = '10.0.1.9';
udp_server.send(osc_msg, 0, osc_msg.length, port, ip_of_computer);
});
If you would like to look at the full source of the example, you can find it in the osc-examples GitHub repository.
