【MQTT】Javascript通过WebSocket连接MQTT

MQTT over WebSocket

标准的MQTT是通过TCP协议来进行通信的，这样网页就没法使用MQTT协议了

一个变通的方法是，在同一个程序中，同时集成MQTT服务和一个WebSocket服务

通过WebSocket服务，将MQTT服务收到的消息转发给网页，这样网页就也能使用MQTT协议了

这种方案就叫做MQTT over WebSocket

当然，也可以不用MQTT协议，全部通过WebSocket来通信也可以

mosquitto

mosquitto是一个支持MQTT over WebSocket的MQTT代理服务器

通过以下配置，可以让mosquitto同时开启MQTT和WebSocket

	#MQTT协议
	port 18006
	protocol mqtt
	
	#WebSocket协议
	listener 18007
	protocol websockets
	socket_domain ipv4
	
	#允许匿名登录
	allow_anonymous true
	
	#指定账号密码文件
	password_file user.conf
	
	#HTTPS证书
	cafile D:\dev\mosquitto\crt\ca.crt
	certfile D:\dev\mosquitto\crt\server.crt
	keyfile D:\dev\mosquitto\crt\server.key

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

SSL证书

WebSocket有ws和wss两种，分别对应http和https网页一起使用

SSL证书可以自己去制作，另外自制证书本来就是不安全的，需要自己想办法在网页中添加信任

这步比较麻烦，如果需要使用SSL，自己单独去研究下，这里主要讲解网页怎么使用mqtt

mqtt.js

自己去网页或者Demo里下载paho-mqtt.js，使用方法如下

	//创建MQTT配置
	let config = {
	    id: random(),
	    ip: "192.168.5.31",
	    port: 18007,
	    ssl: true
	};
	
	//设置MQTT回调
	let callback = {
	    onConnected: onConnected,
	    onDisconnected: onDisconnected,
	    onMessage: onMessage
	};
	
	//创建MQTT客户端
	let client = new Paho.MQTT.Client(config.ip, config.port, config.id);
	
	//开始连接
	client.onConnectionLost = callback.onDisconnected;
	client.onMessageArrived = callback.onMessage;
	client.connect({
	    useSSL: config.ssl,
	    onSuccess: callback.onConnected
	});
	
	//连接成功
	function onConnected() {
	    console.log("MQTT", "OnConnected", config.id);
	    subscribeTopic(config.id);
	    sendMessage(config.id, {
	        type: "try",
	        code: 0,
	        message: "Success",
	        data: 100
	    });
	}
	
	//断开连接
	function onDisconnected(error) {
	    console.log("MQTT", "OnDisconnected", error.errorCode, error.errorMessage);
	}
	
	//收到消息
	function onMessage(message) {
	    let payload = message.payloadString;
	    console.log("MQTT", "OnMessage", payload);
	}
	
	//发送消息
	function sendMessage(topic, message) {
	    if (!client.isConnected())
	        return;
	    let payload = JSON.stringify(message);
	    let mqttMessage = new Paho.MQTT.Message(payload);
	    mqttMessage.destinationName = topic;
	    client.send(mqttMessage);
	    console.log("MQTT", "SendMessage", topic, payload);
	}
	
	//订阅主题
	function subscribeTopic(topic) {
	    if (!client.isConnected())
	        return;
	    client.subscribe(topic);
	    console.log("MQTT", "SubscribeTopic", topic);
	}
	
	//生成随机字符串
	function random() {
	    //获得当前时间戳
	    let millis = new Date().getTime();
	    //生成一个100万-999万之间的随机数
	    let int = Math.floor(Math.random() * 900 * 10000 + 100 * 10000);
	    //拼接字符串
	    let random = "ID:" + millis + int;
	    return random;
	}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

源码和服务端程序下载

mosquitto+mqtt.js.zip