Merge pull request #83 from kaandesu/feat/keepalive-cleansession

feat(options): added more paho options

.changeset/shaggy-parents-think.md

@@ -0,0 +1,7 @@
+---
+"vue-paho-mqtt": patch
+---
+
+Added more Paho options: (https://eclipse.dev/paho/files/jsdoc/Paho.MQTT.Client.html)
+- keepAliveInterval: The server disconnects this client if there is no activity for this number of milliseconds. The default value of 60000 milliseconds is assumed if not set.
+- cleanSession: if true(default) the client and server persistent state is deleted on successful connect.

README.md

@@ -6,7 +6,7 @@
 <p align="center">
     <a href="https://www.npmjs.com/package/vue-paho-mqtt">
       <img src="https://img.shields.io/npm/v/vue-paho-mqtt?style=for-the-badge" alt="npm version">
-    </a>        
+    </a>
     <a href="https://github.com/kaandesu/vue-paho-mqtt/actions/workflows/build.yml">
       <img src="https://img.shields.io/github/actions/workflow/status/kaandesu/vue-paho-mqtt/build.yml?style=for-the-badge" alt="build status">
     </a>
@@ -18,10 +18,10 @@
     </a>
     <a href="https://github.com/kaandesu/vue-paho-mqtt/pulls">
       <img src="https://img.shields.io/github/issues-pr/kaandesu/vue-paho-mqtt?style=for-the-badge" alt="pr">
-    </a>    
+    </a>
     <a href="https://github.com/kaandesu/vue-paho-mqtt/commits/master" alt="Commit Activity">
       <img src="https://img.shields.io/github/commit-activity/m/kaandesu/vue-paho-mqtt?style=for-the-badge" />
-    </a>    
+    </a>
 </p>
 
 The `vue-paho-mqtt` plugin provides a convenient way to use the [Eclipse Paho MQTT JavaScript client](https://www.eclipse.org/paho/clients/js/) with Vue 3.
@@ -196,10 +196,14 @@ You can configure the MQTT client by passing an object with the following option
 
 - `enableMainTopic` (`boolean`, default: `true`) - Enables usage of the main topic.
 
-- `watchdogTimeout` (`number`, default: `2000`) - The time in milliseconds to wait for a connection to the broker before timing out.
+- `watchdogTimeout` (`number`, default: `30000`) - The time in milliseconds to wait for a connection to the broker before timing out.
 
 - `reconnectTimeout` (`number`, default: `5000`) - The time in milliseconds to wait before attempting to reconnect to the broker after a disconnection.
 
+- `keepAliveInterval` (`number`, default: `60000`) - The server disconnects this client if there is no activity for this number of milliseconds.
+
+- `cleanSession` (`boolean`, default: `true`) - Whether to delete the server persistent state on a new connection.
+
 ---
 
 ### MQTT Quality of Service (QoS) and Retention Options for Publish
@@ -338,7 +342,7 @@ const result = await $mqtt.connect();
 | `onConnectionLost` |    disconnected or connection lost connection     |            responseObject: {errorCode: number}            |
 | `onMessageArrived` | message arrived from one of the subscribed topics | message: {payloadString: string;destinationName: string;} |
 
-#### Custom Callback Usage example:
+#### Custom Callback Usage example
 
 ```ts
 $mqtt.connect({
@@ -990,8 +994,8 @@ This project is created and actively maintained by [kaandesu](https://github.com
 
 | Maintainer                              | E-Mail                                     | Twitter                                       |
 | --------------------------------------- | ------------------------------------------ | --------------------------------------------- |
-| [kaandesu](https://github.com/kaandesu) | [email protected]                       | -                                             |
-| [EgeOnder](https://github.com/EgeOnder) | [email protected] | [@EgeOnder23](https://twitter.com/EgeOnder23) |
+| [kaandesu](https://github.com/kaandesu) | <[email protected]>                       | -                                             |
+| [EgeOnder](https://github.com/EgeOnder) | <[email protected]> | [@EgeOnder23](https://twitter.com/EgeOnder23) |
 
 ## Changelog
 

src/pahoMqttPlugin/config/constants.ts

@@ -42,6 +42,8 @@ export const defaultMqttOptions: MqttOptions = {
   clientId: `ClientId-${Math.random() * 9999}`,
   mainTopic: 'vue-paho-mqtt-test',
   enableMainTopic: true,
-  watchdogTimeout: 2000,
+  watchdogTimeout: 30000,
   reconnectTimeout: 5000,
+  keepAliveInterval: 60000,
+  cleanSession: true,
 };

src/pahoMqttPlugin/types/types.ts

@@ -35,6 +35,8 @@ export interface MqttOptions {
   enableMainTopic?: boolean;
   watchdogTimeout?: number;
   reconnectTimeout?: number;
+  keepAliveInterval?: number;
   username?: string;
   password?: string;
+  cleanSession?: boolean;
 }

src/pahoMqttPlugin/utils/connectClient.ts

@@ -1,5 +1,6 @@
 import { createClient } from '~/config/client';
 import { getMqttOptions } from '~/config/options';
+import { defaultMqttOptions } from '~/config/constants';
 import { onConnectCallback } from '~/functions/onConnect';
 import { onConnectionLostCallback } from '~/functions/onConnectionLost';
 import { onFailureCallback } from '~/functions/onFailure';
@@ -64,7 +65,13 @@ export const connectClient = ({
         userName: MqttOptions.username,
         password: MqttOptions.password,
         useSSL: MqttOptions.useSSL,
-        timeout: (MqttOptions.watchdogTimeout || 30000) / 1000,
+        timeout:
+          (MqttOptions.watchdogTimeout || defaultMqttOptions.watchdogTimeout!) /
+          1000,
+        keepAliveInterval:
+          (MqttOptions.keepAliveInterval ||
+            defaultMqttOptions.keepAliveInterval!) / 1000,
+        cleanSession: MqttOptions.cleanSession,
         uris: [
           `wss://${MqttOptions.host}:${MqttOptions.port}${MqttOptions.path}`,
           `ws://${MqttOptions.host}:${MqttOptions.port}${MqttOptions.path}`,