+
+ {{ t("shortcut.request.send_request") }}
+
+
+ {{ t("shortcut.general.show_all") }}
+
{{ t("shortcut.general.command_menu") }}
@@ -56,6 +62,14 @@
+
+ {{ getSpecialKey() }}
+ ↩
+
+
+ {{ getSpecialKey() }}
+ K
+
/
diff --git a/packages/hoppscotch-app/src/components/http/Request.vue b/packages/hoppscotch-app/src/components/http/Request.vue
index 12414f78b..793841404 100644
--- a/packages/hoppscotch-app/src/components/http/Request.vue
+++ b/packages/hoppscotch-app/src/components/http/Request.vue
@@ -16,7 +16,7 @@
-
+
{{ t("shortcut.request.send_request") }}
@@ -24,7 +24,7 @@
{{ getSpecialKey() }}
- G
+ ↩
{{ getSpecialKey() }}
diff --git a/packages/hoppscotch-app/src/components/realtime/Communication.vue b/packages/hoppscotch-app/src/components/realtime/Communication.vue
index c25e147a1..1cf25e550 100644
--- a/packages/hoppscotch-app/src/components/realtime/Communication.vue
+++ b/packages/hoppscotch-app/src/components/realtime/Communication.vue
@@ -1,10 +1,15 @@
+
+
+
+
+
diff --git a/packages/hoppscotch-app/src/components/smart/Window.vue b/packages/hoppscotch-app/src/components/smart/Window.vue
new file mode 100644
index 000000000..ff6a82a63
--- /dev/null
+++ b/packages/hoppscotch-app/src/components/smart/Window.vue
@@ -0,0 +1,49 @@
+
+
+export type HoppActionWithNoArgs = Exclude
/**
* Resolves the argument type for a given HoppAction
diff --git a/packages/hoppscotch-app/src/helpers/keybindings.ts b/packages/hoppscotch-app/src/helpers/keybindings.ts
index f754e1ab3..d20953ab6 100644
--- a/packages/hoppscotch-app/src/helpers/keybindings.ts
+++ b/packages/hoppscotch-app/src/helpers/keybindings.ts
@@ -1,5 +1,5 @@
import { onBeforeUnmount, onMounted } from "vue"
-import { HoppAction, invokeAction } from "./actions"
+import { HoppActionWithNoArgs, invokeAction } from "./actions"
import { isAppleDevice } from "./platformutils"
import { isDOMElement, isTypableElement } from "./utils/dom"
@@ -23,7 +23,7 @@ type Key =
| "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t"
| "u" | "v" | "w" | "x" | "y" | "z" | "0" | "1" | "2" | "3"
| "4" | "5" | "6" | "7" | "8" | "9" | "up" | "down" | "left"
- | "right" | "/" | "?" | "."
+ | "right" | "/" | "?" | "." | "enter"
/* eslint-enable */
type ModifierBasedShortcutKey = `${ModifierKeys}-${Key}`
@@ -34,9 +34,9 @@ type ShortcutKey = ModifierBasedShortcutKey | SingleCharacterShortcutKey
export const bindings: {
// eslint-disable-next-line no-unused-vars
- [_ in ShortcutKey]?: HoppAction
+ [_ in ShortcutKey]?: HoppActionWithNoArgs
} = {
- "ctrl-g": "request.send-cancel",
+ "ctrl-enter": "request.send-cancel",
"ctrl-i": "request.reset",
"ctrl-u": "request.copy-link",
"ctrl-s": "request.save",
@@ -136,6 +136,8 @@ function getPressedKey(ev: KeyboardEvent): Key | null {
// Check if period
if (val === ".") return "."
+ if (val === "enter") return "enter"
+
// If no other cases match, this is not a valid key
return null
}
diff --git a/packages/hoppscotch-app/src/helpers/realtime/MQTTConnection.ts b/packages/hoppscotch-app/src/helpers/realtime/MQTTConnection.ts
index 978663d57..a5aefea99 100644
--- a/packages/hoppscotch-app/src/helpers/realtime/MQTTConnection.ts
+++ b/packages/hoppscotch-app/src/helpers/realtime/MQTTConnection.ts
@@ -2,6 +2,17 @@ import Paho, { ConnectionOptions } from "paho-mqtt"
import { BehaviorSubject, Subject } from "rxjs"
import { logHoppRequestRunToAnalytics } from "../fb/analytics"
+export type MQTTConnectionConfig = {
+ username?: string
+ password?: string
+ keepAlive?: string
+ cleanSession?: boolean
+ lwTopic?: string
+ lwMessage: string
+ lwQos: 2 | 1 | 0
+ lwRetain: boolean
+}
+
export type MQTTMessage = { topic: string; message: string }
export type MQTTError =
| { type: "CONNECTION_NOT_ESTABLISHED"; value: unknown }
@@ -21,12 +32,22 @@ export type MQTTEvent = { time: number } & (
| { type: "ERROR"; error: MQTTError }
)
+export type MQTTTopic = {
+ name: string
+ color: string
+ qos: 2 | 1 | 0
+}
+
export type ConnectionState = "CONNECTING" | "CONNECTED" | "DISCONNECTED"
+export const QOS_VALUES = [2, 1, 0] as const
+
export class MQTTConnection {
+ subscribing$ = new BehaviorSubject(false)
subscriptionState$ = new BehaviorSubject(false)
connectionState$ = new BehaviorSubject("DISCONNECTED")
event$: Subject = new Subject()
+ subscribedTopics$ = new BehaviorSubject([])
private mqttClient: Paho.Client | undefined
private manualDisconnect = false
@@ -35,7 +56,7 @@ export class MQTTConnection {
this.event$.next(event)
}
- connect(url: string, username: string, password: string) {
+ connect(url: string, clientID: string, config: MQTTConnectionConfig) {
try {
this.connectionState$.next("CONNECTING")
@@ -49,19 +70,34 @@ export class MQTTConnection {
this.mqttClient = new Paho.Client(
`${hostname + (pathname !== "/" ? pathname : "")}`,
port !== "" ? Number(port) : 8081,
- "hoppscotch"
+ clientID ?? "hoppscotch"
)
const connectOptions: ConnectionOptions = {
onSuccess: this.onConnectionSuccess.bind(this),
onFailure: this.onConnectionFailure.bind(this),
+ timeout: 3,
+ keepAliveInterval: Number(config.keepAlive) ?? 60,
+ cleanSession: config.cleanSession ?? true,
useSSL: parseUrl.protocol !== "ws:",
}
- if (username !== "") {
+
+ const { username, password, lwTopic, lwMessage, lwQos, lwRetain } = config
+
+ if (username) {
connectOptions.userName = username
}
- if (password !== "") {
+ if (password) {
connectOptions.password = password
}
+
+ if (lwTopic?.length) {
+ const willmsg = new Paho.Message(lwMessage)
+ willmsg.qos = lwQos
+ willmsg.destinationName = lwTopic
+ willmsg.retained = lwRetain
+ connectOptions.willMessage = willmsg
+ }
+
this.mqttClient.connect(connectOptions)
this.mqttClient.onConnectionLost = this.onConnectionLost.bind(this)
this.mqttClient.onMessageArrived = this.onMessageArrived.bind(this)
@@ -112,6 +148,7 @@ export class MQTTConnection {
}
this.manualDisconnect = false
this.subscriptionState$.next(false)
+ this.subscribedTopics$.next([])
}
onMessageArrived({
@@ -170,34 +207,45 @@ export class MQTTConnection {
}
}
- subscribe(topic: string) {
+ subscribe(topic: MQTTTopic) {
+ this.subscribing$.next(true)
try {
- this.mqttClient?.subscribe(topic, {
- onSuccess: this.usubSuccess.bind(this, topic),
- onFailure: this.usubFailure.bind(this, topic),
+ this.mqttClient?.subscribe(topic.name, {
+ onSuccess: this.subSuccess.bind(this, topic),
+ onFailure: this.usubFailure.bind(this, topic.name),
+ qos: topic.qos,
})
} catch (e) {
+ this.subscribing$.next(false)
this.addEvent({
time: Date.now(),
type: "ERROR",
error: {
type: "SUBSCRIPTION_FAILED",
- topic,
+ topic: topic.name,
},
})
}
}
- usubSuccess(topic: string) {
+ subSuccess(topic: MQTTTopic) {
+ this.subscribing$.next(false)
this.subscriptionState$.next(!this.subscriptionState$.value)
+ this.addSubscription(topic)
this.addEvent({
time: Date.now(),
type: "SUBSCRIBED",
- topic,
+ topic: topic.name,
})
}
+ usubSuccess(topic: string) {
+ this.subscribing$.next(false)
+ this.removeSubscription(topic)
+ }
+
usubFailure(topic: string) {
+ this.subscribing$.next(false)
this.addEvent({
time: Date.now(),
type: "ERROR",
@@ -215,6 +263,21 @@ export class MQTTConnection {
})
}
+ addSubscription(topic: MQTTTopic) {
+ const subscriptions = this.subscribedTopics$.getValue()
+ subscriptions.push({
+ name: topic.name,
+ color: topic.color,
+ qos: topic.qos,
+ })
+ this.subscribedTopics$.next(subscriptions)
+ }
+
+ removeSubscription(topic: string) {
+ const subscriptions = this.subscribedTopics$.getValue()
+ this.subscribedTopics$.next(subscriptions.filter((t) => t.name !== topic))
+ }
+
disconnect() {
this.manualDisconnect = true
this.mqttClient?.disconnect()
diff --git a/packages/hoppscotch-app/src/helpers/shortcuts.ts b/packages/hoppscotch-app/src/helpers/shortcuts.ts
index 182f49674..d99ab0a04 100644
--- a/packages/hoppscotch-app/src/helpers/shortcuts.ts
+++ b/packages/hoppscotch-app/src/helpers/shortcuts.ts
@@ -34,7 +34,7 @@ export default [
section: "shortcut.request.title",
shortcuts: [
{
- keys: [getPlatformSpecialKey(), "G"],
+ keys: [getPlatformSpecialKey(), "Enter"],
label: "shortcut.request.send_request",
},
{
diff --git a/packages/hoppscotch-app/src/newstore/MQTTSession.ts b/packages/hoppscotch-app/src/newstore/MQTTSession.ts
index cad1e8d68..d328901bb 100644
--- a/packages/hoppscotch-app/src/newstore/MQTTSession.ts
+++ b/packages/hoppscotch-app/src/newstore/MQTTSession.ts
@@ -6,8 +6,17 @@ import {
HoppRealtimeLogLine,
} from "~/helpers/types/HoppRealtimeLog"
+type MQTTTab = {
+ id: string
+ name: string
+ color: string
+ removable: boolean
+ logs: HoppRealtimeLog[]
+}
+
type HoppMQTTRequest = {
endpoint: string
+ clientID: string
}
type HoppMQTTSession = {
@@ -15,10 +24,21 @@ type HoppMQTTSession = {
subscriptionState: boolean
log: HoppRealtimeLog
socket: MQTTConnection
+ tabs: MQTTTab[]
+ currentTabId: string
}
const defaultMQTTRequest: HoppMQTTRequest = {
endpoint: "wss://test.mosquitto.org:8081",
+ clientID: "hoppscotch",
+}
+
+const defaultTab: MQTTTab = {
+ id: "all",
+ name: "All Topics",
+ color: "var(--accent-color)",
+ removable: false,
+ logs: [],
}
const defaultMQTTSession: HoppMQTTSession = {
@@ -26,6 +46,8 @@ const defaultMQTTSession: HoppMQTTSession = {
subscriptionState: false,
socket: new MQTTConnection(),
log: [],
+ tabs: [defaultTab],
+ currentTabId: defaultTab.id,
}
const dispatchers = defineDispatchers({
@@ -37,13 +59,22 @@ const dispatchers = defineDispatchers({
request: newRequest,
}
},
- setEndpoint(_: HoppMQTTSession, { newEndpoint }: { newEndpoint: string }) {
+ setEndpoint(curr: HoppMQTTSession, { newEndpoint }: { newEndpoint: string }) {
return {
request: {
+ clientID: curr.request.clientID,
endpoint: newEndpoint,
},
}
},
+ setClientID(curr: HoppMQTTSession, { newClientID }: { newClientID: string }) {
+ return {
+ request: {
+ endpoint: curr.request.endpoint,
+ clientID: newClientID,
+ },
+ }
+ },
setConn(_: HoppMQTTSession, { socket }: { socket: MQTTConnection }) {
return {
socket,
@@ -64,6 +95,47 @@ const dispatchers = defineDispatchers({
log: [...curr.log, line],
}
},
+ setTabs(_: HoppMQTTSession, { tabs }: { tabs: MQTTTab[] }) {
+ return {
+ tabs,
+ }
+ },
+ addTab(curr: HoppMQTTSession, { tab }: { tab: MQTTTab }) {
+ return {
+ tabs: [...curr.tabs, tab],
+ }
+ },
+ setCurrentTabId(_: HoppMQTTSession, { tabId }: { tabId: string }) {
+ return {
+ currentTabId: tabId,
+ }
+ },
+ setCurrentTabLog(
+ _: HoppMQTTSession,
+ { log, tabId }: { log: HoppRealtimeLog[]; tabId: string }
+ ) {
+ const newTabs = _.tabs.map((tab) => {
+ if (tab.id === tabId) tab.logs = log
+ return tab
+ })
+
+ return {
+ tabs: newTabs,
+ }
+ },
+ addCurrentTabLogLine(
+ _: HoppMQTTSession,
+ { line, tabId }: { tabId: string; line: HoppRealtimeLog }
+ ) {
+ const newTabs = _.tabs.map((tab) => {
+ if (tab.id === tabId) tab.logs = [...tab.logs, line]
+ return tab
+ })
+
+ return {
+ tabs: newTabs,
+ }
+ },
})
const MQTTSessionStore = new DispatchingStore(defaultMQTTSession, dispatchers)
@@ -86,6 +158,15 @@ export function setMQTTEndpoint(newEndpoint: string) {
})
}
+export function setMQTTClientID(newClientID: string) {
+ MQTTSessionStore.dispatch({
+ dispatcher: "setClientID",
+ payload: {
+ newClientID,
+ },
+ })
+}
+
export function setMQTTConn(socket: MQTTConnection) {
MQTTSessionStore.dispatch({
dispatcher: "setConn",
@@ -122,6 +203,56 @@ export function addMQTTLogLine(line: HoppRealtimeLogLine) {
})
}
+export function setMQTTTabs(tabs: MQTTTab[]) {
+ MQTTSessionStore.dispatch({
+ dispatcher: "setTabs",
+ payload: {
+ tabs,
+ },
+ })
+}
+
+export function addMQTTTab(tab: MQTTTab) {
+ MQTTSessionStore.dispatch({
+ dispatcher: "addTab",
+ payload: {
+ tab,
+ },
+ })
+}
+
+export function setCurrentTab(tabId: string) {
+ MQTTSessionStore.dispatch({
+ dispatcher: "setCurrentTabId",
+ payload: {
+ tabId,
+ },
+ })
+}
+
+export function setMQTTCurrentTabLog(tabId: string, log: HoppRealtimeLog) {
+ MQTTSessionStore.dispatch({
+ dispatcher: "setCurrentTabLog",
+ payload: {
+ tabId,
+ log,
+ },
+ })
+}
+
+export function addMQTTCurrentTabLogLine(
+ tabId: string,
+ line: HoppRealtimeLogLine
+) {
+ MQTTSessionStore.dispatch({
+ dispatcher: "addCurrentTabLogLine",
+ payload: {
+ tabId,
+ line,
+ },
+ })
+}
+
export const MQTTRequest$ = MQTTSessionStore.subject$.pipe(
pluck("request"),
distinctUntilChanged()
@@ -132,6 +263,11 @@ export const MQTTEndpoint$ = MQTTSessionStore.subject$.pipe(
distinctUntilChanged()
)
+export const MQTTClientID$ = MQTTSessionStore.subject$.pipe(
+ pluck("request", "clientID"),
+ distinctUntilChanged()
+)
+
export const MQTTConnectingState$ = MQTTSessionStore.subject$.pipe(
pluck("connectingState"),
distinctUntilChanged()
@@ -156,3 +292,13 @@ export const MQTTLog$ = MQTTSessionStore.subject$.pipe(
pluck("log"),
distinctUntilChanged()
)
+
+export const MQTTTabs$ = MQTTSessionStore.subject$.pipe(
+ pluck("tabs"),
+ distinctUntilChanged()
+)
+
+export const MQTTCurrentTab$ = MQTTSessionStore.subject$.pipe(
+ pluck("currentTabId"),
+ distinctUntilChanged()
+)
diff --git a/packages/hoppscotch-app/src/pages/realtime/mqtt.vue b/packages/hoppscotch-app/src/pages/realtime/mqtt.vue
index f24078a5a..f36a2a414 100644
--- a/packages/hoppscotch-app/src/pages/realtime/mqtt.vue
+++ b/packages/hoppscotch-app/src/pages/realtime/mqtt.vue
@@ -2,23 +2,42 @@
-
-
-
+
+
-
@@ -61,8 +106,10 @@ import IconTrash from "~icons/lucide/trash"
import IconArrowUp from "~icons/lucide/arrow-up"
import IconArrowDown from "~icons/lucide/arrow-down"
import IconChevronsDown from "~icons/lucide/chevron-down"
+import IconExternalLink from "~icons/lucide/external-link"
import { useThrottleFn, useScroll } from "@vueuse/core"
import { useI18n } from "@composables/i18n"
+import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
export type LogEntryData = {
prefix?: string
diff --git a/packages/hoppscotch-app/src/components/realtime/LogEntry.vue b/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
index b1082517c..5dbfe6176 100644
--- a/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
+++ b/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
@@ -371,6 +371,7 @@ const icon = computed(() => markRaw(ICONS[props.entry.source].icon))
.realtime-log {
@apply text-secondary;
@apply overflow-hidden;
+ @apply hover:cursor-nsResize;
&,
span {
diff --git a/packages/hoppscotch-app/src/components/realtime/Subscription.vue b/packages/hoppscotch-app/src/components/realtime/Subscription.vue
new file mode 100644
index 000000000..ed49661c2
--- /dev/null
+++ b/packages/hoppscotch-app/src/components/realtime/Subscription.vue
@@ -0,0 +1,138 @@
+
+
+
+
+
+
+
+
+
+ {{ t("shortcut.request.send_request") }}
+
+
+ {{ t("shortcut.general.show_all") }}
+
+
+ {{ t("shortcut.general.command_menu") }}
+
+
+ {{ t("shortcut.general.help_menu") }}
+
+
+
+
+
+ {{ getSpecialKey() }}
+ ↩
+
+
+ {{ getSpecialKey() }}
+ K
+
+
+ /
+
+
+ ?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/hoppscotch-app/src/components/smart/Windows.vue b/packages/hoppscotch-app/src/components/smart/Windows.vue
new file mode 100644
index 000000000..ef1db4ba9
--- /dev/null
+++ b/packages/hoppscotch-app/src/components/smart/Windows.vue
@@ -0,0 +1,274 @@
+
+
+
+
+
+
+
+
diff --git a/packages/hoppscotch-app/src/helpers/actions.ts b/packages/hoppscotch-app/src/helpers/actions.ts
index deb0dbe3b..d73805689 100644
--- a/packages/hoppscotch-app/src/helpers/actions.ts
+++ b/packages/hoppscotch-app/src/helpers/actions.ts
@@ -68,7 +68,7 @@ type HoppActionWithArgs = keyof HoppActionArgs
/**
* HoppActions which do not require arguments for their invocation
*/
-type HoppActionWithNoArgs = Exclude
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
+
+
+
+
+
+
-
+
-
+ ![]()
-
+ {{ t("empty.subscription") }}
+
+
+
+
+
+
+
+
+
+
+
+