Frappe.socketio.socket.connect() uses wrong namespace → frequent transport close

Frappe Framework
1

Description

When calling:

frappe.socketio.socket.connect();

Socket.IO attempts to connect to:

wss://www.test.com/socket.io/…

Instead of our site namespace:

test.erpnext.com

This results in:

WebSocket is closed before the connection is established
Invalid namespace

Workaround Used

We bypassed frappe.socketio.socket.connect() and manually constructed the Socket.IO URL using the site name:

import { io } from "socket.io-client";

function initSocket() {
  let host = window.location.hostname;
  let siteName = frappe.boot.developer_mode
    ? frappe.boot.sitename
    : "test.erpnext.com";
  let protocol = window.location.protocol === "https:" ? "https" : "http";
  let port = frappe.boot.developer_mode ? `:${frappe.boot.socketio_port}` : "";

  let url = `${protocol}://${host}${port}/${siteName}`;

  let socket = io(url, {
    path: "/socket.io/",
    withCredentials: true,
    reconnectionAttempts: 5,
  });

  socket.on("connect", () => {
    console.log("Connected to WebSocket");
  });

  socket.on("disconnect", (reason) => {
    console.log("Disconnected:", reason);
  });

  return socket;
}

This allows the socket to connect initially.

Current Issue

Even with the workaround, we frequently see:

❌ Disconnected: transport close
2

After a (shortish) exchange with @revant_one recently, I looked up some technical details about the socket.io protocol and (just a minute ago!) posted some additions to the frappe_docker FAQ which you can read here (e.g. the last paragraph):

Frequently Asked Questions · frappe/frappe_docker Wiki

3

The namespace which socketio etc. talks about is not the name of your site. You seem to conflate the two, but they are very different things.

The namespace of socketio communications is a channel which is part of the data transported over the socketio http path, but not part of the http URI, even if the URI part technically could be the same as a namespace in certain cases.

The closing of the socketio communication is a required feature if the namespace presented doesn’t exist on the socketio server.

The namespace of the socketio communication is more like a grouping of communications, e.g. like a telegram or Raven channel or so.

Edit: The ws(s):// protocol is a confusing protocol. It is not http, but kind of piggybacks on http, using the underlying TCP connection but forking out of http at the moment of the WS connection establishment, while being designed to be compatible with http and its routing. So, in order to get the routing right, you need to know quite some networking, how nginx routes it’s stuff, and how the WS protocol is used in practice, e.g. the API of the relevant libraries. Additional, terminology can change from one protocol to the next built on top. So the “http URI” I mentionend above does not really make sens. The path also is called multiplexer, but then called namespace (which makes sens), but what path is it really? Is it the hostname? Well, maybe, and it depends. No wonder routing in through nginx frontend (getting the proxy configuration right for a “funny” protocol being only “kind of” http, having a path, but that path being part of WS and not HTTP although it looks like it) and over linux’s cgroups borders (which docker uses) into the app with its node WS server and its WSGI python server is not easy and people (me included) struggle with it.

4

Do i need consider same version for both socket-io-client -4.8.1(react native)
socket.io- 4.7.1 as per frappe