Network

The network contains function blocks for implementing network access. These function blocks are categorized based on different protocols, such as HTTP, WebSocket, and MQTT.

HTTP

Node-App provides two methods for making HTTP requests: one is to use a directhttp GET to request URL data; the other is to create an HTTP client using the http client block and then send a request with the client's http client GET block.

The key difference between the two methods is that http GET uses a complete URL to make requests, while the HTTP Client allows users to dynamically modify the URL origin (including protocol, hostname, and port) during runtime. For example, suppose a program needs to access the HTTP service of a hardware module, such as an ESP32. If the module operates within a local area network (LAN), it may receive a different IP address each time it starts. Consequently, the request URL must also be updated accordingly. While users can modify the URL parameters ofhttp GET to adapt to changing IP addresses, this approach requires additional code blocks and UI elements. In contrast, the http client provides a UI button for modifying the URL origin, making the process much simpler.

http GET

http GET is a block with a C-shaped statement input. It initiates an HTTP GET request, with the URL connected to the right-side input socket. The HTTP response includes a status code (status) and response data (data), which are stored in specified variables. The status code is a numeric value, while the response data is of text type. Once the response is received, the nested blocks are executed, allowing access to the response details via the specified variables. If the request fails due to network issues, a timeout, or an invalid URL, the status is set to -1.

http GET supports JSONP cross-origin requests. In this case, the data type of the returned response is determined by the JSONP server. See Browser Restrictions JSONP.

The status code definitions for HTTP responses can be found at developer.mozilla.org/Status. Common status codes include:

Status	Description
200	OK (Request Succeeded)
301	Moved Permanently
400	Bad Request
401	Unauthorized
403	Forbidden
404	Not Found
500	Internal Server Error

Attributes

• method - Request method:
  • GET - Initiates an HTTP GET request.
  • JSONP - Initiates a cross-origin request using JSONP.
• status@ - The variable name to store the response status code (number). Default is Status.
• data@ - The variable name to store the response data (text or defined by JSONP server). Default is Data.

Example

1. HTTP GET queries the api.weatherapi.com weather API. The returned status code is stored in the Status variable, while the response text is stored in the Data variable.
2. Check if the returned status code indicates success (200 OK).
3. If the request is successful, convert the response text into a JSON object and use the icon URL to update the Icon image.

Online examples: Http-Weather, Jsonp-Dictionary.

http client

http client is an HTML control block that appears as an HTML button in the interface.

The ID attribute is a unique identifier for the UI element and the specific client. Blocks interacting with the client use this ID to reference it.

Clicking the button opens the target URL origin settings:

HT Settings

URL Origin

http://https://

See http client set url origin for setting details. Settings are stored in the browser's local storage.

Applying the CSS class hidden hides the button. In this case, the URL origin can be set programmatically.

Attributes

• ID - The client's ID.

http client open settings

http client open settings provides a way to open the HTTP client settings through code block. The settings are normally opened by clicking the button. When the control is hidden, or you want to open the settings in a custom way (such as clicking a custom button), use http client open settings.

Attributes

• ID - The client's ID.

http client get settings

http client get settings is used to retrieve the HTTP client's settings. The returned data is a JavaScript object. If the client hasn't been configured, it returns an empty object {}. See http client set url origin for setting details.

Attributes

• ID - The client's ID.

http client set url origin

http client set url origin sets the HTTP client's target URL origin in the program. The URL origin can be set through the UI (user setting), or by the http client set url origin block in the program (developer setting).

The target URL origin is connected to the right-side input socket as text. The URL origin includes the protocol, host, and optional port, for example:

• https://nodematrix.cc
• http://192.168.1.100:8080

Attributes

• ID - The client's ID.

http client GET

http client GET is similar to http GET, but the request parameter is the path part of the URL (including query parameters). The request parameter is connected to the right-side input socket. The client combines the path parameter with the protocol, hostname, and port defined in the URL origin to form a complete URL. http client GET does not support JSONP cross-origin requests.

Attributes

• ID - The client's ID.
• status@ - The variable name to store the response status code (number). Default is Status.
• data@ - The variable name to store the response data (text). Default is Data.

WebSocket

WebSocket is a communication protocol commonly used for real-time two-way communication between a client (browser) and a server.

A WebSocket client consists of:

• UI Control – websocket client serves as the UI control. Event Handling – Client events such as starts, connected, closed, and receives trigger the corresponding event blocks (when websocket xxx). Function Calls – Client functions include setup, connecting/disconnecting, and sending messages. These actions are performed using the corresponding function blocks.

websocket client

websocket client is an HTML control block that appears as an HTML group in the interface.

WS

The ID attribute is a unique identifier for the UI element and the specific client. Blocks interacting with the client use this ID to reference it.

The control has built-in client setup and connect/disconnect functions, and handles reconnection and status indication. Clicking the Setup button opens the target URL settings:

WS Settings

URL

ws://wss://

See websocket set url for setting details. Settings are stored in the browser's local storage.

Clicking the Connect button will establish a connection to the WebSocket server using the target URL, trigger a connection event, and update the control's connection status. The websocket connect event block can be used to handle the event accordingly.

Applying the CSS class hidden hides the control. In this case, the control's operations (setup, connect/disconnect) can be performed using the corresponding function blocks. This is suitable for WebSocket clients controlled by the program without user interaction.

Attributes

• ID - The client's ID.

websocket open settings

websocket open settings provides a way to open the WebSocket client settings using code block. The settings are normally opened by clicking the Setup button on the control. When the control is hidden, or you want to open the settings in a custom way (such as clicking a custom button), use websocket open settings.

Attributes

• ID - The client's ID.

websocket get settings

websocket get settings retrieves the WebSocket client's settings, returning a JavaScript object. If the client is not configured, it returns an empty object {}. See websocket set url for setting details.

Attributes

• ID - The client's ID.

websocket set url

websocket set url sets the WebSocket client's target URL in the program. The target URL can be set through the UI (user setting), or by the websocket set url block in the program (developer setting).

The target URL connectes to the right-side input socket as text. For example:

• wss://bemfa.com:9504/wss
• ws://192.168.1.100/socket/cmd

Attributes

• ID - The client's ID.

websocket connect

websocket connect controls the WebSocket client's connection or disconnection in the program.

Attributes

• ID - The client's ID.
• action - Action:
  • connect - Connect.
  • disconnect - Disconnect.

websocket send

websocket send sends messages after a successful WebSocket connection. The text message to send connectes to the right-side input socket.

Attributes

• ID - The client's ID.

websocket connect event

websocket connect event handles WebSocket connection events, including start, connected, and closed. When the WebSocket client triggers a connection event, the program jumps to the corresponding websocket connect event block to start execution.

Attributes

• ID - The client's ID.
• event
  • starts - Connection starts. Triggered when the client initiates a connection.
  • connected - Connection successful. Triggered when the client connects successfully.
  • closed - Connection closed. Triggered when the client connection fails or disconnects. After an abnormal disconnection (not manually disconnected), the client will automatically reconnect, no handling is needed here.

when websocket receives

when websocket receives handles WebSocket message reception events. When the client receives a message, the message content is saved to the specified variable, triggering the receives event. Then, the program jumps to the corresponding when websocket receives block to start execution.

Attributes

• ID - The client's ID.
• message@ - The variable name to store the received data (default: Message).

MQTT

MQTT (Message Queuing Telemetry Transport) is a lightweight publish/subscribe message transport protocol designed for the Internet of Things (IoT) field.

An MQTT client consists of:

• UI Control - mqtt client serves as the UI control.
• Event handling - Client events such as starts, connected, closed, and receives trigger the corresponding event blocks (when mqtt xxx).
• Function calls - Client functions include setup, connecting/disconnecting, subscribing to topics, and publishing messages. These actions are performed using the corresponding function blocks.

