Initialization
Developing web apps with React
Last updated
Was this helpful?
Developing web apps with React
Last updated
Was this helpful?
We provide React hooks and context providers out of the box. The library can be found on .
First, install the ux4iot-react library:
You initialize the ux4iot React library by wrapping your components with a Ux4iotContext
There are two modes of operations for the library: Development mode and production mode. The initialization differs between the two modes.
onSocketConnectionUpdate
event listener on socket connection updates
reconnectTimeout
initial timeout in milliseconds when to reconnect after a session couldn't be established
maxReconnectTimeout
maximum timeout in milliseconds of the reconnect interval after incrementation
adminConnectionString
The connection string of ux4iot-server
ux4iotUrl
the websocket url of ux4iot-server
grandRequestFunction
custom function to send grant requests to your custom security backend
The value of the adminConnectionString
option can be retrieved via the Azure portal:
You can select either the Primary or the Secondary connection string.
Under no circumstances should you publish your web application in development mode. It allows anyone with access to the web application to perform any requests towards your IoT devices and it also exposes the admin connection string that must be kept secret.
The value for the ux4iotURL
parameter is available on your ux4iot instance in the Azure portal:
When you render a Ux4iotContextProvider
, it tries to establish a session by calling the /session
endpoint of ux4iot. If this request fails, it will retry again after the milliseconds defined in reconnectTimeout
. If the retry fails it will double the timeout and retry again after the doubled timeout or maxReconnectTimeout
if maxReconnectTimeout
is larger.
reconnectTimeout = 5000
, maxReconnectTimeout = 50000
Ux4iot fails to connect to ux4iot and fails. Retries afterwards at 5, 10, 20, 40, 50, 50, 50,... seconds
Retries will not stop retrying until the session is established. The defaults are reconnectTimeout = 5000
, maxReconnectTimeout = 30000
In both Development and Production mode you can pass a function to the options of the Ux4iotContextProvider
It takes two arguments:
reason - can be one of four strings:
socket_connect
- called when the socket is established with the server
socket_connect_error
called when the client throws an error when establishing the socket
socket_disconnect
- called when the socket is disconnected
ux4iot_unreachable
- called when a sessionId cannot be fetched from the ux4iot instance
description - string | undefined
: error explanation provided in socket_connect_error
, socket_disconnect
and ux4iot_unreachable
The full function type you need to provide is
You can see a complete example in the .
In production mode the admin connection string is used by the , but as there is no Security Backend in development mode, the frontend accesses the Admin API on its own. For this reason the frontend requires the admin connection string.
For production mode you need to provide a security backend for managing access permissions. You also need a that acts as an adapter between the ux4iot library and this backend.
For detailed information on how to implement the Grant Request Function, see .
Every reason except for ux4iot_unreachable
originates from socket.io and is documented here: