Use new mqtt library and enable reconnect #489

This commit is contained in:
Kendrick Chan 2020-09-15 23:25:44 +08:00
parent 40b28e6e4d
commit 0880a75fa7
2 changed files with 15 additions and 3 deletions

View file

@ -10,20 +10,32 @@ class MapEventHandler {
var client_id = "dash-" + user_id + "-" + d.getMonth() + "-" + d.getDate() + "-" + d.getHours() + "-" + d.getMinutes() + "-" + d.getSeconds() + "-" + d.getMilliseconds(); var client_id = "dash-" + user_id + "-" + d.getMonth() + "-" + d.getDate() + "-" + d.getHours() + "-" + d.getMinutes() + "-" + d.getSeconds() + "-" + d.getMilliseconds();
console.log(client_id); console.log(client_id);
this.mqtt = new Paho.MQTT.Client(host, port, client_id); let protocol = 'ws';
if (this.ssl)
protocol = 'wss';
this.mqtt = new Paho.Client(protocol + '://' + host + ':' + port + '/mqtt', client_id);
var options = { var options = {
useSSL: this.ssl, useSSL: this.ssl,
timeout: 3, timeout: 10,
keepAliveInterval: 10,
invocationContext: this, invocationContext: this,
onSuccess: this.onConnect.bind(this), onSuccess: this.onConnect.bind(this),
reconnect: true
}; };
this.mqtt.onMessageArrived = this.onMessage.bind(this); this.mqtt.onMessageArrived = this.onMessage.bind(this);
this.mqtt.onConnectionLost = this.onConnectionLost;
console.log('connecting to mqtt server...'); console.log('connecting to mqtt server...');
this.mqtt.connect(options); this.mqtt.connect(options);
} }
onConnectionLost(err) {
console.log('mqtt connection lost');
console.log(err);
}
onConnect(icontext) { onConnect(icontext) {
console.log('mqtt connected!'); console.log('mqtt connected!');
var my = icontext.invocationContext; var my = icontext.invocationContext;

View file

@ -12,7 +12,7 @@
{% block scripts %} {% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.1.0/paho-mqtt.min.js" type="text/javascript"></script>
<script src="{{ asset('assets/js/dashboard_map.js') }}"></script> <script src="{{ asset('assets/js/dashboard_map.js') }}"></script>
<script src="{{ asset('assets/js/map_mqtt.js') }}"></script> <script src="{{ asset('assets/js/map_mqtt.js') }}"></script>
{% if dashboard_enable == 'true' %} {% if dashboard_enable == 'true' %}