P5 and websockets

If your microcontroller can connect to the internet, you can use websockets to send data from your microcontroller to a web browser. Websockets are a way to send data from a server to a client (or from a client to a server) without having to refresh the web page. This is very useful if you want to send data from your microcontroller to a web browser in real time.

Websocket server

In order for a p5 application to receive data from a microcontroller using websockets you need to run a websocket server. For testing purposes you can use socketsbay.com. This is a free websocket server that you can use to test your p5 application. You can also use socketsbay.com to test your microcontroller code. The following example shows how to run a websocket client in p5.js:

Websocket client in p5.js

The following example shows how to run a websocket client in p5.js:

let socket;

function setup() {
    createCanvas(400, 400);
    socket = new WebSocket('wss://socketsbay.com/wss/v2/1/demo/');
    socket.onmessage = function (event) {
        console.log(event.data);
    }
}

function draw() {
    background(220);
}

Websocket client in Arduino (ESP32)

Here’s an example of the color picker code using websockets: