@needle-tools/engine 4.7.0 → 4.7.2-alpha

package/src/engine/engine_networking.ts

@@ -1,863 +1,863 @@
-const defaultNetworkingBackendUrlProvider = "https://urls.needle.tools/default-networking-backend/index";
-let networkingServerUrl: string | undefined = "wss://networking.needle.tools/socket";
-
-import * as flatbuffers from 'flatbuffers';
-import { type Websocket } from 'websocket-ts';
-
-import * as schemes from "../engine-schemes/schemes.js";
-import { isDevEnvironment } from './debug/index.js';
-import { PeerNetworking } from './engine_networking_peer.js';
-import { type IModel, type INetworkConnection, SendQueue } from './engine_networking_types.js';
-import { isHostedOnGlitch } from './engine_networking_utils.js';
-import { Context } from './engine_setup.js';
-import * as utils from "./engine_utils.js";
-
-export const debugNet = utils.getParam("debugnet") ? true : false;
-export const debugOwner = debugNet || utils.getParam("debugowner") ? true : false;
-const debugnetBin = utils.getParam("debugnetbin");
-
-export interface INetworkingWebsocketUrlProvider {
-    getWebsocketUrl(): string | null;
-}
-
-export declare interface IConnectionData {
-    id: string;
-}
-
-declare type WebsocketMessage = {
-    key: string,
-    data: IModel | IConnectionData | undefined;
-    room: string | undefined;
-}
-
-/** Events regarding the websocket connection (e.g. when the connection opens) */
-export enum ConnectionEvents {
-    ConnectionInfo = "connection-start-info"
-}
-
-/** Use to listen to room networking events like joining a networked room   
- *  For example: `this.context.connection.beginListen(RoomEvents.JoinedRoom, () => { })` 
- * @link https://engine.needle.tools/docs/networking.html#manual-networking
- * */
-export enum RoomEvents {
-    /** Internal: Sent to the server when attempting to join a room */
-    Join = "join-room",
-    /** Internal: Sent to the server when attempting to leave a room */
-    Leave = "leave-room",
-    /** Incoming: When the local user has joined a room */
-    JoinedRoom = "joined-room",
-    /** Incoming: When the local user has left a room */
-    LeftRoom = "left-room",
-    /** Incoming: When a other user has joined the room */
-    UserJoinedRoom = "user-joined-room",
-    /** Incoming: When a other user has left the room */
-    UserLeftRoom = "user-left-room",
-    /** When a user joins a room, the server sends the entire room state. Afterwards, the server sends the room-state-sent event. */
-    RoomStateSent = "room-state-sent",
-}
-/**
- * See {@link RoomEvents} for all event names and docs.
- * - `joined-room`: When the local user has joined a room
- * - `left-room`: When the local user has left a room
- * - `user-joined-room`: When a other user has joined the room
- * - `user-left-room`: When a other user has left the room
- * - `room-state-sent`: When the server has sent the room state to the client
- */
-type RoomEventsIncoming = Exclude<`${RoomEvents}`, "join-room" | "leave-room">;
-
-/** Received when listening to `RoomEvents.JoinedRoom` event */
-export class JoinedRoomResponse {
-    room!: string; // room name
-    viewId!: string;
-    allowEditing!: boolean;
-    inRoom!: string[]; // connection ids
-}
-
-export class LeftRoomResponse {
-    room!: string; // room name
-}
-
-export class UserJoinedOrLeftRoomModel {
-    userId!: string;
-}
-
-/** The Needle Engine networking server supports the concept of ownership that can be requested.   
- * This enum contains possible outgoing (Request*) and incoming (Response*) events for communicating ownership.   
- *   
- * Typically, using the {@link OwnershipModel} class instead of dealing with those events directly is preferred. */
-export enum OwnershipEvent {
-    RequestHasOwner = 'request-has-owner',
-    ResponseHasOwner = "response-has-owner",
-    RequestIsOwner = 'request-is-owner',
-    ResponseIsOwner = "response-is-owner",
-    RequestOwnership = "request-ownership",
-    GainedOwnership = 'gained-ownership',
-    RemoveOwnership = "remove-ownership",
-    LostOwnership = 'lost-ownership',
-    GainedOwnershipBroadcast = 'gained-ownership-broadcast',
-    LostOwnershipBroadcast = 'lost-ownership-broadcast',
-}
-type OwnershipEventNamesIncoming = Exclude<`${OwnershipEvent}`, "request-has-owner" | "request-is-owner" | "request-ownership" | "remove-ownership">;
-
-declare type GainedOwnershipBroadcastResponse = {
-    guid: string;
-    owner: string;
-}
-declare type LostOwnershipBroadcastResponse = {
-    guid: string;
-    owner: string;
-}
-
-declare type OwnershipResponse = {
-    guid: string;
-    value: boolean;
-}
-
-declare type WebsocketSendType = IModel | object | boolean | null | string | number;
-
-/** Class for abstracting the concept of ownership regarding a networked object or component.   
- * A component that is owned by another user can not be modified through networking (the server will reject changes) */
-export class OwnershipModel {
-
-    public guid: string;
-    private connection: NetworkConnection;
-
-    public get hasOwnership(): boolean {
-        return this._hasOwnership;
-    }
-
-    // TODO: server should just send id to everyone
-
-    /** @returns true of anyone has ownership */
-    public get isOwned(): boolean | undefined {
-        return this._isOwned;
-    }
-
-    /** 
-     * Checks if Needle Engine networking is connected to a websocket. Note that this is **not equal** to being connected to a *room*. If you want to check if Needle Engine is connected to a networking room use the `isInRoom` property.
-     * @returns true if connected to the websocket. 
-     */
-    public get isConnected(): boolean {
-        return this.connection.isConnected;
-    }
-
-    private _hasOwnership: boolean = false;
-    private _isOwned: boolean | undefined = undefined;
-    private _gainSubscription: Function;
-    private _lostSubscription: Function;
-    private _hasOwnerResponse: Function;
-
-    constructor(connection: NetworkConnection, guid: string) {
-        this.connection = connection;
-        this.guid = guid;
-        this._gainSubscription = this.onGainedOwnership.bind(this);
-        this._lostSubscription = this.onLostOwnership.bind(this);
-        connection.beginListen(OwnershipEvent.LostOwnership, this._lostSubscription);
-        connection.beginListen(OwnershipEvent.GainedOwnershipBroadcast, this._gainSubscription);
-
-        this._hasOwnerResponse = this.onHasOwnerResponse.bind(this);
-        connection.beginListen(OwnershipEvent.ResponseHasOwner, this._hasOwnerResponse);
-    }
-
-    private _isWaitingForOwnershipResponseCallback: Function | null = null;
-
-    public updateIsOwned() {
-        this.connection.send(OwnershipEvent.RequestHasOwner, { guid: this.guid });
-    }
-
-    private onHasOwnerResponse(res: OwnershipResponse) {
-        if (res.guid === this.guid) {
-            this._isOwned = res.value;
-        }
-    }
-
-    public requestOwnershipIfNotOwned(): OwnershipModel {
-        if (this._isWaitingForOwnershipResponseCallback !== null) return this;
-        this._isWaitingForOwnershipResponseCallback = this.waitForHasOwnershipRequestResponse.bind(this);
-        this.connection.beginListen(OwnershipEvent.ResponseHasOwner, this._isWaitingForOwnershipResponseCallback);
-        this.connection.send(OwnershipEvent.RequestHasOwner, { guid: this.guid });
-        return this;
-    }
-
-    private waitForHasOwnershipRequestResponse(res: OwnershipResponse) {
-        // console.log(res);
-        if (res.guid === this.guid) {
-            if (this._isWaitingForOwnershipResponseCallback) {
-                this.connection.stopListen(OwnershipEvent.ResponseHasOwner, this._isWaitingForOwnershipResponseCallback);
-                this._isWaitingForOwnershipResponseCallback = null;
-            }
-            this._isOwned = res.value;
-            if (!res.value) {
-                if (debugOwner)
-                    console.log("request ownership", this.guid)
-                this.requestOwnership();
-            }
-        }
-    }
-
-
-    public requestOwnershipAsync(): Promise<OwnershipModel> {
-        return new Promise((resolve, reject) => {
-            this.requestOwnership();
-            let updates = 0;
-            const waitForOwnership = () => {
-                if (updates++ > 10) return reject("Timeout");
-                setTimeout(() => {
-                    if (this.hasOwnership) resolve(this);
-                    else waitForOwnership();
-                }, 100);
-            };
-            waitForOwnership();
-        });
-    }
-
-    public requestOwnership(): OwnershipModel {
-        if (debugOwner) console.log("Request ownership", this.guid);
-        this.connection.send(OwnershipEvent.RequestOwnership, { guid: this.guid });
-        return this;
-    }
-
-    public freeOwnership(): OwnershipModel {
-        // TODO: abort "requestOwnershipIfNotOwned"
-        this.connection.send(OwnershipEvent.RemoveOwnership, { guid: this.guid });
-        if (this._isWaitingForOwnershipResponseCallback) {
-            this.connection.stopListen(OwnershipEvent.ResponseHasOwner, this._isWaitingForOwnershipResponseCallback);
-            this._isWaitingForOwnershipResponseCallback = null;
-        }
-        return this;
-    }
-
-    public destroy() {
-        this.connection.stopListen(OwnershipEvent.GainedOwnership, this._gainSubscription);
-        this.connection.stopListen(OwnershipEvent.LostOwnership, this._lostSubscription);
-        this.connection.stopListen(OwnershipEvent.ResponseHasOwner, this._hasOwnerResponse);
-        if (this._isWaitingForOwnershipResponseCallback) {
-            this.connection.stopListen(OwnershipEvent.ResponseHasOwner, this._isWaitingForOwnershipResponseCallback);
-            this._isWaitingForOwnershipResponseCallback = null;
-        }
-    }
-
-    private onGainedOwnership(res: GainedOwnershipBroadcastResponse) {
-        if (res.guid === this.guid) {
-            this._isOwned = true;
-            // console.log(res.owner, connection.connectionId)
-            if (this.connection.connectionId === res.owner) {
-                if (debugOwner)
-                    console.log("GAINED OWNERSHIP", this.guid)
-                this._hasOwnership = true;
-            }
-            else this._hasOwnership = false;
-        }
-    }
-    private onLostOwnership(guid: string) {
-        if (guid === this.guid) {
-            if (debugOwner)
-                console.log("LOST OWNERSHIP", this.guid)
-            this._hasOwnership = false;
-            this._isOwned = false;
-        }
-    }
-}
-
-
-export declare type BinaryCallback = {
-    (data: any | flatbuffers.ByteBuffer): void;
-}
-
-/** Main class to communicate with the networking backend 
- * @link https://engine.needle.tools/docs/networking.html
- * 
-*/
-export class NetworkConnection implements INetworkConnection {
-
-    private context: Context;
-    private _peer: PeerNetworking | null = null;
-
-    constructor(context: Context) {
-        this.context = context;
-    }
-
-    /** Experimental: networking via peerjs */
-    public get peer(): PeerNetworking {
-        if (!this._peer) {
-            this._peer = new PeerNetworking();
-        }
-        return this._peer;
-    }
-
-    /**
-     * Returns the state of a given guid.
-     */
-    public tryGetState(guid: string): IModel | null {
-        if (guid === "invalid") return null;
-        return this._state[guid];
-    }
-
-    /** The connection id of the local user - it is given by the networking backend and can not be changed */
-    public get connectionId(): string | null {
-        return this._connectionId;
-    }
-
-    /** Returns true if the networking backend is in debug mode.  
-     * To see all networking messages in the console use `?debugnet` in the url
-     */
-    public get isDebugEnabled(): boolean {
-        return debugNet;
-    }
-
-    /** 
-     * Checks if Needle Engine networking is connected to a websocket. Note that this is **not equal** to being connected to a *room*. If you want to check if Needle Engine is connected to a networking room use the `isInRoom` property.
-     * @returns true if connected to the websocket. 
-     */
-    public get isConnected(): boolean {
-        return this.connected;
-    }
-
-    /** The name of the room the user is currently connected to */
-    public get currentRoomName(): string | null { return this._currentRoomName; }
-    /** True when connected to a room via a regular url, otherwise (when using a view only url) false indicating that the user should not be able to modify the scene */
-    public get allowEditing(): boolean { return this._currentRoomAllowEditing; }
-    /**
-     * The view id of the room the user is currently connected to.
-     */
-    public get currentRoomViewId(): string | null { return this._currentRoomViewId; }
-    /**
-     * Returns a url that can be shared with others to view the current room in view only mode.  
-     * This is useful for sharing a room with others without allowing them to modify the scene.  
-     * Use `connection.allowEditing` to check if the current room is in view only mode.  
-     */
-    public getViewOnlyUrl() {
-        if (this.currentRoomViewId === null) return null;
-        const url = new URL(window.location.href);
-        url.searchParams.set("view", this.currentRoomViewId);
-        return url.href;
-    }
-
-    /** True if connected to a networked room. Use the joinRoom function or a `SyncedRoom` component */
-    public get isInRoom(): boolean {
-        return this._isInRoom;
-    }
-
-    /** Latency to currently connected backend server */
-    public get currentLatency(): number {
-        return this._currentDelay;
-    }
-
-    /**
-     * The current server url that the networking backend is connected to (e.g. the url of the websocket server)
-     */
-    public get currentServerUrl(): string | null {
-        // @ts-ignore (in ts-websocket 2.x this property is exposed)
-        return this._ws?.url ?? null;
-    }
-
-    /** A ping is sent to the server at a regular interval while the browser tab is active. This method can be used to send additional ping messages when needed so that the user doesn't get disconnected from the networking backend */
-    public sendPing() {
-        this.send("ping", { time: this.context.time.time });
-    }
-
-    /** Returns true if a user with the given connectionId is in the room */
-    public userIsInRoom(id: string): boolean {
-        return this._currentInRoom.indexOf(id) !== -1;
-    }
-
-    private _usersInRoomCopy = [];
-    /** Returns a list of all user ids in the current room */
-    public usersInRoom(target: string[] | null = null): string[] {
-        if (!target) target = this._usersInRoomCopy;
-        target.length = 0;
-        for (const user of this._currentInRoom)
-            target.push(user);
-        return target;
-    }
-
-    /** Joins a networked room. If you don't want to manage a connection yourself you can use a `SyncedRoom` component as well */
-    public joinRoom(room: string, viewOnly: boolean = false): boolean {
-        if (!room) {
-            console.error("Missing room name, can not join: \"" + room + "\"");
-            return false;
-        }
-        // There's not really a reason to limit the room name length
-        if (room.length > 1024) {
-            console.error("Room name too long, can not join: \"" + room + "\". Max length is 1024 characters.");
-            return false;
-        }
-        else if (this.isInRoom && this.currentRoomName !== room) {
-            console.warn("Needle Engine is already connected to a networking room. Connecting to multiple rooms is not supported");
-        }
-
-        this.connect();
-
-        if (debugNet)
-            console.log("join: " + room);
-        this.send(RoomEvents.Join, { room: room, viewOnly: viewOnly }, SendQueue.OnConnection);
-        return true;
-    }
-
-    /** Use to leave a room that you are currently connected to (use `leaveRoom()` to disconnect from the currently active room but you can also specify a room name) */
-    public leaveRoom(room: string | null = null) {
-        if (!room) room = this.currentRoomName;
-        if (!room) {
-            console.error("Missing room name, can not join: \"" + room + "\"");
-            return false;
-        }
-        this.send(RoomEvents.Leave, { room: room });
-        return true;
-    }
-
-    /** Send a message to the networking backend - it will broadcasted to all connected users in the same room by default */
-    public send<T extends WebsocketSendType>(key: string | OwnershipEvent, data: T | null = null, queue: SendQueue = SendQueue.Queued) {
-
-        //@ts-ignore
-        if (data === null) data = {};
-
-        if (queue === SendQueue.Queued) {
-            this._defaultMessagesBuffer.push({ key: key, value: data });
-            return;
-        }
-
-        // if (!this.connected) return;
-        // if (this.channelId)
-        //     data["__id"] = this.channelId;
-        // else if (this.connectionId)
-        //     data["__id"] = this.connectionId;
-        // this.sendGeckosIo(key, data);
-        return this.sendWithWebsocket(key, data, queue);
-    }
-
-    /** Use to delete state for a given guid on the server */
-    public sendDeleteRemoteState(guid: string) {
-        this.send("delete-state", { guid: guid, dontSave: true });
-        delete this._state[guid];
-    }
-
-    /** Use to delete all state in the currently connected room on the server */
-    public sendDeleteRemoteStateAll() {
-        this.send("delete-all-state");
-        this._state = {};
-    }
-
-    /** Send a binary message to the server (broadcasted to all connected users) */
-    public sendBinary(bin: Uint8Array) {
-        if (debugnetBin) console.log("<< send binary", this.context.time.frame, (bin.length / 1024) + " KB");
-        this._ws?.send(bin);
-    }
-
-    private _defaultMessagesBuffer: Array<{ key: string, value: any }> = [];
-    private _defaultMessagesBufferArray: Array<{ key: string, data: any }> = [];
-    public sendBufferedMessagesNow() {
-        if (!this._ws) return;
-        this._defaultMessagesBufferArray.length = 0;
-        const count = Object.keys(this._defaultMessagesBuffer).length;
-        for (const key in this._defaultMessagesBuffer) {
-            const data = this._defaultMessagesBuffer[key];
-            // if there is only one message to be sent we dont need to send an array
-            if (count <= 1) {
-                this.sendWithWebsocket(data.key, data.value, SendQueue.Immediate);
-                break;
-            }
-            const msg = this.toMessage(data.key, data.value);
-            this._defaultMessagesBufferArray.push(msg);
-        }
-        this._defaultMessagesBuffer.length = 0;
-        if (this._defaultMessagesBufferArray.length > 0 && debugNet)
-            console.log("SEND BUFFERED", this._defaultMessagesBufferArray.length);
-        if (this._defaultMessagesBufferArray.length <= 0) return;
-        const message = JSON.stringify(this._defaultMessagesBufferArray);
-        this._ws?.send(message);
-    }
-
-    /** Use to start listening to networking events.   
-     * To unsubscribe from events use the `stopListen` method.   
-     * See the example below for typical usage:
-     * 
-     * ### Component Example
-     * ```ts
-     * // Make sure to unsubscribe from events when the component is disabled
-     * export class MyComponent extends Behaviour {
-     *   onEnable() {
-     *     this.connection.beginListen("joined-room", this.onJoinedRoom)
-     *   }
-     *   onDisable() {
-     *     this.connection.stopListen("joined-room", this.onJoinedRoom)
-     *   }
-     *   onJoinedRoom = () => {
-     *      console.log("I joined a networked room")
-     *   }
-     * }
-     * ```
-     * @link https://engine.needle.tools/docs/networking.html
-     * 
-    */
-    public beginListen(key: (string & {}) | OwnershipEvent | OwnershipEventNamesIncoming | RoomEventsIncoming | RoomEvents, callback: Function): Function {
-        if (!this._listeners[key])
-            this._listeners[key] = [];
-        this._listeners[key].push(callback);
-        return callback;
-    }
-
-    /**@deprecated please use stopListen instead (2.65.2-pre) */
-    public stopListening(key: (string & {}) | OwnershipEvent | OwnershipEventNamesIncoming | RoomEventsIncoming | RoomEvents, callback: Function | null) { return this.stopListen(key, callback); }
-
-    /** Use to stop listening to networking events  
-     * To subscribe to events use the `beginListen` method.   
-     * See the example below for typical usage:
-     * 
-     * ### Component Example
-     * ```ts
-     * // Make sure to unsubscribe from events when the component is disabled
-     * export class MyComponent extends Behaviour {
-     *   onEnable() {
-     *     this.connection.beginListen("joined-room", this.onJoinedRoom)
-     *   }
-     *   onDisable() {
-     *     this.connection.stopListen("joined-room", this.onJoinedRoom)
-     *   }
-     *   onJoinedRoom = () => {
-     *      console.log("I joined a networked room")
-     *   }
-     * }
-     * ```
-     */
-    public stopListen(key: (string & {}) | OwnershipEvent | OwnershipEventNamesIncoming | RoomEventsIncoming | RoomEvents, callback: Function | null) {
-        if (!callback) return;
-        if (!this._listeners[key]) return;
-        const index = this._listeners[key].indexOf(callback);
-        if (index >= 0) {
-            this._listeners[key].splice(index, 1);
-        }
-    }
-
-    /** Use to start listening to networking binary events */
-    public beginListenBinary(identifier: string, callback: BinaryCallback): BinaryCallback {
-        if (!this._listenersBinary[identifier])
-            this._listenersBinary[identifier] = [];
-        this._listenersBinary[identifier].push(callback);
-        return callback;
-    }
-
-    /** Use to stop listening to networking binary events */
-    public stopListenBinary(identifier: string, callback: any) {
-        if (!this._listenersBinary[identifier]) return;
-        const index = this._listenersBinary[identifier].indexOf(callback);
-        if (index >= 0) {
-            this._listenersBinary[identifier].splice(index, 1);
-        }
-    }
-
-    private netWebSocketUrlProvider?: INetworkingWebsocketUrlProvider;
-
-    /** Use to override the networking server backend url. This is what the `Networking` component uses to modify the backend url */
-    public registerProvider(prov: INetworkingWebsocketUrlProvider) {
-        this.netWebSocketUrlProvider = prov;
-    }
-
-    /** Used to connect to the networking server */
-    public async connect(url?: string) {
-        if (this.connected && url && url !== networkingServerUrl) {
-            return Promise.reject("Can not connect to different server url. Please disconnect first.");
-        }
-        if (this.connected) {
-            return Promise.resolve(true);
-        }
-        if (url)
-            console.debug("Connecting to user provided url " + url);
-        const overrideUrl = url || this.netWebSocketUrlProvider?.getWebsocketUrl();
-        if (overrideUrl) {
-            networkingServerUrl = overrideUrl;
-        }
-        else if (isHostedOnGlitch()) {
-            networkingServerUrl = "wss://" + window.location.host + "/socket";
-        }
-        return this.connectWebsocket();
-    };
-
-    /** Disconnect from the networking backend + reset internal state */
-    public disconnect() {
-        this._ws?.close();
-        this._ws = undefined;
-        networkingServerUrl = undefined;
-
-        // Reset all state
-        this._currentRoomAllowEditing = true;
-        this._currentRoomName = null;
-        this._currentRoomViewId = null;
-        this._isInRoom = false;
-        this._currentInRoom.length = 0;
-        this._state = {};
-        this._currentDelay = -1;
-    }
-
-    private _listeners: { [key: string]: Function[] } = {};
-    private _listenersBinary: { [key: string]: BinaryCallback[] } = {};
-    private connected: boolean = false;
-    private channelId: string | undefined;
-    private _connectionId: string | null = null;
-
-    // Websocket ------------------------------------------------------------
-    private _ws: Websocket | undefined;
-    private _waitingForSocket: { [key: string]: Array<Function> } = {};
-    private _isInRoom: boolean = false;
-    private _currentRoomName: string | null = null;
-    private _currentRoomViewId: string | null = null;
-    private _currentRoomAllowEditing: boolean = true;
-    private _currentInRoom: string[] = [];
-    private _state: { [key: string]: any } = {};
-    private _currentDelay: number = -1;
-
-    private _connectingToWebsocketPromise: Promise<boolean> | null = null;
-
-    private connectWebsocket() {
-        if (this._connectingToWebsocketPromise) return this._connectingToWebsocketPromise;
-        return this._connectingToWebsocketPromise = new Promise(async (res, _) => {
-            let didResolve = false;
-            const resolve = (val: boolean) => {
-                if (didResolve) return;
-                didResolve = true;
-                res(val);
-            }
-            if (networkingServerUrl === undefined) {
-                console.log("Fetch default backend url: " + defaultNetworkingBackendUrlProvider);
-                const failed = false;
-                const defaultUrlResponse = await fetch(defaultNetworkingBackendUrlProvider);
-                networkingServerUrl = await defaultUrlResponse.text();
-                if (failed) return;
-            }
-
-            if (networkingServerUrl === undefined) {
-                resolve(false);
-                return;
-            }
-
-            console.debug("⊡ Connecting to networking backend on\n" + networkingServerUrl)
-            const pkg = await import('websocket-ts');
-            // @ts-ignore
-            const WebsocketBuilder = pkg.default?.WebsocketBuilder ?? pkg.WebsocketBuilder;
-            const ExponentialBackoff = pkg.default?.ExponentialBackoff ?? pkg.ExponentialBackoff;
-            const ws = new WebsocketBuilder(networkingServerUrl)
-                .withMaxRetries(10)
-                .withBackoff(new ExponentialBackoff(2000, 4))
-                .onOpen(() => {
-                    this._connectingToWebsocketPromise = null;
-                    this._ws = ws;
-                    this.connected = true;
-                    if (isDevEnvironment() || debugNet) console.log("⊞ Connected to networking backend\n" + networkingServerUrl);
-                    else console.debug("⊞ Connected to networking backend", networkingServerUrl);
-                    resolve(true);
-                    this.onSendQueued(SendQueue.OnConnection);
-                })
-                .onClose((_evt) => {
-                    this._connectingToWebsocketPromise = null;
-                    this.connected = false;
-                    this._isInRoom = false;
-                    resolve(false);
-                    let msg = "Websocket connection closed...";
-                    if (!networkingServerUrl?.includes("/socket")) msg += ` Do you perhaps mean to connect to \"/socket\"?`;
-                    console.error(msg);
-                })
-                .onError((_e) => {
-                    console.error("⊠ Websocket connection failed...");
-                    resolve(false);
-                })
-                .onRetry(() => { console.log("→ Retry connecting to networking websocket") })
-                .build();
-            ws.addEventListener(pkg.WebsocketEvent.message, (socket, msg) => {
-                this.onMessage(socket, msg);
-            });
-        });
-    }
-
-    private onMessage(_, ev) {
-        const msg = ev.data;
-        try {
-            if (typeof msg !== "string") {
-                if (msg.size) {
-                    // is binary blob
-                    this.handleIncomingBinaryMessage(msg);
-                }
-                return;
-            }
-            const message: WebsocketMessage | Array<WebsocketMessage> = JSON.parse(msg);
-            if (Array.isArray(message)) {
-                // console.log("Receive package of " + message.length + " messages")
-                for (const msg of message) {
-                    this.handleIncomingStringMessage(msg);
-                }
-            }
-            else this.handleIncomingStringMessage(message);
-            return;
-        }
-        catch (err) {
-            if (debugNet && msg === "pong") console.log("<<", msg);
-            else if (isDevEnvironment()) console.error("Failed to parse message", err);
-        }
-    }
-
-    private async handleIncomingBinaryMessage(blob: Blob) {
-        if (debugnetBin) console.log("<< bin", this.context.time.frame);
-        const buf = await blob.arrayBuffer();
-        var data = new Uint8Array(buf);
-        const bb = new flatbuffers.ByteBuffer(data);
-        const id = bb.getBufferIdentifier();
-        const callbacks = this._listenersBinary[id];
-        // use registered cast methods to get the correct type from the flatbuffer
-        const obj = schemes.tryCastBinary(bb);
-        const guid = schemes.tryGetGuid(obj);
-        if (guid && typeof guid === "string") {
-            this._state[guid] = obj;
-        }
-        if (!callbacks) return;
-        const res = obj ?? bb; // fallback to bytebuffer if no cast method is registered
-        // call all listeners subscribed to these events
-        for (const cb of callbacks) {
-            cb(res);
-        }
-    }
-
-    private handleIncomingStringMessage(message: WebsocketMessage) {
-
-        if (debugNet) console.log("<<", message.key ?? message);
-        if (message.key) {
-            switch (message.key) {
-                case ConnectionEvents.ConnectionInfo:
-                    if (message.data) {
-                        const connection = message.data as IConnectionData;
-                        if (connection) {
-                            console.assert(connection.id !== undefined && connection.id !== null && connection.id.length > 0,
-                                "server did not send connection id", connection.id);
-                            console.debug("Your id is: " + connection.id, this.context.alias ?? "");
-                            this._connectionId = connection.id;
-                        }
-                    }
-                    else console.warn("Expected connection id in " + message.key);
-                    break;
-                case RoomEvents.JoinedRoom:
-                    if (debugNet)
-                        console.log(message);
-                    if (message) {
-                        this._isInRoom = true;
-                        const model = message as unknown as JoinedRoomResponse;
-                        this._currentRoomName = model.room;
-                        this._currentRoomViewId = model.viewId;
-                        this._currentRoomAllowEditing = model.allowEditing ?? true;
-
-                        this._currentInRoom.length = 0;
-                        this._currentInRoom.push(...model.inRoom);
-                        if (debugnetBin || isDevEnvironment()) console.debug("Joined Needle Engine Room: " + model.room);
-
-                        const viewUrl = new URL(window.location.href);
-                        if (viewUrl.searchParams.has("room")) {
-                            viewUrl.searchParams.delete("room");
-                        }
-                        viewUrl.searchParams.set("view", this._currentRoomViewId);
-                        console.debug(`Room view id: ${this._currentRoomViewId}\n${viewUrl.href}`);
-                    }
-
-                    this.onSendQueued(SendQueue.OnRoomJoin);
-                    break;
-
-                case RoomEvents.LeftRoom:
-                    const model = message as unknown as LeftRoomResponse;
-                    if (model.room === this.currentRoomName) {
-                        this._isInRoom = false;
-                        this._currentRoomName = null;
-                        this._currentRoomAllowEditing = true;
-                        this._currentInRoom.length = 0;
-                        if (debugnetBin || isDevEnvironment()) console.debug("Left Needle Engine Room: " + model.room);
-                    }
-                    break;
-                case RoomEvents.UserJoinedRoom:
-                    if (message.data) {
-                        const model = message.data as unknown as UserJoinedOrLeftRoomModel;
-                        this._currentInRoom.push(model.userId);
-                        if (debugNet)
-                            console.log(model.userId + " joined", "now in room:", this._currentInRoom);
-                    }
-                    break;
-                case RoomEvents.UserLeftRoom:
-                    if (message.data) {
-                        const model = message.data as unknown as UserJoinedOrLeftRoomModel;
-                        const index = this._currentInRoom.indexOf(model.userId);
-                        if (index >= 0) {
-                            if (debugNet)
-                                console.log(model.userId + " left", "now in room:", this._currentInRoom);
-                            this._currentInRoom.splice(index, 1);
-                        }
-                        if (model.userId === this.connectionId) {
-                            // you left the room
-                            console.log("you left the room");
-                        }
-                    }
-                    break;
-
-                case "all-room-state-deleted":
-                    if (debugNet) console.log("RECEIVED all-room-state-deleted");
-                    this._state = {};
-                    break;
-
-                case "ping":
-                case "pong":
-                    const time = (message as any).data?.time;
-                    if (time) {
-                        this._currentDelay = this.context.time.time - time;
-                    }
-                    if (debugNet)
-                        console.log(`Current latency: ${(this._currentDelay * 1000).toFixed()} ms`, "Clients in room: " + this._currentInRoom?.length);
-                    break;
-            }
-        }
-
-        const model = message.data as IModel;
-        if (model) {
-            this._state[model.guid] = model;
-        }
-
-        let listeners = this._listeners[message.key];
-        if (listeners) {
-            // Copy listeners array in case a listener is removed while iterating
-            listeners = [...listeners];
-            for (const listener of listeners) {
-                try {
-                    listener(message.data);
-                }
-                catch (err) {
-                    console.error("Error invoking callback for \"" + message.key + "\"", err);
-                }
-            }
-        }
-    }
-
-    private toMessage(key: string, data: any) {
-        return {
-            key: key,
-            data: data
-        };
-    }
-
-    private sendWithWebsocket(key: string, data: IModel | object | boolean | string | number, queue: SendQueue = SendQueue.OnRoomJoin) {
-        // console.log(key);
-        if (!this._ws) {
-            const arr = this._waitingForSocket[queue] || [];
-            arr.push(() => this.sendWithWebsocket(key, data, queue));
-            this._waitingForSocket[queue] = arr;
-            // console.log(this._bufferedMessages)
-            return;
-        }
-        const str = JSON.stringify(this.toMessage(key, data));
-        if (debugNet) console.log(">>", key);
-        this._ws.send(str);
-    }
-
-    private onSendQueued(queue: SendQueue) {
-        const queued = this._waitingForSocket[queue];
-        // console.log("send", queue, queued);
-        if (queued) {
-            for (const callback of queued) {
-                callback();
-            }
-            queued.length = 0;
-        }
-    }
-
-
+const defaultNetworkingBackendUrlProvider = "https://urls.needle.tools/default-networking-backend/index";
+let networkingServerUrl: string | undefined = "wss://networking.needle.tools/socket";
+
+import * as flatbuffers from 'flatbuffers';
+import { type Websocket } from 'websocket-ts';
+
+import * as schemes from "../engine-schemes/schemes.js";
+import { isDevEnvironment } from './debug/index.js';
+import { PeerNetworking } from './engine_networking_peer.js';
+import { type IModel, type INetworkConnection, SendQueue } from './engine_networking_types.js';
+import { isHostedOnGlitch } from './engine_networking_utils.js';
+import { Context } from './engine_setup.js';
+import * as utils from "./engine_utils.js";
+
+export const debugNet = utils.getParam("debugnet") ? true : false;
+export const debugOwner = debugNet || utils.getParam("debugowner") ? true : false;
+const debugnetBin = utils.getParam("debugnetbin");
+
+export interface INetworkingWebsocketUrlProvider {
+    getWebsocketUrl(): string | null;
+}
+
+export declare interface IConnectionData {
+    id: string;
+}
+
+declare type WebsocketMessage = {
+    key: string,
+    data: IModel | IConnectionData | undefined;
+    room: string | undefined;
+}
+
+/** Events regarding the websocket connection (e.g. when the connection opens) */
+export enum ConnectionEvents {
+    ConnectionInfo = "connection-start-info"
+}
+
+/** Use to listen to room networking events like joining a networked room   
+ *  For example: `this.context.connection.beginListen(RoomEvents.JoinedRoom, () => { })` 
+ * @link https://engine.needle.tools/docs/networking.html#manual-networking
+ * */
+export enum RoomEvents {
+    /** Internal: Sent to the server when attempting to join a room */
+    Join = "join-room",
+    /** Internal: Sent to the server when attempting to leave a room */
+    Leave = "leave-room",
+    /** Incoming: When the local user has joined a room */
+    JoinedRoom = "joined-room",
+    /** Incoming: When the local user has left a room */
+    LeftRoom = "left-room",
+    /** Incoming: When a other user has joined the room */
+    UserJoinedRoom = "user-joined-room",
+    /** Incoming: When a other user has left the room */
+    UserLeftRoom = "user-left-room",
+    /** When a user joins a room, the server sends the entire room state. Afterwards, the server sends the room-state-sent event. */
+    RoomStateSent = "room-state-sent",
+}
+/**
+ * See {@link RoomEvents} for all event names and docs.
+ * - `joined-room`: When the local user has joined a room
+ * - `left-room`: When the local user has left a room
+ * - `user-joined-room`: When a other user has joined the room
+ * - `user-left-room`: When a other user has left the room
+ * - `room-state-sent`: When the server has sent the room state to the client
+ */
+type RoomEventsIncoming = Exclude<`${RoomEvents}`, "join-room" | "leave-room">;
+
+/** Received when listening to `RoomEvents.JoinedRoom` event */
+export class JoinedRoomResponse {
+    room!: string; // room name
+    viewId!: string;
+    allowEditing!: boolean;
+    inRoom!: string[]; // connection ids
+}
+
+export class LeftRoomResponse {
+    room!: string; // room name
+}
+
+export class UserJoinedOrLeftRoomModel {
+    userId!: string;
+}
+
+/** The Needle Engine networking server supports the concept of ownership that can be requested.   
+ * This enum contains possible outgoing (Request*) and incoming (Response*) events for communicating ownership.   
+ *   
+ * Typically, using the {@link OwnershipModel} class instead of dealing with those events directly is preferred. */
+export enum OwnershipEvent {
+    RequestHasOwner = 'request-has-owner',
+    ResponseHasOwner = "response-has-owner",
+    RequestIsOwner = 'request-is-owner',
+    ResponseIsOwner = "response-is-owner",
+    RequestOwnership = "request-ownership",
+    GainedOwnership = 'gained-ownership',
+    RemoveOwnership = "remove-ownership",
+    LostOwnership = 'lost-ownership',
+    GainedOwnershipBroadcast = 'gained-ownership-broadcast',
+    LostOwnershipBroadcast = 'lost-ownership-broadcast',
+}
+type OwnershipEventNamesIncoming = Exclude<`${OwnershipEvent}`, "request-has-owner" | "request-is-owner" | "request-ownership" | "remove-ownership">;
+
+declare type GainedOwnershipBroadcastResponse = {
+    guid: string;
+    owner: string;
+}
+declare type LostOwnershipBroadcastResponse = {
+    guid: string;
+    owner: string;
+}
+
+declare type OwnershipResponse = {
+    guid: string;
+    value: boolean;
+}
+
+declare type WebsocketSendType = IModel | object | boolean | null | string | number;
+
+/** Class for abstracting the concept of ownership regarding a networked object or component.   
+ * A component that is owned by another user can not be modified through networking (the server will reject changes) */
+export class OwnershipModel {
+
+    public guid: string;
+    private connection: NetworkConnection;
+
+    public get hasOwnership(): boolean {
+        return this._hasOwnership;
+    }
+
+    // TODO: server should just send id to everyone
+
+    /** @returns true of anyone has ownership */
+    public get isOwned(): boolean | undefined {
+        return this._isOwned;
+    }
+
+    /** 
+     * Checks if Needle Engine networking is connected to a websocket. Note that this is **not equal** to being connected to a *room*. If you want to check if Needle Engine is connected to a networking room use the `isInRoom` property.
+     * @returns true if connected to the websocket. 
+     */
+    public get isConnected(): boolean {
+        return this.connection.isConnected;
+    }
+
+    private _hasOwnership: boolean = false;
+    private _isOwned: boolean | undefined = undefined;
+    private _gainSubscription: Function;
+    private _lostSubscription: Function;
+    private _hasOwnerResponse: Function;
+
+    constructor(connection: NetworkConnection, guid: string) {
+        this.connection = connection;
+        this.guid = guid;
+        this._gainSubscription = this.onGainedOwnership.bind(this);
+        this._lostSubscription = this.onLostOwnership.bind(this);
+        connection.beginListen(OwnershipEvent.LostOwnership, this._lostSubscription);
+        connection.beginListen(OwnershipEvent.GainedOwnershipBroadcast, this._gainSubscription);
+
+        this._hasOwnerResponse = this.onHasOwnerResponse.bind(this);
+        connection.beginListen(OwnershipEvent.ResponseHasOwner, this._hasOwnerResponse);
+    }
+
+    private _isWaitingForOwnershipResponseCallback: Function | null = null;
+
+    public updateIsOwned() {
+        this.connection.send(OwnershipEvent.RequestHasOwner, { guid: this.guid });
+    }
+
+    private onHasOwnerResponse(res: OwnershipResponse) {
+        if (res.guid === this.guid) {
+            this._isOwned = res.value;
+        }
+    }
+
+    public requestOwnershipIfNotOwned(): OwnershipModel {
+        if (this._isWaitingForOwnershipResponseCallback !== null) return this;
+        this._isWaitingForOwnershipResponseCallback = this.waitForHasOwnershipRequestResponse.bind(this);
+        this.connection.beginListen(OwnershipEvent.ResponseHasOwner, this._isWaitingForOwnershipResponseCallback);
+        this.connection.send(OwnershipEvent.RequestHasOwner, { guid: this.guid });
+        return this;
+    }
+
+    private waitForHasOwnershipRequestResponse(res: OwnershipResponse) {
+        // console.log(res);
+        if (res.guid === this.guid) {
+            if (this._isWaitingForOwnershipResponseCallback) {
+                this.connection.stopListen(OwnershipEvent.ResponseHasOwner, this._isWaitingForOwnershipResponseCallback);
+                this._isWaitingForOwnershipResponseCallback = null;
+            }
+            this._isOwned = res.value;
+            if (!res.value) {
+                if (debugOwner)
+                    console.log("request ownership", this.guid)
+                this.requestOwnership();
+            }
+        }
+    }
+
+
+    public requestOwnershipAsync(): Promise<OwnershipModel> {
+        return new Promise((resolve, reject) => {
+            this.requestOwnership();
+            let updates = 0;
+            const waitForOwnership = () => {
+                if (updates++ > 10) return reject("Timeout");
+                setTimeout(() => {
+                    if (this.hasOwnership) resolve(this);
+                    else waitForOwnership();
+                }, 100);
+            };
+            waitForOwnership();
+        });
+    }
+
+    public requestOwnership(): OwnershipModel {
+        if (debugOwner) console.log("Request ownership", this.guid);
+        this.connection.send(OwnershipEvent.RequestOwnership, { guid: this.guid });
+        return this;
+    }
+
+    public freeOwnership(): OwnershipModel {
+        // TODO: abort "requestOwnershipIfNotOwned"
+        this.connection.send(OwnershipEvent.RemoveOwnership, { guid: this.guid });
+        if (this._isWaitingForOwnershipResponseCallback) {
+            this.connection.stopListen(OwnershipEvent.ResponseHasOwner, this._isWaitingForOwnershipResponseCallback);
+            this._isWaitingForOwnershipResponseCallback = null;
+        }
+        return this;
+    }
+
+    public destroy() {
+        this.connection.stopListen(OwnershipEvent.GainedOwnership, this._gainSubscription);
+        this.connection.stopListen(OwnershipEvent.LostOwnership, this._lostSubscription);
+        this.connection.stopListen(OwnershipEvent.ResponseHasOwner, this._hasOwnerResponse);
+        if (this._isWaitingForOwnershipResponseCallback) {
+            this.connection.stopListen(OwnershipEvent.ResponseHasOwner, this._isWaitingForOwnershipResponseCallback);
+            this._isWaitingForOwnershipResponseCallback = null;
+        }
+    }
+
+    private onGainedOwnership(res: GainedOwnershipBroadcastResponse) {
+        if (res.guid === this.guid) {
+            this._isOwned = true;
+            // console.log(res.owner, connection.connectionId)
+            if (this.connection.connectionId === res.owner) {
+                if (debugOwner)
+                    console.log("GAINED OWNERSHIP", this.guid)
+                this._hasOwnership = true;
+            }
+            else this._hasOwnership = false;
+        }
+    }
+    private onLostOwnership(guid: string) {
+        if (guid === this.guid) {
+            if (debugOwner)
+                console.log("LOST OWNERSHIP", this.guid)
+            this._hasOwnership = false;
+            this._isOwned = false;
+        }
+    }
+}
+
+
+export declare type BinaryCallback = {
+    (data: any | flatbuffers.ByteBuffer): void;
+}
+
+/** Main class to communicate with the networking backend 
+ * @link https://engine.needle.tools/docs/networking.html
+ * 
+*/
+export class NetworkConnection implements INetworkConnection {
+
+    private context: Context;
+    private _peer: PeerNetworking | null = null;
+
+    constructor(context: Context) {
+        this.context = context;
+    }
+
+    /** Experimental: networking via peerjs */
+    public get peer(): PeerNetworking {
+        if (!this._peer) {
+            this._peer = new PeerNetworking();
+        }
+        return this._peer;
+    }
+
+    /**
+     * Returns the state of a given guid.
+     */
+    public tryGetState(guid: string): IModel | null {
+        if (guid === "invalid") return null;
+        return this._state[guid];
+    }
+
+    /** The connection id of the local user - it is given by the networking backend and can not be changed */
+    public get connectionId(): string | null {
+        return this._connectionId;
+    }
+
+    /** Returns true if the networking backend is in debug mode.  
+     * To see all networking messages in the console use `?debugnet` in the url
+     */
+    public get isDebugEnabled(): boolean {
+        return debugNet;
+    }
+
+    /** 
+     * Checks if Needle Engine networking is connected to a websocket. Note that this is **not equal** to being connected to a *room*. If you want to check if Needle Engine is connected to a networking room use the `isInRoom` property.
+     * @returns true if connected to the websocket. 
+     */
+    public get isConnected(): boolean {
+        return this.connected;
+    }
+
+    /** The name of the room the user is currently connected to */
+    public get currentRoomName(): string | null { return this._currentRoomName; }
+    /** True when connected to a room via a regular url, otherwise (when using a view only url) false indicating that the user should not be able to modify the scene */
+    public get allowEditing(): boolean { return this._currentRoomAllowEditing; }
+    /**
+     * The view id of the room the user is currently connected to.
+     */
+    public get currentRoomViewId(): string | null { return this._currentRoomViewId; }
+    /**
+     * Returns a url that can be shared with others to view the current room in view only mode.  
+     * This is useful for sharing a room with others without allowing them to modify the scene.  
+     * Use `connection.allowEditing` to check if the current room is in view only mode.  
+     */
+    public getViewOnlyUrl() {
+        if (this.currentRoomViewId === null) return null;
+        const url = new URL(window.location.href);
+        url.searchParams.set("view", this.currentRoomViewId);
+        return url.href;
+    }
+
+    /** True if connected to a networked room. Use the joinRoom function or a `SyncedRoom` component */
+    public get isInRoom(): boolean {
+        return this._isInRoom;
+    }
+
+    /** Latency to currently connected backend server */
+    public get currentLatency(): number {
+        return this._currentDelay;
+    }
+
+    /**
+     * The current server url that the networking backend is connected to (e.g. the url of the websocket server)
+     */
+    public get currentServerUrl(): string | null {
+        // @ts-ignore (in ts-websocket 2.x this property is exposed)
+        return this._ws?.url ?? null;
+    }
+
+    /** A ping is sent to the server at a regular interval while the browser tab is active. This method can be used to send additional ping messages when needed so that the user doesn't get disconnected from the networking backend */
+    public sendPing() {
+        this.send("ping", { time: this.context.time.time });
+    }
+
+    /** Returns true if a user with the given connectionId is in the room */
+    public userIsInRoom(id: string): boolean {
+        return this._currentInRoom.indexOf(id) !== -1;
+    }
+
+    private _usersInRoomCopy = [];
+    /** Returns a list of all user ids in the current room */
+    public usersInRoom(target: string[] | null = null): string[] {
+        if (!target) target = this._usersInRoomCopy;
+        target.length = 0;
+        for (const user of this._currentInRoom)
+            target.push(user);
+        return target;
+    }
+
+    /** Joins a networked room. If you don't want to manage a connection yourself you can use a `SyncedRoom` component as well */
+    public joinRoom(room: string, viewOnly: boolean = false): boolean {
+        if (!room) {
+            console.error("Missing room name, can not join: \"" + room + "\"");
+            return false;
+        }
+        // There's not really a reason to limit the room name length
+        if (room.length > 1024) {
+            console.error("Room name too long, can not join: \"" + room + "\". Max length is 1024 characters.");
+            return false;
+        }
+        else if (this.isInRoom && this.currentRoomName !== room) {
+            console.warn("Needle Engine is already connected to a networking room. Connecting to multiple rooms is not supported");
+        }
+
+        this.connect();
+
+        if (debugNet)
+            console.log("join: " + room);
+        this.send(RoomEvents.Join, { room: room, viewOnly: viewOnly }, SendQueue.OnConnection);
+        return true;
+    }
+
+    /** Use to leave a room that you are currently connected to (use `leaveRoom()` to disconnect from the currently active room but you can also specify a room name) */
+    public leaveRoom(room: string | null = null) {
+        if (!room) room = this.currentRoomName;
+        if (!room) {
+            console.error("Missing room name, can not join: \"" + room + "\"");
+            return false;
+        }
+        this.send(RoomEvents.Leave, { room: room });
+        return true;
+    }
+
+    /** Send a message to the networking backend - it will broadcasted to all connected users in the same room by default */
+    public send<T extends WebsocketSendType>(key: string | OwnershipEvent, data: T | null = null, queue: SendQueue = SendQueue.Queued) {
+
+        //@ts-ignore
+        if (data === null) data = {};
+
+        if (queue === SendQueue.Queued) {
+            this._defaultMessagesBuffer.push({ key: key, value: data });
+            return;
+        }
+
+        // if (!this.connected) return;
+        // if (this.channelId)
+        //     data["__id"] = this.channelId;
+        // else if (this.connectionId)
+        //     data["__id"] = this.connectionId;
+        // this.sendGeckosIo(key, data);
+        return this.sendWithWebsocket(key, data, queue);
+    }
+
+    /** Use to delete state for a given guid on the server */
+    public sendDeleteRemoteState(guid: string) {
+        this.send("delete-state", { guid: guid, dontSave: true });
+        delete this._state[guid];
+    }
+
+    /** Use to delete all state in the currently connected room on the server */
+    public sendDeleteRemoteStateAll() {
+        this.send("delete-all-state");
+        this._state = {};
+    }
+
+    /** Send a binary message to the server (broadcasted to all connected users) */
+    public sendBinary(bin: Uint8Array) {
+        if (debugnetBin) console.log("<< send binary", this.context.time.frame, (bin.length / 1024) + " KB");
+        this._ws?.send(bin);
+    }
+
+    private _defaultMessagesBuffer: Array<{ key: string, value: any }> = [];
+    private _defaultMessagesBufferArray: Array<{ key: string, data: any }> = [];
+    public sendBufferedMessagesNow() {
+        if (!this._ws) return;
+        this._defaultMessagesBufferArray.length = 0;
+        const count = Object.keys(this._defaultMessagesBuffer).length;
+        for (const key in this._defaultMessagesBuffer) {
+            const data = this._defaultMessagesBuffer[key];
+            // if there is only one message to be sent we dont need to send an array
+            if (count <= 1) {
+                this.sendWithWebsocket(data.key, data.value, SendQueue.Immediate);
+                break;
+            }
+            const msg = this.toMessage(data.key, data.value);
+            this._defaultMessagesBufferArray.push(msg);
+        }
+        this._defaultMessagesBuffer.length = 0;
+        if (this._defaultMessagesBufferArray.length > 0 && debugNet)
+            console.log("SEND BUFFERED", this._defaultMessagesBufferArray.length);
+        if (this._defaultMessagesBufferArray.length <= 0) return;
+        const message = JSON.stringify(this._defaultMessagesBufferArray);
+        this._ws?.send(message);
+    }
+
+    /** Use to start listening to networking events.   
+     * To unsubscribe from events use the `stopListen` method.   
+     * See the example below for typical usage:
+     * 
+     * ### Component Example
+     * ```ts
+     * // Make sure to unsubscribe from events when the component is disabled
+     * export class MyComponent extends Behaviour {
+     *   onEnable() {
+     *     this.connection.beginListen("joined-room", this.onJoinedRoom)
+     *   }
+     *   onDisable() {
+     *     this.connection.stopListen("joined-room", this.onJoinedRoom)
+     *   }
+     *   onJoinedRoom = () => {
+     *      console.log("I joined a networked room")
+     *   }
+     * }
+     * ```
+     * @link https://engine.needle.tools/docs/networking.html
+     * 
+    */
+    public beginListen(key: (string & {}) | OwnershipEvent | OwnershipEventNamesIncoming | RoomEventsIncoming | RoomEvents, callback: Function): Function {
+        if (!this._listeners[key])
+            this._listeners[key] = [];
+        this._listeners[key].push(callback);
+        return callback;
+    }
+
+    /**@deprecated please use stopListen instead (2.65.2-pre) */
+    public stopListening(key: (string & {}) | OwnershipEvent | OwnershipEventNamesIncoming | RoomEventsIncoming | RoomEvents, callback: Function | null) { return this.stopListen(key, callback); }
+
+    /** Use to stop listening to networking events  
+     * To subscribe to events use the `beginListen` method.   
+     * See the example below for typical usage:
+     * 
+     * ### Component Example
+     * ```ts
+     * // Make sure to unsubscribe from events when the component is disabled
+     * export class MyComponent extends Behaviour {
+     *   onEnable() {
+     *     this.connection.beginListen("joined-room", this.onJoinedRoom)
+     *   }
+     *   onDisable() {
+     *     this.connection.stopListen("joined-room", this.onJoinedRoom)
+     *   }
+     *   onJoinedRoom = () => {
+     *      console.log("I joined a networked room")
+     *   }
+     * }
+     * ```
+     */
+    public stopListen(key: (string & {}) | OwnershipEvent | OwnershipEventNamesIncoming | RoomEventsIncoming | RoomEvents, callback: Function | null) {
+        if (!callback) return;
+        if (!this._listeners[key]) return;
+        const index = this._listeners[key].indexOf(callback);
+        if (index >= 0) {
+            this._listeners[key].splice(index, 1);
+        }
+    }
+
+    /** Use to start listening to networking binary events */
+    public beginListenBinary(identifier: string, callback: BinaryCallback): BinaryCallback {
+        if (!this._listenersBinary[identifier])
+            this._listenersBinary[identifier] = [];
+        this._listenersBinary[identifier].push(callback);
+        return callback;
+    }
+
+    /** Use to stop listening to networking binary events */
+    public stopListenBinary(identifier: string, callback: any) {
+        if (!this._listenersBinary[identifier]) return;
+        const index = this._listenersBinary[identifier].indexOf(callback);
+        if (index >= 0) {
+            this._listenersBinary[identifier].splice(index, 1);
+        }
+    }
+
+    private netWebSocketUrlProvider?: INetworkingWebsocketUrlProvider;
+
+    /** Use to override the networking server backend url. This is what the `Networking` component uses to modify the backend url */
+    public registerProvider(prov: INetworkingWebsocketUrlProvider) {
+        this.netWebSocketUrlProvider = prov;
+    }
+
+    /** Used to connect to the networking server */
+    public async connect(url?: string) {
+        if (this.connected && url && url !== networkingServerUrl) {
+            return Promise.reject("Can not connect to different server url. Please disconnect first.");
+        }
+        if (this.connected) {
+            return Promise.resolve(true);
+        }
+        if (url)
+            console.debug("Connecting to user provided url " + url);
+        const overrideUrl = url || this.netWebSocketUrlProvider?.getWebsocketUrl();
+        if (overrideUrl) {
+            networkingServerUrl = overrideUrl;
+        }
+        else if (isHostedOnGlitch()) {
+            networkingServerUrl = "wss://" + window.location.host + "/socket";
+        }
+        return this.connectWebsocket();
+    };
+
+    /** Disconnect from the networking backend + reset internal state */
+    public disconnect() {
+        this._ws?.close();
+        this._ws = undefined;
+        networkingServerUrl = undefined;
+
+        // Reset all state
+        this._currentRoomAllowEditing = true;
+        this._currentRoomName = null;
+        this._currentRoomViewId = null;
+        this._isInRoom = false;
+        this._currentInRoom.length = 0;
+        this._state = {};
+        this._currentDelay = -1;
+    }
+
+    private _listeners: { [key: string]: Function[] } = {};
+    private _listenersBinary: { [key: string]: BinaryCallback[] } = {};
+    private connected: boolean = false;
+    private channelId: string | undefined;
+    private _connectionId: string | null = null;
+
+    // Websocket ------------------------------------------------------------
+    private _ws: Websocket | undefined;
+    private _waitingForSocket: { [key: string]: Array<Function> } = {};
+    private _isInRoom: boolean = false;
+    private _currentRoomName: string | null = null;
+    private _currentRoomViewId: string | null = null;
+    private _currentRoomAllowEditing: boolean = true;
+    private _currentInRoom: string[] = [];
+    private _state: { [key: string]: any } = {};
+    private _currentDelay: number = -1;
+
+    private _connectingToWebsocketPromise: Promise<boolean> | null = null;
+
+    private connectWebsocket() {
+        if (this._connectingToWebsocketPromise) return this._connectingToWebsocketPromise;
+        return this._connectingToWebsocketPromise = new Promise(async (res, _) => {
+            let didResolve = false;
+            const resolve = (val: boolean) => {
+                if (didResolve) return;
+                didResolve = true;
+                res(val);
+            }
+            if (networkingServerUrl === undefined) {
+                console.log("Fetch default backend url: " + defaultNetworkingBackendUrlProvider);
+                const failed = false;
+                const defaultUrlResponse = await fetch(defaultNetworkingBackendUrlProvider);
+                networkingServerUrl = await defaultUrlResponse.text();
+                if (failed) return;
+            }
+
+            if (networkingServerUrl === undefined) {
+                resolve(false);
+                return;
+            }
+
+            console.debug("⊡ Connecting to networking backend on\n" + networkingServerUrl)
+            const pkg = await import('websocket-ts');
+            // @ts-ignore
+            const WebsocketBuilder = pkg.default?.WebsocketBuilder ?? pkg.WebsocketBuilder;
+            const ExponentialBackoff = pkg.default?.ExponentialBackoff ?? pkg.ExponentialBackoff;
+            const ws = new WebsocketBuilder(networkingServerUrl)
+                .withMaxRetries(10)
+                .withBackoff(new ExponentialBackoff(2000, 4))
+                .onOpen(() => {
+                    this._connectingToWebsocketPromise = null;
+                    this._ws = ws;
+                    this.connected = true;
+                    if (isDevEnvironment() || debugNet) console.log("⊞ Connected to networking backend\n" + networkingServerUrl);
+                    else console.debug("⊞ Connected to networking backend", networkingServerUrl);
+                    resolve(true);
+                    this.onSendQueued(SendQueue.OnConnection);
+                })
+                .onClose((_evt) => {
+                    this._connectingToWebsocketPromise = null;
+                    this.connected = false;
+                    this._isInRoom = false;
+                    resolve(false);
+                    let msg = "Websocket connection closed...";
+                    if (!networkingServerUrl?.includes("/socket")) msg += ` Do you perhaps mean to connect to \"/socket\"?`;
+                    console.error(msg);
+                })
+                .onError((_e) => {
+                    console.error("⊠ Websocket connection failed...");
+                    resolve(false);
+                })
+                .onRetry(() => { console.log("→ Retry connecting to networking websocket") })
+                .build();
+            ws.addEventListener(pkg.WebsocketEvent.message, (socket, msg) => {
+                this.onMessage(socket, msg);
+            });
+        });
+    }
+
+    private onMessage(_, ev) {
+        const msg = ev.data;
+        try {
+            if (typeof msg !== "string") {
+                if (msg.size) {
+                    // is binary blob
+                    this.handleIncomingBinaryMessage(msg);
+                }
+                return;
+            }
+            const message: WebsocketMessage | Array<WebsocketMessage> = JSON.parse(msg);
+            if (Array.isArray(message)) {
+                // console.log("Receive package of " + message.length + " messages")
+                for (const msg of message) {
+                    this.handleIncomingStringMessage(msg);
+                }
+            }
+            else this.handleIncomingStringMessage(message);
+            return;
+        }
+        catch (err) {
+            if (debugNet && msg === "pong") console.log("<<", msg);
+            else if (isDevEnvironment()) console.error("Failed to parse message", err);
+        }
+    }
+
+    private async handleIncomingBinaryMessage(blob: Blob) {
+        if (debugnetBin) console.log("<< bin", this.context.time.frame);
+        const buf = await blob.arrayBuffer();
+        var data = new Uint8Array(buf);
+        const bb = new flatbuffers.ByteBuffer(data);
+        const id = bb.getBufferIdentifier();
+        const callbacks = this._listenersBinary[id];
+        // use registered cast methods to get the correct type from the flatbuffer
+        const obj = schemes.tryCastBinary(bb);
+        const guid = schemes.tryGetGuid(obj);
+        if (guid && typeof guid === "string") {
+            this._state[guid] = obj;
+        }
+        if (!callbacks) return;
+        const res = obj ?? bb; // fallback to bytebuffer if no cast method is registered
+        // call all listeners subscribed to these events
+        for (const cb of callbacks) {
+            cb(res);
+        }
+    }
+
+    private handleIncomingStringMessage(message: WebsocketMessage) {
+
+        if (debugNet) console.log("<<", message.key ?? message);
+        if (message.key) {
+            switch (message.key) {
+                case ConnectionEvents.ConnectionInfo:
+                    if (message.data) {
+                        const connection = message.data as IConnectionData;
+                        if (connection) {
+                            console.assert(connection.id !== undefined && connection.id !== null && connection.id.length > 0,
+                                "server did not send connection id", connection.id);
+                            console.debug("Your id is: " + connection.id, this.context.alias ?? "");
+                            this._connectionId = connection.id;
+                        }
+                    }
+                    else console.warn("Expected connection id in " + message.key);
+                    break;
+                case RoomEvents.JoinedRoom:
+                    if (debugNet)
+                        console.log(message);
+                    if (message) {
+                        this._isInRoom = true;
+                        const model = message as unknown as JoinedRoomResponse;
+                        this._currentRoomName = model.room;
+                        this._currentRoomViewId = model.viewId;
+                        this._currentRoomAllowEditing = model.allowEditing ?? true;
+
+                        this._currentInRoom.length = 0;
+                        this._currentInRoom.push(...model.inRoom);
+                        if (debugnetBin || isDevEnvironment()) console.debug("Joined Needle Engine Room: " + model.room);
+
+                        const viewUrl = new URL(window.location.href);
+                        if (viewUrl.searchParams.has("room")) {
+                            viewUrl.searchParams.delete("room");
+                        }
+                        viewUrl.searchParams.set("view", this._currentRoomViewId);
+                        console.debug(`Room view id: ${this._currentRoomViewId}\n${viewUrl.href}`);
+                    }
+
+                    this.onSendQueued(SendQueue.OnRoomJoin);
+                    break;
+
+                case RoomEvents.LeftRoom:
+                    const model = message as unknown as LeftRoomResponse;
+                    if (model.room === this.currentRoomName) {
+                        this._isInRoom = false;
+                        this._currentRoomName = null;
+                        this._currentRoomAllowEditing = true;
+                        this._currentInRoom.length = 0;
+                        if (debugnetBin || isDevEnvironment()) console.debug("Left Needle Engine Room: " + model.room);
+                    }
+                    break;
+                case RoomEvents.UserJoinedRoom:
+                    if (message.data) {
+                        const model = message.data as unknown as UserJoinedOrLeftRoomModel;
+                        this._currentInRoom.push(model.userId);
+                        if (debugNet)
+                            console.log(model.userId + " joined", "now in room:", this._currentInRoom);
+                    }
+                    break;
+                case RoomEvents.UserLeftRoom:
+                    if (message.data) {
+                        const model = message.data as unknown as UserJoinedOrLeftRoomModel;
+                        const index = this._currentInRoom.indexOf(model.userId);
+                        if (index >= 0) {
+                            if (debugNet)
+                                console.log(model.userId + " left", "now in room:", this._currentInRoom);
+                            this._currentInRoom.splice(index, 1);
+                        }
+                        if (model.userId === this.connectionId) {
+                            // you left the room
+                            console.log("you left the room");
+                        }
+                    }
+                    break;
+
+                case "all-room-state-deleted":
+                    if (debugNet) console.log("RECEIVED all-room-state-deleted");
+                    this._state = {};
+                    break;
+
+                case "ping":
+                case "pong":
+                    const time = (message as any).data?.time;
+                    if (time) {
+                        this._currentDelay = this.context.time.time - time;
+                    }
+                    if (debugNet)
+                        console.log(`Current latency: ${(this._currentDelay * 1000).toFixed()} ms`, "Clients in room: " + this._currentInRoom?.length);
+                    break;
+            }
+        }
+
+        const model = message.data as IModel;
+        if (model) {
+            this._state[model.guid] = model;
+        }
+
+        let listeners = this._listeners[message.key];
+        if (listeners) {
+            // Copy listeners array in case a listener is removed while iterating
+            listeners = [...listeners];
+            for (const listener of listeners) {
+                try {
+                    listener(message.data);
+                }
+                catch (err) {
+                    console.error("Error invoking callback for \"" + message.key + "\"", err);
+                }
+            }
+        }
+    }
+
+    private toMessage(key: string, data: any) {
+        return {
+            key: key,
+            data: data
+        };
+    }
+
+    private sendWithWebsocket(key: string, data: IModel | object | boolean | string | number, queue: SendQueue = SendQueue.OnRoomJoin) {
+        // console.log(key);
+        if (!this._ws) {
+            const arr = this._waitingForSocket[queue] || [];
+            arr.push(() => this.sendWithWebsocket(key, data, queue));
+            this._waitingForSocket[queue] = arr;
+            // console.log(this._bufferedMessages)
+            return;
+        }
+        const str = JSON.stringify(this.toMessage(key, data));
+        if (debugNet) console.log(">>", key);
+        this._ws.send(str);
+    }
+
+    private onSendQueued(queue: SendQueue) {
+        const queued = this._waitingForSocket[queue];
+        // console.log("send", queue, queued);
+        if (queued) {
+            for (const callback of queued) {
+                callback();
+            }
+            queued.length = 0;
+        }
+    }
+
+
 }