Merge pull request #37 from Omniaevo/develop

Customizable MQTT client ID

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.",

src/App.vue

@@ -62,6 +62,9 @@ export default {
     outline() {
       this.persistSettings();
     },
+    clientId() {
+      this.persistSettings();
+    },
     keepalive() {
       this.persistSettings();
     },

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;
     },

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),

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,

src/views/Home.vue

@@ -65,6 +65,18 @@
         <v-divider class="mx-3" />
 
         <v-list>
+          <v-list-item>
+            <v-list-item-content>
+              <v-text-field
+                v-model="selectClientId"
+                v-bind:outlined="outline"
+                label="MQTT Client ID"
+                clearable
+                hide-details
+              />
+            </v-list-item-content>
+          </v-list-item>
+
           <v-list-item>
             <v-list-item-content>
               <v-select
@@ -150,7 +162,7 @@
     </v-navigation-drawer>
 
     <div class="caption client-id grey--text pa-2">
-      Client ID: {{ $connection.clientId }}
+      Client ID: {{ clientId }}
     </div>
 
     <div class="caption version-number grey--text pa-2">
@@ -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;