[GH-ISSUE #1873] [bug]: Connecting to a very high traffic websocket server stalls #596

Closed
opened 2026-03-16 16:12:48 +03:00 by kerem · 20 comments
Owner

Originally created by @Gunni on GitHub (Oct 13, 2021).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/1873

Originally assigned to: @KaviiSuri on GitHub.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to realtime
  2. Paste url wss://ris-live.ripe.net/v1/ws/?client=hoppscotch.io
  3. Observe connect is disabled
  4. Remove parameter, quickly undo it and click connect (also a bug)
  5. Send { "type": "ris_subscribe" } to the remote server
  6. Observe you receive routes
  7. Observe program freezing
  8. Observe you only see like 5 messages

Expected behavior
ris-live is a stream of bgp announcements on the internet, with the { "type": "ris_subscribe" } we don't filter it at all, there are over a thousand messages per second.

Screenshots
Stalls at this point
Stalls at this point

Desktop (please complete the following information):

  • OS: Windows 10 Pro
  • Browser PWA installed with Firefox
  • Version 93

Additional context
Parameters on wss urls is considered invalid, but f.ex ris-live requires it.

Originally created by @Gunni on GitHub (Oct 13, 2021). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/1873 Originally assigned to: @KaviiSuri on GitHub. **Describe the bug** A clear and concise description of what the bug is. **To Reproduce** Steps to reproduce the behavior: 1. Go to realtime 2. Paste url `wss://ris-live.ripe.net/v1/ws/?client=hoppscotch.io` 3. Observe connect is disabled 4. Remove parameter, quickly undo it and click connect (also a bug) 5. Send `{ "type": "ris_subscribe" }` to the remote server 6. Observe you receive routes 7. Observe program freezing 8. Observe you only see like 5 messages **Expected behavior** ris-live is a stream of bgp announcements on the internet, with the `{ "type": "ris_subscribe" }` we don't filter it at all, there are over a thousand messages per second. **Screenshots** ![Stalls at this point](https://user-images.githubusercontent.com/358099/137118729-38574039-f74d-40e1-bce9-65ae68f458bf.png) Stalls at this point **Desktop (please complete the following information):** - OS: Windows 10 Pro - Browser PWA installed with Firefox - Version 93 **Additional context** Parameters on wss urls is considered invalid, but f.ex ris-live requires it.
kerem 2026-03-16 16:12:48 +03:00
Author
Owner

@AndrewBastin commented on GitHub (Oct 14, 2021):

Thank you for opening the issue.

We will try to resolve it as soon as possible.
Meanwhile, if anyone wants to pick this up feel free to!

<!-- gh-comment-id:942951912 --> @AndrewBastin commented on GitHub (Oct 14, 2021): Thank you for opening the issue. We will try to resolve it as soon as possible. Meanwhile, if anyone wants to pick this up feel free to!
Author
Owner

@KaviiSuri commented on GitHub (Mar 6, 2022):

Hey, I'd love to contribute to this issue. Is it still available?

<!-- gh-comment-id:1060035838 --> @KaviiSuri commented on GitHub (Mar 6, 2022): Hey, I'd love to contribute to this issue. Is it still available?
Author
Owner

@AndrewBastin commented on GitHub (Mar 7, 2022):

@KaviiSuri You can take this on if you want!

Assigning to you!

<!-- gh-comment-id:1060286413 --> @AndrewBastin commented on GitHub (Mar 7, 2022): @KaviiSuri You can take this on if you want! Assigning to you!
Author
Owner

@KaviiSuri commented on GitHub (Mar 8, 2022):

Thanks @AndrewBastin!

I'll need some guidance as I'm new to opensouce.

I was thinking of solving this by rate limiting the number of messages received (we could make the limits configurable from UI)

Sort of how this library implements it (appears to be for the backend though)
https://github.com/jamen/ws-rate-limit/blob/master/index.js

The gist of it is:

  • setup a interval to set messageCount to 0 every duration seconds
  • maintain a message count and update it
  • wrap all listeners with a function that only calls them if limit hasn't been reached, ignores if it has.
<!-- gh-comment-id:1062092799 --> @KaviiSuri commented on GitHub (Mar 8, 2022): Thanks @AndrewBastin! I'll need some guidance as I'm new to opensouce. I was thinking of solving this by rate limiting the number of messages received (we could make the limits configurable from UI) Sort of how this library implements it (appears to be for the backend though) https://github.com/jamen/ws-rate-limit/blob/master/index.js The gist of it is: - setup a interval to set `messageCount` to 0 every `duration` seconds - maintain a message count and update it - wrap all listeners with a function that only calls them if limit hasn't been reached, ignores if it has.
Author
Owner

@Gunni commented on GitHub (Mar 8, 2022):

Maybe as a first step, but why not just handle the load gracefully?

The rislive website can do it, with no filtering at all (host = null), i get a ~20 mbit/s flow of messages, and it works fine.

Wireshark can capture all packets my computer is sending/receiving and is only limited by available memory on my computer.

<!-- gh-comment-id:1062107134 --> @Gunni commented on GitHub (Mar 8, 2022): Maybe as a first step, but why not just handle the load gracefully? The [rislive website](https://ris-live.ripe.net/) can do it, with no filtering at all (host = null), i get a ~20 mbit/s flow of messages, and it works fine. Wireshark can capture all packets my computer is sending/receiving and is only limited by available memory on my computer.
Author
Owner

@KaviiSuri commented on GitHub (Mar 9, 2022):

I'll look into their website on how they do it.

Do you have any ideas on what the bottleneck might be for us?

It might be the rerenders due to state update, will experiment a bit

<!-- gh-comment-id:1062637261 --> @KaviiSuri commented on GitHub (Mar 9, 2022): I'll look into their website on how they do it. Do you have any ideas on what the bottleneck might be for us? It might be the rerenders due to state update, will experiment a bit
Author
Owner

@AndrewBastin commented on GitHub (Mar 9, 2022):

@KaviiSuri feel free to ask for help, you can also DM me directly on Discord if you want any help or have questions about the codebase and how stuff work (you can find me in the Hoppscotch Discord Server).

@Gunni As for the approach, I actually gave a crack at this issue long back (the branch is really stale now), the main bottleneck with the rapid firing sources on Hoppscotch turns out isn't the memory issues, but more related to how Vue functions and how much time Vue spends on diffing the Log component. The RIS Live site you mentioned also doesn't render all the entries below (as mentioned by its disclaimer) and instead just renders a static number of them.

  1. When we have a lot of data accumulated, the Log component values get really big. Vue tries to diff against that and starts to fail catching up during which more updates accumulate which freezes the entire operation.
  2. We tried buffering updates (not ignoring, but collect a buffer for a certain period of time to batch updates), but even then at some point it just gave up.

A solution could be to virtualize the log component list so the only viewable logs get rendered (fixes diffing time to a constant value) along with small practices like buffering and stuff. We can still track render times (ticks) and see if we are lagging behind and then drop messages if so.

Internally though, we already have plans to rework the Realtime pages a bit and add some more features and some optimizations. You can still work on this if you want in case we couldn't fix it on our internal cycle.

<!-- gh-comment-id:1062644864 --> @AndrewBastin commented on GitHub (Mar 9, 2022): @KaviiSuri feel free to ask for help, you can also DM me directly on Discord if you want any help or have questions about the codebase and how stuff work (you can find me in the Hoppscotch Discord Server). @Gunni As for the approach, I actually gave a crack at this issue long back (the branch is really stale now), the main bottleneck with the rapid firing sources on Hoppscotch turns out isn't the memory issues, but more related to how Vue functions and how much time Vue spends on diffing the Log component. The RIS Live site you mentioned also doesn't render all the entries below (as mentioned by its disclaimer) and instead just renders a static number of them. 1. When we have a lot of data accumulated, the Log component values get really big. Vue tries to diff against that and starts to fail catching up during which more updates accumulate which freezes the entire operation. 2. We tried buffering updates (not ignoring, but collect a buffer for a certain period of time to batch updates), but even then at some point it just gave up. A solution could be to virtualize the log component list so the only viewable logs get rendered (fixes diffing time to a constant value) along with small practices like buffering and stuff. We can still track render times (ticks) and see if we are lagging behind and then drop messages if so. Internally though, we already have plans to rework the Realtime pages a bit and add some more features and some optimizations. You can still work on this if you want in case we couldn't fix it on our internal cycle.
Author
Owner

@ashiishme commented on GitHub (May 18, 2022):

Hello @AndrewBastin, I would like to take over this issue if it is not in progress now.

<!-- gh-comment-id:1130488853 --> @ashiishme commented on GitHub (May 18, 2022): Hello @AndrewBastin, I would like to take over this issue if it is not in progress now.
Author
Owner

@AndrewBastin commented on GitHub (May 19, 2022):

Hi @ashiishme, @KaviiSuri reached out to me a while back saying he is working on this.

@KaviiSuri please confirm you are working on it

<!-- gh-comment-id:1132087789 --> @AndrewBastin commented on GitHub (May 19, 2022): Hi @ashiishme, @KaviiSuri reached out to me a while back saying he is working on this. @KaviiSuri please confirm you are working on it
Author
Owner

@KaviiSuri commented on GitHub (May 19, 2022):

Yeah I'm working on this, will send a PR soon

<!-- gh-comment-id:1132143108 --> @KaviiSuri commented on GitHub (May 19, 2022): Yeah I'm working on this, will send a PR soon
Author
Owner

@ganudoomer commented on GitHub (Jun 23, 2023):

Is this still up for grabs ? @KaviiSuri @AndrewBastin

<!-- gh-comment-id:1603697919 --> @ganudoomer commented on GitHub (Jun 23, 2023): Is this still up for grabs ? @KaviiSuri @AndrewBastin
Author
Owner

@AndrewBastin commented on GitHub (Jun 26, 2023):

@ganudoomer yes you can pick this up if you want.

<!-- gh-comment-id:1606605043 --> @AndrewBastin commented on GitHub (Jun 26, 2023): @ganudoomer yes you can pick this up if you want.
Author
Owner

@varunagarwal007 commented on GitHub (Sep 25, 2023):

Hey @AndrewBastin, would like to work on it

<!-- gh-comment-id:1734135413 --> @varunagarwal007 commented on GitHub (Sep 25, 2023): Hey @AndrewBastin, would like to work on it
Author
Owner

@varunagarwal007 commented on GitHub (Sep 25, 2023):

@Gunni, have found the issue, let me know if it is still open to work

<!-- gh-comment-id:1734141660 --> @varunagarwal007 commented on GitHub (Sep 25, 2023): @Gunni, have found the issue, let me know if it is still open to work
Author
Owner

@Gunni commented on GitHub (Sep 25, 2023):

@Gunni, have found the issue, let me know if it is still open to work

afaik nobody has solved this, but it's been a long time.

<!-- gh-comment-id:1734154514 --> @Gunni commented on GitHub (Sep 25, 2023): > @Gunni, have found the issue, let me know if it is still open to work afaik nobody has solved this, but it's been a long time.
Author
Owner

@kpguru20001 commented on GitHub (Oct 19, 2023):

Hi,
I ran the steps to reproduce but I am unable to reproduce the issue. I ended up fixing the Regex code to allow this particular type of URL
Here is a loom video: Loom Link

I was planning to update the regex to allow that particular syntax of wss urls

function generateREForProtocol(protocol) {
  return [
    new RegExp(
      `${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(:[0-9]+)?(\\/[^?#]*)?(\\?[^#]*)?(#.*)?$`
    ),
    new RegExp(
      `${protocol}(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])(:[0-9]+)?(\\/[^?#]*)?(\\?[^#]*)?(#.*)?$`
    ),
  ]
}

Please Guide me on how I can replicate this issue?

<!-- gh-comment-id:1771551836 --> @kpguru20001 commented on GitHub (Oct 19, 2023): Hi, I ran the steps to reproduce but I am unable to reproduce the issue. I ended up fixing the Regex code to allow this particular type of URL Here is a loom video: [Loom Link](https://www.loom.com/share/f50269373d4e4e63a7f7f5c928d1db63?sid=69f58f09-e84e-4a99-b8e4-5b0e4d3d2c7f) I was planning to update the regex to allow that particular syntax of wss urls ```javascript function generateREForProtocol(protocol) { return [ new RegExp( `${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(:[0-9]+)?(\\/[^?#]*)?(\\?[^#]*)?(#.*)?$` ), new RegExp( `${protocol}(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])(:[0-9]+)?(\\/[^?#]*)?(\\?[^#]*)?(#.*)?$` ), ] } ``` Please Guide me on how I can replicate this issue?
Author
Owner

@Gunni commented on GitHub (Oct 20, 2023):

I ran the steps to reproduce but I am unable to reproduce the issue. I ended up fixing the Regex code to allow this particular type of URL

Thanks for fixing the parsing!

I am unable to reproduce the freezing issue too! Good?

<!-- gh-comment-id:1772496377 --> @Gunni commented on GitHub (Oct 20, 2023): > I ran the steps to reproduce but I am unable to reproduce the issue. I ended up fixing the Regex code to allow this particular type of URL Thanks for fixing the parsing! I am unable to reproduce the freezing issue too! Good?
Author
Owner

@kpguru20001 commented on GitHub (Oct 20, 2023):

Great, Then I ll create a PR for the parsing?

<!-- gh-comment-id:1773239510 --> @kpguru20001 commented on GitHub (Oct 20, 2023): Great, Then I ll create a PR for the parsing?
Author
Owner

@shreyash010 commented on GitHub (Jan 4, 2024):

is this issue resolved?
I am getting all the logs from the socket connection.

I am new to open source and have also been working on MEVN stack if you can suggest me how to get started it will be of great help to me.

<!-- gh-comment-id:1877184993 --> @shreyash010 commented on GitHub (Jan 4, 2024): is this issue resolved? I am getting all the logs from the socket connection. I am new to open source and have also been working on MEVN stack if you can suggest me how to get started it will be of great help to me.
Author
Owner

@Gunni commented on GitHub (Feb 14, 2025):

This issue has been solved, just tested it now and it seems to work fine.

<!-- gh-comment-id:2659292070 --> @Gunni commented on GitHub (Feb 14, 2025): This issue has been solved, just tested it now and it seems to work fine.
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/hoppscotch#596
No description provided.