Socket.IO is a technology for real-time, bidirectional, and event-driven communication. It is built on top of WebSocket, providing a higher-level abstraction while offering fallback options such as long polling to support a wider range of browsers and environments. This makes Socket.IO more flexible and robust, especially in scenarios where compatibility and reliability must be considered.
In this article, we will introduce how to quickly set up a real-time communication application using Socket.IO. This includes establishing Socket.IO connections on both the server and client sides, as well as examples of sending and receiving messages through events.
You can use the following example to quickly understand WebSocket setup and run a test:
Sample Application: Socket.IO - Basic
Before proceeding, please refer to the WebSocket usage method. See: WebSocket Usage Example.
Prerequisites – Setting Up a Test Socket.IO Server
Before learning how to use Socket.IO features, you need a test server to establish communication.
If you already have a server, you can connect directly for testing.
If not, follow the instructions to set up your own test server.
Configure Socket.IO Connection
In the Application, add a Generator of type WebSocket.
Connection Information:
URL: Enter the server URL.
Init: Set to Yes (the application will automatically connect to the server at startup).
Message Type: Configure based on the server’s communication requirements. For the sample test server, select Text.
In the Outlets section, add two new Data outputs: Message and Ready State.
Enable Socket.IO:
Enable Socket.IO → Set to Yes to use Socket.IO communication.
Socket.IO Version → Select the version required by your server.
Event Name → The event name to listen for (e.g.,
message).
Once configured, you can communicate with the Socket.IO server. The usage is the same as in the WebSocket example.
Important Notes
If you set up your own server, its URL will start with https.
Example:https://xxxx-xxx-xxx-xxx-xx.ngrok-free.appHowever, in the Socket.IO URL, change
httpstowss.
Example:wss://xxxx-xxx-xxx-xxx-xx.ngrok-free.appLeave the Path field blank.
BRICKS – Receiving Messages
To make it easier to observe the message reception status, design a screen that displays both the connection state and the messages:
Create a Text Brick named Msg. Link its Text property to (Data) Message.
Create a Text Brick named Ready State. Link its Text property to (Data) Ready State.
Open the BRICKS Foundation app on a physical device for testing.
When the app launches, it will automatically connect to the server.
If successful, the Ready State text will display OPEN.
4. When the test server sends a message (e.g., Hello this is a test), the Msg text brick will display the received message.
BRICKS – Sending Messages
To send messages externally, you need to use Actions. Actions can be triggered by Events, such as Brick interactions or Data changes.
Here’s a simple example using a Text Brick with an On Press event to trigger message sending:
Create a Text Brick in the Canvas and set its text to
"Send Hello".In the Events section of the Text Brick, configure On Press.
New Action → Generator: WebSocket
Select Action → WEB SOCKET SEND
Action Property → Value =
"Hi I'm BRICKS"
(You can also link this value to a variable via the chain icon to send dynamic messages.)
Save the settings.
In Preview mode, click the "Send Hello" Text Brick.
On the test server, you should see the message:
"Hi I'm BRICKS".
