Blog
All Blog Posts | Next Post | Previous Post
Free component for using MQTT in TMS WEB Core
Bookmarks:
Tuesday, January 9, 2024
MQTT is for many years an industry standard for lightweight, robust and reliable machine to machine communication. This enables the instant exchange of binary or text messages between code running on various operating systems. For quite some time, we offer an MQTT client component for use in VCL Windows application, FireMonkey applications for Windows, macOS, Android, iOS and Linux and finally also Raspberry Pi applications created with Lazarus. This MQTT client component supports both the MQTT v3 and newer v5 protocol. What was missing in this offering, is an MQTT client component for use in web application built with TMS WEB Core.
MQTT for TMS WEB Core is here
We are happy to announce today the availability of a new MQTT-component for TMS WEB Core, showcasing the full capabilities of MQTT supporting the latest V5.0 features. With this TMS MQTT component, we facilitate seamless integration with MQTT brokers. This way, Delphi developers can focus on leveraging strong, reliable and robust messaging between apps via the industry standard MQTT protocol from applications running in the browser.
This free component is based on the proven & solid MQTT.js library and we have modeled the Object Pascal client component to match the interface as much as possible of our existing native MQTT client component. This way, TMS MQTT component users will instantly be familiar to start using MQTT from TMS WEB Core web client applications.
To demonstrate the power of using MQTT from everywhere, we have created an applications running on a Raspberry Pi with our native MQTT client exchanging messages with a TMS WEB Core web client app.
Demo
Raspberry Pi client for temperature monitoring
In this demonstration, we'll create a Lazarus LCL application running natively on a Raspberry Pi equipped with a LED on a GPIO pin and a Bosch BMP180 sensor measures temperature using the free components from the TMS LCL HW Pack. The captured sensor data is sent to the broker HiveMQ and then received and processed on a web based client created with TMS WEB Core for Delphi. Finally, the processed data in the web client triggers a response that will be sent back and set off an action on the Raspberry Pi, turning an LED on or off based on a temperature threshold. We have two topics for this. The MQTT topic "TMS/Demo/BMP/Temp" for communicating the captured sensor temperature data and the MQTT topic "TMS/Demo/BMP/Led" for sending LED control.
In the Lazarus app, first we need to initiate a connection of our client to the HiveMQ broker. This is done with the code:
begin mqttClient.BrokerHostName := 'broker.hivemq.com'; mqttClient.BrokerPort := 8884; mqttClient.Connect; end;
In this app we read the temperature from a Bosch BMP180 sensor and publish this to the "TMS/Demo/BMP/Temp" topic:
sTemperature := bmpSensor.GetTemperature.ToString;
mqttClient.Publish('TMS/Demo/BMP/Temp', sTemperature);
TMS WEB Core web client app
From the TMS WEB Core web client app built with Delphi we subscribe to the "TMS/Demo/BMP/Temp" topic to receive the temperature data. This measurement data will be visualized in a chart. To demonstrate the power of our FNC family of controls, we used the TMS FNC Chart for this, demonstrating that every FNC control seamlessly also runs in the browser in a web client application. The code to subscribe to the temperature measurement topic is:
mqttClient.Subscribe('TMS/Demo/BMP/Temp');With the TMS WEB Core MQTT web client's OnPublishReceived() event handler, it's possible to perform an action when we receive a message on our subscribed topic. Depending on the received temperature value, this event handler code will publish to the "TMS/Demo/BMP/Led" topic either 'True' or 'False' to control the LED on the Raspberry Pi if the temperature exceeds the treshold or not.
procedure TForm1.mqttClientPublishReceived(ASender: TObject; ATopic,
APayLoad: string);
begin
if (StrToInt(APayLoad) > Treshold) then
begin
mqttClient.Publish('TMS/Demo/BMP/Led', 'True');
end
else
begin
mqttClient.Publish('TMS/Demo/BMP/Led', 'False');
end;
end;Meanwhile back on the Raspberry Pi we subscribe on the "TMS/Demo/BMP/Led" topic to receive the commands for the LED operation:
mqttClient.Subscribe('TMS/Demo/BMP/Led'); Note though that before being able to control the LED, we need to configure the GPIO pin to behave as an output.
procedure TForm1.FormCreate(Sender: TObject);
var
fileDesc: Integer;
begin
try
fileDesc := fpopen('/sys/class/gpio/export', O_WrOnly);
gReturnCode := fpwrite(fileDesc, PIN_18[0], 2);
finally
gReturnCode := fpclose(fileDesc);
end;
try
fileDesc := fpopen('/sys/class/gpio/gpio18/direction', O_WrOnly);
gReturnCode := fpwrite(fileDesc, OUT_DIRECTION[0], 3);
finally
gReturnCode := fpclose(fileDesc);
end;
end;
Then after we receive an incoming MQTT message we set the state of the GPIO pin to turn the LED on or off.
procedure TForm1.mqttClientPublishReceived(ASender: TObject; APacketID: Word;
ATopic: string; APayload: TBytes);
var
fileDesc: integer;
strPayload : string;
begin
strPayload := TEncoding.UTF8.GetString(APayload);
if (strPayload.Equals('True')) then
begin
try
fileDesc := fpopen('/sys/class/gpio/gpio18/value', O_WrOnly);
gReturnCode := fpwrite(fileDesc, PIN_ON[0], 1);
finally
gReturnCode := fpclose(fileDesc);
end;
end
else
if (strPayload.Equals('False')) then
begin
try
fileDesc := fpopen('/sys/class/gpio/gpio18/value', O_WrOnly);
gReturnCode := fpwrite(fileDesc, PIN_OFF[0], 1);
finally
gReturnCode := fpclose(fileDesc);
end;
end;
end;In summary, this small demo shows how to get started on sending messages using MQTT on TMS WEB Core and this for a wide range of different devices.
Build innovative web client apps without limits now!
Grab the free MQTT component for TMS WEB Core and install this in TMS WEB Core 2.4 or newer (works in full registered version as well as trial or academic version). It can be downloaded here.
Article written by Niels Lefevre together with Bruno Fierens
Bruno Fierens
Bookmarks:
This blog post has received 5 comments.
2. Friday, January 12, 2024 at 11:25:32 AM
very informative! Two possible typos here:
procedure TForm1.mqttClientPublishReceived(ASender: TObject; ATopic,
APayLoad: string);
begin
if (APayLoad > intToStr(treshold)) then // (1)
begin
. . .
Should (1) be:
if (StrToInt(APayLoad) > threshold) then . . .
Schwartz David
3. Friday, January 12, 2024 at 2:00:50 PM
You''re correct, we fixed it.
Bruno Fierens
4. Sunday, January 21, 2024 at 7:59:21 AM
This is what I have been waiting for. Unfortunately it will not install into Delphi 10.3 Rio. It does compile without errors. This is after updating to the latest release of Web Core. This is the error message:The procedure entry point
@Weblib@Forms@CustomWebForm@$bcdtr$qqrv count not be
located in the dynamic link library TMSWEBCorePakLibDXE12.bpl
Any suggestions?
Gillespie Larry
5. Sunday, January 21, 2024 at 4:39:43 PM
Sure there are no more old version files of TMS WEB Core on your system? Try to first perform a FULL uninstall (Windows Control Panel Add/Remove software) and then verify in Delphi if there is no more TMS WEB Core under "Component / Install Packages''. Then install the full registered version again.
Bruno Fierens
All Blog Posts | Next Post | Previous Post
Voirol Jean-No