How to Send and Receive Messages Between a VPL and Your Browser Using a WebSocket

In this article, you are going to learn how to send and receive OSC (open sound control) messages using Max/MSP with your browser. You can also follow this tutorial to send and receive OSC messages from Chuck and Pure Data (Pd) with your browser.

OSC is a protocol for communication between computers and other multimedia devices. This simple yet powerful protocol provides everything needed for real-time control of sound and other media processing while remaining flexible and easy to implement. It can be seen as the successor of the MIDI.

We will use the node.js to receive the messages and will forward these to the browser through a WebSocket server.

Required Installations

1. In order to create a WebSocket server, download and install the latest version of node.js. From the link, go along with the setup process.
2. Install socket.io which makes the communication between the browser and Max/MSP possible. Type the following command in the terminal to install socket.io: npm install socket.io.

Download and Run the Browser App

We need to get the examples folder from GitHub and install the dependencies using NPM (node package manager). The examples require the latest stable version of node.js (>= v0.12.0) to be installed.

Type the following command to clone the repository from GitHub:
github clone https://github.com/toddtreece/osc-examples.git && cd osc-examples

Then type npm install to install the dependencies.

Inside the folder, print.js - prints received messages from the MaxMSP, PD, or Chuck OSC examples. It also sends one message back every second.

socketio.js - demonstrates communicating through OSC with a web browser in real time using socket.io and node.js to translate messages to and from Max/MSP, PD, or Chuck.

Now we need to run the socketio.js. Move to the directory of the example folder in the CMD and type node socketio.js.

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 system.

Run Max/MSP

To run the Max/MSP sketch, go to the Max folder and run the osc.maxpat file. 

To send the data from Max/MSP to the browser, type /socketio 40 44 in the space highlighted in the image below and the data will be printed on the browser side.

To send the data from the browser to the Max/MSP, type the data that you want to send on the browser side and it will be printed on the Max/MSP side.

Similarly, you can send and receive the data from Chuck and PD using your browser.