@needle-tools/engine/src/engine-components/Networking.ts

Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in

import type { INetworkingWebsocketUrlProvider } from "../engine/engine_networking.js";
import { isLocalNetwork } from "../engine/engine_networking_utils.js";
import { serializable } from "../engine/engine_serialization.js";
import { getParam } from "../engine/engine_utils.js";
import { Behaviour } from "./Component.js";

const debug = getParam("debugnet");

/**
 * The networking component is used to provide a websocket url to the networking system. It implements the {@link INetworkingWebsocketUrlProvider} interface. 
 * @category Networking
 * @group Components
 */
export class Networking extends Behaviour implements INetworkingWebsocketUrlProvider {

    /** The url that should be used for the websocket connection */
    @serializable()
    url: string | null = null;

    /** The name of the url parameter that should be used to override the url. When set the url will be overridden by the url parameter e.g. when `urlParameterName=ws` `?ws=ws://localhost:8080` */
    @serializable()
    urlParameterName: string | null = null;

    /** Thie localhost url that should be used when the networking is running on a local network. This is useful when the server is running on the same machine as the client.
     */
    @serializable()
    localhost: string | null = null;

    /** @internal */
    awake() {
        if (debug)
            console.log(this);
        this.context.connection.registerProvider(this);
    }

    /** @internal */
    getWebsocketUrl(): string | null {

        let socketurl = this.url ? Networking.GetUrl(this.url, this.localhost) : null;

        if (this.urlParameterName) {
            const res = getParam(this.urlParameterName);
            if (res && typeof res === "string") {
                socketurl = res;
            }
        }

        if (!socketurl) return null;

        // regex https://regex101.com/r/JQ5WqB/1
        const regex = new RegExp("(((https?)|(?<socket_prefix>wss?)):\/\/)?(www\.)?(?<url>.+)", "gm");
        const match = regex.exec(socketurl);
        if (!match?.groups) return null;
        // if the url has a ws or wss prefix already assume the whole url is in the correct format
        const socketPrefix = match?.groups["socket_prefix"];
        if (socketPrefix) return socketurl;
        // otherwise add the ws prefix
        return "wss://" + match?.groups["url"];
    }


    public static GetUrl(url: string | null | undefined, localhostFallback?: string | null): string | null | undefined {

        let result = url;

        const useLocalHostUrl = Networking.IsLocalNetwork() && localhostFallback;
        if (useLocalHostUrl) {
            result = localhostFallback;
        }

        if (url?.startsWith("/")) {
            const base = useLocalHostUrl ? result : window.location.origin;
            if(base?.endsWith("/") && url.startsWith("/"))
                url = url.substring(1);
            result = base + url;
        }

        return result;
    }

    public static IsLocalNetwork(hostname = window.location.hostname) {
        return isLocalNetwork(hostname);
    }
}