Yes, you can send MQTT messages from a web page using HTML and JavaScript, but you would need to use a JavaScript library or framework that supports MQTT, such as the Eclipse Paho MQTT JavaScript library. Here are the general steps to send MQTT messages from a web page:
- Include the MQTT JavaScript library: You need to include the MQTT JavaScript library in your HTML page. You can do this by including the library's JavaScript file in your HTML, like this:
html<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"></script>Creating a complete HTML page for an MQTT publisher requires more than just HTML; you'll need JavaScript and, optionally, CSS to create a user interface. Below is a basic example of an HTML page that includes JavaScript for an MQTT publisher. This example uses the Eclipse Paho MQTT JavaScript library to send messages to an MQTT broker. Remember to replace the MQTT broker and topic information with your own.
html<!DOCTYPE html> <html>
<head>
<title>MQTT Publisher</title>
</head>
<body>
<h1>MQTT Publisher</h1>
<label for="message">Message:</label>
<input type="text" id="message" placeholder="Enter your message">
<button id="publishButton">Publish Message</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"></script>
<script>
// Function to handle the button click
function publishMessage() {
var messageInput = document.getElementById("message");
var message = messageInput.value;
// Create an MQTT client
var client = new Paho.MQTT.Client("mqtt.eclipse.org", 80, "clientId");
// Set up the connection options
var options = {
onSuccess: onConnect,
onFailure: onFailure,
};
// Connect to the MQTT broker
client.connect(options);
// Called when the connection is successful
function onConnect() {
console.log("Connected to the MQTT broker");
// Send the MQTT message
var message = new Paho.MQTT.Message(message);
message.destinationName = "your/topic"; // Replace with your desired MQTT topic
client.send(message);
}
// Called when the connection fails
function onFailure(message) {
console.log("Connection failed: " + message.errorMessage);
}
}
// Attach the click event to the button
var publishButton = document.getElementById("publishButton");
publishButton.addEventListener("click", publishMessage);
</script>
</body>
</html>I apologize for any confusion. The mqttws31.min.js script I mentioned earlier might not be the latest version, and it's possible that it may not work as expected. HiveMQ and the Paho MQTT library may have evolved since my last update.
To ensure that you are using an up-to-date version of the Paho MQTT JavaScript library that works with HiveMQ, it's best to include the latest version from a reliable source. You can get the latest version from the Eclipse Paho GitHub repository or their official website.
Here's how to include the latest version from the Eclipse Paho GitHub repository:
html<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.1.0/mqttws31.min.js"></script>
Alternatively, you can download the library directly from the Eclipse Paho GitHub repository and host it on your own server to ensure you are using the most recent version:
Go to the Eclipse Paho GitHub repository for JavaScript: https://github.com/eclipse/paho.mqtt.javascript
Download the latest release of the Paho JavaScript library.
Host the downloaded JavaScript file on your server or include it directly in your HTML as needed.
Remember to replace "your-hivemq-broker-url" and other configuration settings with the correct values for your HiveMQ instance. Additionally, make sure that your HiveMQ instance is properly configured to support WebSocket connections.
<!DOCTYPE html>
<html>
<head>
<title>MQTT WebSocket Publisher</title>
</head>
<body>
<h1>MQTT WebSocket Publisher</h1>
<label for="message">Message:</label>
<input type="text" id="message" placeholder="Enter your message">
<button id="publishButton">Publish Message</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"></script>
<script>
// Function to handle the button click
function publishMessage() {
var messageInput = document.getElementById("message");
var pesan = messageInput.value;
// Create an MQTT client
var client = new Paho.MQTT.Client("broker.hivemq.com", Number(8000), "clientId-yttggg");
// Set up the connection options
var options = {
useSSL: false, // Set to true if your broker supports secure WebSocket connections
onSuccess: onConnect,
onFailure: onFailure,
};
// Connect to the MQTT broker via WebSocket
client.connect(options);
// Called when the connection is successful
function onConnect() {
console.log("Connected to the MQTT broker");
// Send the MQTT message
var message = new Paho.MQTT.Message(pesan);
message.destinationName = "/ahocool/chatgpt"; // Replace with your desired MQTT topic
client.send(message);
// Disconnect after sending the message (optional)
client.disconnect();
}
// Called when the connection fails
function onFailure(message) {
console.log("Connection failed: " + message.errorMessage);
}
}
// Attach the click event to the button
var publishButton = document.getElementById("publishButton");
publishButton.addEventListener("click", publishMessage);
</script>
</body>
</html>