Online Example: MQTT-Message

mqtt client

mqtt client is an HTML control block that appears as an HTML group in the interface.

MQ

The ID attribute is a unique identifier for the UI element and the specific client. Blocks interacting with the client use this ID to reference it.

The control has built-in client setup and connect/disconnect functions, and handles reconnection and status indication. Clicking the Setup button opens the client settings:

MQ Settings

Protocolwssws

MQTT Version3.1.13.15.0

Host

Port

Path

Client ID

User Name

Password

See mqtt set options for setting details. Settings are stored in the browser's local storage.

Clicking the Connect button will establish a connection to the MQTT broker using the settings, trigger a connection event, and update the control's connection status. The mqtt connect event block can be used to handle the event accordingly. After a successful connection, you can subscribe to MQTT topics or publish messages through function blocks.

Applying the CSS class hidden hides the control. In this case, the control's operations (setup, connect/disconnect) can be performed using the corresponding function blocks. This is suitable for MQTT clients controlled by the program without user interaction.

Attributes

• ID - The client's ID.

mqtt open settings

mqtt open settings provides a way to open the MQTT client settings using code block. The settings are normally opened by clicking the Setup button on the control. When the control is hidden, or you want to open the settings in a custom way (such as clicking a custom button), use mqtt open settings.

Attributes

• ID - The client's ID.

mqtt get settings

mqtt get settings retrieves the MQTT client's settings, returning a JavaScript object. If the client is not configured, it returns an empty object {}. See mqtt set options for setting details.

Attributes

• ID - The client's ID.

mqtt set options

mqtt set options sets the MQTT client in the program. The MQTT client can be set through the UI (user setting), or by the mqtt set options block in the program (developer setting). Settings are provided as JSON text, connectes to the right-side input socket. The JSON settings include the following key-value pairs:

• protocol - Connection protocol, default value wss.
• protocolVersion - MQTT protocol, values:
  • 3 - MQTT v3.1
  • 4 - MQTT v3.1.1 (default)
  • 5 - MQTT v5.0
• hostname - MQTT broker hostname.
• port - MQTT port.
• path - MQTT path.
• clientId - MQTT client ID.
• username - MQTT username.
• password - MQTT password.

Attributes

• ID - The client's ID.

mqtt connect

mqtt connect controls the MQTT client's connection or disconnection in the program.

Attributes

• ID - The client's ID.
• action - Action:
  • connect - Connect.
  • disconnect - Disconnect.

mqtt subscribe

mqtt subscribe subscribes to a topic after a successful MQTT connection. The topic is connected to the right-side input socket as text.

Attributes

• ID - The client's ID.
• qos - The desired Quality of Service (QoS) value for the subscription.

mqtt publish

mqtt publish publishes a message after a successful MQTT connection. The topic and message are connected as text to the right-side topic and message sockets.

Attributes

• ID - The client's ID.
• qos - The Quality of Service (QoS) value used for publishing.

mqtt connect event

mqtt connect event handles MQTT connection events, including start, connected, and closed. When the MQTT client triggers a connection event, the program jumps to the corresponding mqtt connect event block to start execution.

At this point, initial topic subscription is usually performed, or relevant buttons are enabled/disabled.

Attributes

• ID - The client's ID.
• event
  • starts - Connection starts. Triggered when the MQTT client initiates a connection.
  • connected - Connection successful. Triggered when the client connects to the broker. Typically used for initial topic subscriptions.
  • closed - Connection closed. Triggered when the connection fails or disconnects. After an abnormal disconnection (not manually disconnected), the client will automatically reconnect, no handling is needed here.

when mqtt receives

when mqtt receives handles incoming MQTT messages. When a message is received, the topic and content are saved to specified variables, triggering the receives event. Then, the program jumps to the corresponding when mqtt receives block to start execution.

Attributes

• ID - The client's ID.
• topic@ - The variable name to store the message topic (default: Topic).
• message@ - The variable name to store the message content (default: Message).