在物联网场景中，HTML本身无法直接和硬件设备通信，需要结合通信协议和后端服务实现设备控制功能，核心思路是通过HTML页面发送控制指令，经由中间服务转发到物联网设备，同时接收设备返回的状态数据展示在页面上。
核心通信协议介绍
实现物联网控制前需要先了解两个常用协议：
- MQTT：轻量级的发布订阅协议，适合低带宽、不稳定的网络环境，是物联网设备通信的主流选择，设备可以订阅特定主题接收控制指令，也可以发布主题上报状态。
- WebSocket：全双工通信协议，可以在浏览器和服务器之间建立持久连接，适合需要实时展示设备状态、即时响应控制结果的场景。
基础实现架构
整体架构分为三层：
- 前端HTML页面：负责展示控制按钮、设备状态，发送用户操作指令。
- 中间服务层：可以是Node.js、Python等语言编写的服务，负责连接MQTT broker，转发前端指令到设备，同时把设备状态推送到前端。
- 物联网设备层：连接MQTT broker，订阅控制主题，接收指令执行对应操作，并上报状态。
HTML结合WebSocket实现控制示例
以下示例演示前端HTML页面通过WebSocket和后端通信，实现控制物联网灯开关的功能：
HTML页面代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>物联网灯控制</title>
<style>
.status {
font-size: 18px;
margin-bottom: 20px;
}
.btn {
padding: 10px 20px;
font-size: 16px;
margin-right: 10px;
cursor: pointer;
}
.on {
background-color: #4CAF50;
color: white;
}
.off {
background-color: #f44336;
color: white;
}
</style>
</head>
<body>
<h2>智能灯控制面板</h2>
<div class="status">当前灯状态：<span id="lightStatus">未知</span></div>
<button class="btn on" onclick="sendControl('on')">开灯</button>
<button class="btn off" onclick="sendControl('off')">关灯</button>
<script>
// 连接WebSocket服务，这里使用本地的8080端口示例
const ws = new WebSocket('ws://127.0.0.1:8080');
// 连接成功回调
ws.onopen = function() {
console.log('WebSocket连接成功');
// 连接后请求当前设备状态
ws.send(JSON.stringify({
type: 'getStatus',
device: 'light'
}));
};
// 接收消息回调
ws.onmessage = function(event) {
const data = JSON.parse(event.data);
if (data.type === 'status') {
// 更新灯状态显示
document.getElementById('lightStatus').innerText = data.status === 'on' ? '开启' : '关闭';
} else if (data.type === 'controlResult') {
alert('控制指令执行结果：' + data.result);
}
};
// 发送控制指令
function sendControl(action) {
ws.send(JSON.stringify({
type: 'control',
device: 'light',
action: action
}));
}
// 连接关闭回调
ws.onclose = function() {
console.log('WebSocket连接关闭');
};
</script>
</body>
</html>后端Node.js服务示例
以下是简单的Node.js WebSocket服务代码，同时连接MQTT broker转发指令：
const WebSocket = require('ws');
const mqtt = require('mqtt');
// 创建WebSocket服务，监听8080端口
const wss = new WebSocket.Server({ port: 8080 });
// 连接MQTT broker，这里使用本地的MQTT服务示例
const mqttClient = mqtt.connect('mqtt://127.0.0.1:1883');
// MQTT连接成功回调
mqttClient.on('connect', function() {
console.log('MQTT连接成功');
// 订阅设备状态上报的主题
mqttClient.subscribe('device/light/status');
});
// 接收MQTT消息回调
mqttClient.on('message', function(topic, message) {
const status = message.toString();
// 把设备状态推送给所有连接的WebSocket客户端
wss.clients.forEach(function(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify({
type: 'status',
device: 'light',
status: status
}));
}
});
});
// WebSocket连接处理
wss.on('connection', function(ws) {
ws.on('message', function(message) {
const data = JSON.parse(message);
if (data.type === 'control') {
// 转发控制指令到MQTT主题
mqttClient.publish('device/light/control', data.action);
// 返回控制结果给前端
ws.send(JSON.stringify({
type: 'controlResult',
result: '指令已发送'
}));
} else if (data.type === 'getStatus') {
// 请求设备状态，这里可以主动向MQTT发送状态查询指令，或者直接返回缓存的状态
mqttClient.publish('device/light/getStatus', '');
}
});
});注意事项
- 实际部署时如果是公网环境，WebSocket建议升级为WSS协议，MQTT建议使用MQTTS协议，避免通信数据被窃取。
- 设备端需要对应实现MQTT连接的代码，订阅
device/light/control主题接收控制指令，向device/light/status主题上报状态。 - 如果控制指令需要权限校验，可以在WebSocket连接时增加token验证，避免未授权的控制操作。
HTMLIoT_device_controlMQTTWebSocket修改时间：2026-06-03 22:50:40