Socket.IO
Description
This component allows you to connect Socket.IO clients to blokdots. This way you can connect your hardware with other software, through blokdots.
We are using Socket.IO v4, but clients with a minimum of v2 should work. We only support the websocket transport.
Functions
Links
Our Socket.IO integration creates a Socket.IO server, so that you can use an existing Socket.IO client or create your own to connect to blokdots and exchange messages. It allows you to read sensor data or control hardware outputs from whatever other tool or application you have in mind.
We are using Socket.IO v4, but clients with a minimum of v2 should work.
websocket transport.Message format
When you listen for a message from our server or want to send a message to blokdots, the first argument of the message should always be blokdots, so that we know that this message is intended for us. The second parameter in the message is an object with two parameters msg and val.
{
msg: "poti",
val: 10
}
Usage in blokdots
The msg parameter is the same as the text in the message field of the Socket.IO server component used in your project. The val parameter represents the value attached to the message. In the example above, we have are using a potentiometer with an If-Then card and the sentence "If Potentiometer changes, then Socket.IO Server should send poti". The latest value from the potentiometer will be automatically attached to val.
If you want to display a string value you've received from a message, you can enter {{value}} into the textfield of a Then-Card, i.e. to display the incoming message on an LCD display.
If you're developing in JavaScript, the call to send a message to blokdots could look like this:
socket.volatile.emit("blokdots", { msg: "SetBrightness", val: 50 });
We recommend the use of volatile, but it is not required.
In order to listen to messages from blokdots, you can create an event handler like this:
socket.on("blokdots", (data) => {
if (data.msg && data.msg === "buttonPressed") {
// what shall we do when the button was pressed?
}
});
Example blokdots project
Here you can download an example project that works together with the Grove Beginner Kit. It will send a Socket.IO message when the button is pressed or the potentiometer is changed. When ever the server receives a count message, we will confirm by letting the LED blink.
Node.js client
We provide a simple Socket.IO client in a Node.js script to connect with blokdots. You can use this as a base for your own experiments.
TouchDesigner
To connect TouchDesigner with blokdots, you can make use of the SocketIO DAT. Here you can download an example TouchDesigner project that has a pipline set up from blokdots to a constant CHOP. It uses the potentiometer's values from the example project above.
Processing / P5
Especially when working with p5.js it's fairly straightforward to include a Socket.IO client and connect to the blokdots server.
You can find some small example projects here.
Framer
If you want to connect blokdots to Framer and you're comfortable developing custom code components with React, it's also possible to include a Socket.IO client inside a Framer code component and then talk to the blokdots server.
We did a proof-of-concept for using Code Overrides with a Framer version of 2021, but didn't get too far in that direction. Things might be different now and in any case you could build your own custom components. Feel free to talk to us on our Discord if you want to try something out.