构建JavaScript客户端与MQTT通信及控制机器人车
立即解锁
发布时间: 2025-09-07 01:07:11 阅读量: 3 订阅数: 3 AIGC 

### 构建JavaScript客户端与MQTT通信及控制机器人车
#### 1. 搭建CloudMQTT账户
要开始项目,首先需要设置一个MQTT代理。可以选择使用Mosquitto平台(www.mosquitto.org)在本地安装,但我们将使用www.cloudmqtt.com网站设置一个基于云的MQTT代理。具体步骤如下:
1. 在浏览器中访问www.cloudmqtt.com。
2. 点击右上角的“Log in”。
3. 在“Create an account”框中输入你的电子邮件地址。
4. 你将收到一封确认邮件,点击邮件中的“Confirm email”按钮完成确认过程。
5. 输入密码,确认后点击“Submit”。
6. 进入“Instances”页面,这里将创建一个MQTT代理实例来发送和发布MQTT消息。
#### 2. 设置MQTT代理实例
在成功创建CloudMQTT账户后,接下来要创建一个实例供应用使用:
1. 在“Instances”页面,点击“Create new instance”的绿色大按钮。
2. 在“Name”框中输入“T.A.R.A.S”,将此MQTT代理实例视为T.A.R.A.S机器人车的一部分。
3. 在“Plan”下拉菜单中选择“Cute Cat”,这是适合开发目的的免费选项。
4. 点击绿色的“Select Region”按钮。
5. 根据你的地理位置,选择一个离你较近的区域。例如,如果你在加拿大,可以选择“US - East - 1 (Northern Virginia)”。
6. 点击绿色的“Confirm”按钮。
7. 查看“Confirm new instance”页面的信息,确认无误后点击“Confirm instance”按钮。
8. 你应该能在实例列表中看到“T.A.R.A.S”实例。
#### 3. 编写JavaScript客户端代码
编写JavaScript客户端代码时,建议使用除T.A.R.A.S上的树莓派之外的计算机。同时,需要获取Paho JavaScript库,具体操作如下:
1. 访问Eclipse Paho下载页面:https://projects.eclipse.org/projects/technology.paho/downloads。
2. 点击“JavaScript client”链接,当前版本为1.03。
3. 下载的JavaScript客户端库是一个名为“paho.javascript - 1.0.3”的ZIP文件,解压该文件。
4. 在计算机上创建一个名为“MQTT HTML Client”的项目文件夹。
5. 在“MQTT HTML Client”文件夹内创建一个名为“scripts”的子文件夹。
6. 将解压后的“paho.javascript - 1.0.3”文件夹拖放到“MQTT HTML Client”文件夹中。
接下来创建客户端代码,代码由一个HTML页面和一个.js(JavaScript)文件组成。先创建HTML页面:
1. 使用你喜欢的HTML编辑器,在项目根目录创建一个名为“index.html”的文件。
2. 在“index.html”文件中输入以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>MQTT Message Client</title>
<script src="paho.javascript-1.0.3/paho-mqtt.js" type="text/javascript"></script>
<script src="scripts/index.js" type='text/javascript'></script>
</head>
<body>
<h2>MQTT Message Client</h2>
<button onclick="sendTestData()">
<h4>Send test message</h4>
</button>
<button onclick="subscribeTestData()">
<h4>Subscribe to test</h4>
</button>
<div>
<input type="text" id="messageTxt" value="Waiting for MQTT message" size=34 />
</div>
</body>
</html>
```
3. 保存“index.html”文件。这里创建了一个简单的HTML页面,导入了两个JavaScript库:Paho JavaScript库和尚未创建的“index.js”文件。同时创建了两个按钮,分别设置了“onclick”方法为“sendTestData”和“subscribeTestData”,还创建了一个文本框。
#### 4. 运行代码
在运行客户端代码之前,需要创建提供所需功能的JavaScript文件:
1. 使用HTML编辑器在项目目录的“scripts”文件夹中创建一个名为“index.js”的文件。
2. 在“index.js”文件中添加以下代码,并将“Server”、“User”、“Password”和“Websockets Port”替换为你自己实例的值(示例值为“m10.cloudmqtt.com”、38215、“vectydkb”和“ZpiPufitxnnT”):
```javascript
function sendTestData() {
client = new Paho.MQTT.Client("m10.cloudmqtt.com", 38215, "web_" + parseInt(Math.random() * 100, 10));
// set callback handlers
client.onConnectionLost = onConnectionLost;
var options = {
useSSL: true,
userName: "vectydkb",
password: "ZpiPufitxnnT",
onSuccess: sendTestDataMessage,
onFailure: doFail
}
// connect the client
client.connect(options);
}
// called when the client connects
function sendTestDataMessage() {
message = new Paho.MQTT.Message("Hello from JavaScript client");
message.destinationName = "test";
client.send(message);
}
function doFail() {
alert("Error!");
}
// called when the client loses its connection
function onConnectionLost(responseObject) {
if (responseObject.errorCode!== 0) {
alert("onConnectionLost:" + responseObject.errorMessage);
}
}
// called when a message arrives
function onMessageArrived(message) {
document.getElementById('messageTxt').value = message.payloadString;
}
function onsubsribeTestDataSuccess() {
client.subscribe("test");
alert("Subscribed to test");
}
function subscribeTestData() {
c
```
0
0
复制全文
相关推荐










