[PR #1298] [MERGED] WIP Feat/realtime tab session persistence #3215

New issue

Closed

opened 2026-03-17 00:50:53 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 00:50:53 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/1298
Author: @badsketch
Created: 10/24/2020
Status: ✅ Merged
Merged: 10/24/2020
Merged by: @liyasthomas

Base: feat/realtime/persistence ← Head: feat/realtime-tab-session-persistence

📝 Commits (6)

750bea5 add persistence for tab switch and refresh to websocket realtime tab
2cafc1f add event listener to add disconnect to logs on refresh
d2d3da9 add persistence for tab switch and refresh to sse realtime tab
760a742 add partial persistence for tab switch and refresh to socketio realtime time. socket itself still has issues when stored in vuex
7f8fdbb add persistence for tab switch and refresh to mqtt realtime
74b2abb remove logging because I couldn't get debugger to work

📊 Changes

6 files changed (+392 additions, -152 deletions)

View changed files

📝 components/realtime/mqtt.vue (+82 -24)
📝 components/realtime/socketio.vue (+107 -65)
📝 components/realtime/sse.vue (+54 -28)
📝 components/realtime/websocket.vue (+78 -35)
📝 store/mutations.js (+44 -0)
📝 store/state.js (+27 -0)

📄 Description

Hey, sorry for taking so long with this 😕
I was able to add persistence to 3 out of the 4 realtime tabs. It's just SocketIO that's giving me some trouble. What I've done in each tab is move all the data into vuex including each client. Like @LeoMartinDev suggested, I changed the connectionStates to be computed from the instance of each client, and renamed all of them to isConnected.

SocketIO is giving me trouble because I've followed the same pattern of putting it in vuex, but on connect, it says I'm mutating state outside of a store handler for some reason.

I also haven't added persistence where it stays on the same realtime tab on refresh or going to a different tab. It just always defaults to WebSocket tab.

Anyways, hope I can get some feedback on this to match coding standards of this repo. Thanks! 🙂

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/1298 **Author:** [@badsketch](https://github.com/badsketch) **Created:** 10/24/2020 **Status:** ✅ Merged **Merged:** 10/24/2020 **Merged by:** [@liyasthomas](https://github.com/liyasthomas) **Base:** `feat/realtime/persistence` ← **Head:** `feat/realtime-tab-session-persistence` --- ### 📝 Commits (6) - [`750bea5`](https://github.com/hoppscotch/hoppscotch/commit/750bea5c2ec1e5189de449c9b37cba242c500135) add persistence for tab switch and refresh to websocket realtime tab - [`2cafc1f`](https://github.com/hoppscotch/hoppscotch/commit/2cafc1f272bc8b09a3b88939286a40e152297814) add event listener to add disconnect to logs on refresh - [`d2d3da9`](https://github.com/hoppscotch/hoppscotch/commit/d2d3da9fc5886c03fe4454f8e56589889e811daa) add persistence for tab switch and refresh to sse realtime tab - [`760a742`](https://github.com/hoppscotch/hoppscotch/commit/760a74200916cdeb7514f0996769f63e002d64f3) add partial persistence for tab switch and refresh to socketio realtime time. socket itself still has issues when stored in vuex - [`7f8fdbb`](https://github.com/hoppscotch/hoppscotch/commit/7f8fdbb0bc76715b6c6a1f55e7e9b99f0fb17f3b) add persistence for tab switch and refresh to mqtt realtime - [`74b2abb`](https://github.com/hoppscotch/hoppscotch/commit/74b2abb785673aebf76df2d45d5e655c207f1a26) remove logging because I couldn't get debugger to work ### 📊 Changes **6 files changed** (+392 additions, -152 deletions) <details> <summary>View changed files</summary> 📝 `components/realtime/mqtt.vue` (+82 -24) 📝 `components/realtime/socketio.vue` (+107 -65) 📝 `components/realtime/sse.vue` (+54 -28) 📝 `components/realtime/websocket.vue` (+78 -35) 📝 `store/mutations.js` (+44 -0) 📝 `store/state.js` (+27 -0) </details> ### 📄 Description Hey, sorry for taking so long with this 😕 I was able to add persistence to 3 out of the 4 realtime tabs. It's just SocketIO that's giving me some trouble. What I've done in each tab is move all the data into `vuex` including each client. Like @LeoMartinDev suggested, I changed the connectionStates to be computed from the instance of each client, and renamed all of them to `isConnected`. SocketIO is giving me trouble because I've followed the same pattern of putting it in `vuex`, but on connect, it says I'm mutating state outside of a store handler for some reason. I also haven't added persistence where it stays on the same realtime tab on refresh or going to a different tab. It just always defaults to WebSocket tab. Anyways, hope I can get some feedback on this to match coding standards of this repo. Thanks! 🙂 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>