centrifugal/centrifugo

[bug] Centrifugo connection lost bug

YasinCelikSoftware opened this issue · 1 comments

In the project I created with Angular, when I spend more than 5-10 minutes on a page other than the project in the browser and come back to the project page, the centrifuge connection breaks and tries to reconnect. This causes freezing in the project.
...

Versions

Centrifugo version is 5.1.1
Angular version is 16.2.12
Operating system is Windows

Steps to Reproduce How can the bug be triggered?

After running the project, establishing the centrifuge connection and making subscriptions, after spending 5-10 minutes in a different tab in the browser and opening the site again, the connection is broken and the connection is established again.
...

Expected behavior What output or behaviour were you expecting instead?
After spending time in another tab, when the project tab is opened again, the connection continues as it is without breaking.
...

Code Snippets A minimum viable code snippet can be useful.

//THIS IS THE CONNECTION FUNCTION WHICH I USED AT THE BEGINING OF THE PROJECT (APP.COMPONENT.TS - inside of ngOnInit function)

connectWs(groupHotels: string, hotel) {
    this.globalServ.centrifuge.on("connected", (data) => {});

    const sub = this.globalServ.subscribeToChannel(
      "hotel_requests/" + groupHotels
    );

    sub.on("publication", async (data) => {
      const appHotels = JSON.parse(
        localStorage.getItem("token_form")
      ).app_hotels;
      if (hotel.group_hotels) {
        for (let i = 0; i < appHotels.trim().split(",").length; i++) {
          const groupIDs = hotel.group_hotels.trim().split(",");

          if (groupIDs.find((y) => y == appHotels.trim().split(",")[i])) {
            this.addRequest(data.data);
            break;
          }
        }
      } else {
        this.addRequest(data.data);
        if (data.data.type == "Key Request") {
          await this.digitalKeyService.getAllKeys();
        }
      }
    });

    sub.subscribe();

    this.globalServ.centrifuge.on("error", (err) => {
      console.log(err);
    });

    this.globalServ.centrifuge.on("disconnected", (data) => {
      console.log("disconnected", data);
    });

    this.globalServ.centrifuge.on("leave", (data) => {
      console.log("leave", data);
    });
    
     if (
       localStorage.getItem("token_form") &&
       localStorage.getItem("centrifugeToken")
     ) {
       this.globalServ.centrifuge.setToken(
         localStorage.getItem("centrifugeToken")
       );
 
       this.globalServ.centrifuge.connect();
       const userID = JSON.parse(localStorage.getItem("token_form")).id;
 
       const SUB = this.globalServ.subscribeToChannel(
         "refresh_listener/" + userID
       );

       SUB.on("publication", (message) => {
         if (message.data.message === "refresh_page") {
           window.location.href = window.location.origin;
         }
       });

       SUB.subscribe();
     }
   }
  }

Hello @YasinCelikSoftware , update Centrifugo and JS client SDK versions to latest versions, there were stability fixes on each side. If the problem still reproduces – please reopen the issue with full steps to reproduce including version information and configuration, and self-contained client code snippet without Angular dependency – so that it was possible to try locally.