[JS] Parse instance initiate many websocket client connection within one user instance

Client SDKs
1

Hi all,

We are running a legacy app with Parse JS SDK v3.4.4 and have noticed a performance issue: each user instance spawns multiple WebSocket (LiveQuery) connections — typically 8–10 connections visible in the browser network tab. This creates unnecessary load on our reverse proxy, since every connection establishes a separate TLS/TCP channel.

We’ve already ensured that:

  • Parse.initialize is only called once at app startup.
  • The Parse instance is imported as a singleton and shared across all frontend components.
  • All subscriptions use that singleton.

Yet, multiple ws://.../socket.io connections are still created.
It seems every parseObject query creates a new ws client.

This is our singleton sample code

import Parse from "parse/dist/parse.min.js";

const APPLICATION_ID = "APPTEST";
const SERVER_URL = process.env.REACT_APP_SERVER_URL;

function initializeParse() {
  if (!window._PARSE_CLIENT_INITIALIZED) {
    Parse.initialize(APPLICATION_ID);
    Parse.serverURL = SERVER_URL;

    const basePath = process.env.REACT_APP_LIVEQUERY_SERVER_URL || "/socket.io";
    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
    const host = window.location.host;

    if (process.env.NODE_ENV === "production") {
      Parse.liveQueryServerURL = `${protocol}//${host}${basePath}`;
    } else {
      Parse.liveQueryServerURL = "ws://localhost:1335/";
    }

    window._PARSE_CLIENT_INITIALIZED = true;
    console.log("Parse initialized");
  }
}

initializeParse();

export default Parse;

Then on react component:

import Parse from "../parseConfig.js";
const DB_Timetables = Parse.Object.extend("Timetables");

let tagQuery = new Parse.Query("Stables");
    tagQuery.subscribe().then((subs) => {
      subs.on("open", () => {
        tagQuery.notEqualTo("tTags", 0);
        tagQuery.find().then((results) => {
          if (results.length !== 0) {
            let tally = [0, 0, 0, 0, 0, 0, 0, 0];
            results.forEach((result) => {
              const tags = result.get("tTags");
              if ((tags & tTagInfo.t1) !== 0) ++tally[0];
              if ((tags & tTagInfo.t2) !== 0) ++tally[1];
              if ((tags & tTagInfo.t3) !== 0) ++tally[2];
              if ((tags & tTagInfo.t4) !== 0) ++tally[3];
              if ((tags & tTagInfo.t5) !== 0) ++tally[4];
              if ((tags & tTagInfo.t6) !== 0) ++tally[5];
              if ((tags & tTagInfo.t7) !== 0) ++tally[6];
              if ((tags & tTagInfo.t8) !== 0) ++tally[7];
            });
            this.setState({ tTagTally: tally });
          }
        });
      });
      subs.on("update", (object) => {
        tagQuery.notEqualTo("tTags", 0);
        tagQuery.find().then((results) => {
          if (results.length !== 0) {
            let tally = [0, 0, 0, 0, 0, 0, 0, 0];
            results.forEach((result) => {
              const tags = result.get("tTags");
              if ((tags & tTagInfo.t1) !== 0) ++tally[0];
              if ((tags & tTagInfo.t2) !== 0) ++tally[1];
              if ((tags & tTagInfo.t3) !== 0) ++tally[2];
              if ((tags & tTagInfo.t4) !== 0) ++tally[3];
              if ((tags & tTagInfo.t5) !== 0) ++tally[4];
              if ((tags & tTagInfo.t6) !== 0) ++tally[5];
              if ((tags & tTagInfo.t7) !== 0) ++tally[6];
              if ((tags & tTagInfo.t8) !== 0) ++tally[7];
            });
            this.setState({ tTagTally: tally });
          }
        });
      });
    });

Can help me on this please if there is wrong pattern in using the library?

2 
function MyComponent() {
  useEffect(() => {
    let subscription;
    const tagQuery = new Parse.Query("Stables");
    tagQuery.subscribe().then((subs) => {
      subscription = subs;
      // subs.on(...) 
    });

    // component unmount // Here! Critics!
    return () => {
      if (subscription) subscription.unsubscribe();
    };
  }, []);