From bc7e4af4015966e5ac21b08ae500a79d47380348 Mon Sep 17 00:00:00 2001 From: Leonardo Cossutta Date: Fri, 29 Dec 2023 13:28:08 +0100 Subject: [PATCH] customizable client id --- package.json | 2 +- src/App.vue | 3 +++ src/main.js | 3 +++ src/store/settings.js | 7 +++++++ src/utils/Connection.js | 10 ++-------- src/views/Home.vue | 22 +++++++++++++++++++++- 6 files changed, 37 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 6d2a982..b3d901f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mqtt5-explorer", - "version": "1.9.1", + "version": "1.10.0", "private": false, "license": "GPLv3", "description": "A simple MQTT client that supports MQTT5 protocol.", diff --git a/src/App.vue b/src/App.vue index 8e9d815..67c5da7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -62,6 +62,9 @@ export default { outline() { this.persistSettings(); }, + clientId() { + this.persistSettings(); + }, keepalive() { this.persistSettings(); }, diff --git a/src/main.js b/src/main.js index 98dc148..c0aa49f 100644 --- a/src/main.js +++ b/src/main.js @@ -40,6 +40,9 @@ Vue.mixin({ primaryColor() { return this.$store.getters.getPrimaryColor; }, + clientId() { + return this.$store.getters.getClientId; + }, keepalive() { return this.$store.getters.getKeepalive; }, diff --git a/src/store/settings.js b/src/store/settings.js index 38ab8d0..efe1fdd 100644 --- a/src/store/settings.js +++ b/src/store/settings.js @@ -1,3 +1,5 @@ +import { v4 as uuidv4 } from "uuid"; + const settingsVuexModule = { state: { theme: "light", @@ -6,6 +8,7 @@ const settingsVuexModule = { text: "Indie Indigo", value: { light: "#3F51B5", dark: "#5C6BC0" }, }, + clientId: undefined, keepalive: 120, // In seconds reconnectPeriod: 2, // In seconds connectTimeout: 20, // In seconds @@ -16,6 +19,7 @@ const settingsVuexModule = { setTheme: (state, theme) => (state.theme = theme), setOutline: (state, outline) => (state.outline = outline), setPrimaryColor: (state, primary) => (state.primaryColor = primary), + setClientId: (state, clientId) => (state.clientId = clientId), setKeepalive: (state, keepalive) => (state.keepalive = keepalive), setReconnect: (state, reconnect) => (state.reconnectPeriod = reconnect), setConnectTimeout: (state, timeout) => (state.connectTimeout = timeout), @@ -28,6 +32,7 @@ const settingsVuexModule = { text: "Indie Indigo", value: { light: "#3F51B5", dark: "#5C6BC0" }, }; + state.clientId = data.clientId || `m5-${uuidv4()}`; state.keepalive = Math.max(Number(data.keepalive || 0), 120); state.reconnectPeriod = Math.max(Number(data.reconnectPeriod || 0), 2); state.connectTimeout = Math.max(Number(data.connectTimeout || 0), 20); @@ -40,11 +45,13 @@ const settingsVuexModule = { getTheme: (state) => state.theme, getOutline: (state) => state.outline, getPrimaryColor: (state) => state.primaryColor, + getClientId: (state) => state.clientId, getKeepalive: (state) => state.keepalive, getReconnect: (state) => state.reconnectPeriod, getConnectTimeout: (state) => state.connectTimeout, getMaxReconnects: (state) => state.maxReconnects, getMqttClientSettings: (state) => ({ + clientId: state.clientId, keepalive: Number(state.keepalive), reconnectPeriod: Number(state.reconnectPeriod), connectTimeout: Number(state.connectTimeout), diff --git a/src/utils/Connection.js b/src/utils/Connection.js index 7aae5ae..e056631 100644 --- a/src/utils/Connection.js +++ b/src/utils/Connection.js @@ -2,7 +2,6 @@ import mqtt from "mqtt"; import TreeNode from "../models/TreeNode"; import ConnectionProperties from "../models/ConnectionProperties"; import fs from "fs"; -import { v4 as uuidv4 } from "uuid"; class Connection { static connectionStates = { @@ -14,7 +13,6 @@ class Connection { #maxReconnects = 5; #totalReconnects = 0; - #clientId = undefined; #client = undefined; #url = undefined; #properties = new ConnectionProperties(); @@ -26,7 +24,7 @@ class Connection { #getSize = () => 0; constructor() { - this.#clientId = `m5-${uuidv4()}`; + // DO nothing } get url() { @@ -37,10 +35,6 @@ class Connection { return this.#properties.version; } - get clientId() { - return this.#clientId; - } - init(properties, addCallback, mergeCallback, getSize) { this.#properties = properties; // eslint-disable-next-line prettier/prettier @@ -59,7 +53,7 @@ class Connection { connect(clientProps, onConnect, onClose) { const options = { - clientId: this.#clientId, + clientId: clientProps.clientId, protocolVersion: this.#properties.version, rejectUnauthorized: this.#properties.validateCertificate, keepalive: clientProps.keepalive, diff --git a/src/views/Home.vue b/src/views/Home.vue index ab88c08..ab768e2 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -65,6 +65,18 @@ + + + + + +
- Client ID: {{ $connection.clientId }} + Client ID: {{ clientId }}
@@ -388,6 +400,14 @@ export default { this.$store.commit("setPrimaryColor", newValue); }, }, + selectClientId: { + get() { + return this.$store.getters.getClientId; + }, + set(newValue) { + this.$store.commit("setClientId", newValue); + }, + }, selectedKeepalive: { get() { return this.$store.getters.getKeepalive;