MQTT官方前端调用示例：https://github.com/moscajs/mosca/wiki/MQTT-over-Websockets

MQTT-NPM：mqtt - npm

MQTT信息参考：MQTT学习记录（一、Windows）

HTML MQTT DHT11 使用记录参考：

HTML Echarts图形统计实时显示DHT11温度（四）

HTML Echarts图形统计实时显示DHT11温度（三）

HTML Echarts图形统计实时显示DHT11温度（二）

HTML Echarts图形统计实时显示DHT11温度（一）

一、EMQX服务器搭建

 及环境参考：中间件：SpringBoot-JAVA整合MQTT通信_我也不清楚的博客-CSDN博客

二、前端引用mqtt.min.js直接MQTT通信

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script>
var options = {
	//mqtt客户端的id，这里面应该还可以加上其他参数，具体看官方文档
	clientId: 'esp8266-client'
}
//console.log(options.clientId);
//浏览器采用websocket协议，host主机地址为127.0.0.1，端口为8083，路径为/mqtt
var client = mqtt.connect("ws://127.0.0.1:8083/mqtt",options) // you add a ws:// url here

//建立连接
client.on('connect', function () {
	console.log("connect success!")
	//订阅主题名称 publishTopic
	client.subscribe('publishTopic', function (err) {
		if (!err) {
			console.log("订阅成功!")
			//发布主题名称subscribeTopic,消息内容为Hello mqtt
			client.publish('subscribeTopic', 'Hello mqtt')
		}else{
			//打印错误
			console.log(err)
		}
	})
})

//如果连接错误，打印错误
client.on('error', function (err) {
	console.log(err)
	client.end()
})

//如果client订阅主题成功，那么这里就是当接收到自己订阅主题的处理逻辑
client.on('message', function (topic, message) {
	// message is Buffer,此处就是打印消息的具体内容
	console.log('json-> ' + message.toString());
	var jsonMsg = JSON.parse(message);
	console.log('temperature-> ' + jsonMsg.temperature);
})

</script>