react-websocket 3.3.0 → 3.6.0

package/dist/core.cjs

@@ -349,13 +349,18 @@ function createClient(url, options = {}) {
 		set({ lastMessage: message });
 		emit("message", message, event);
 	}
-	function send(message, sendOptions) {
+	function send(message, sendOptions = {}) {
 		const data = options.serialize ? options.serialize(message) : options.json ? JSON.stringify(message) : message;
+		const { key, priority, maxBuffered } = sendOptions;
 		if (ws && ws.readyState === OPEN) {
+			if (maxBuffered !== void 0 && ws.bufferedAmount > maxBuffered) {
+				log("dropped message: send buffer above maxBuffered");
+				return false;
+			}
 			ws.send(data);
 			return true;
 		}
-		if (queueLimit === 0 || sendOptions?.volatile) {
+		if (queueLimit === 0 || sendOptions.volatile) {
 			log("dropped message: socket is not open");
 			return false;
 		}
@@ -363,19 +368,23 @@ function createClient(url, options = {}) {
 			log("dropped message: no WebSocket implementation available");
 			return false;
 		}
-		const key = sendOptions?.key;
 		if (key !== void 0) pending = pending.filter((entry) => {
 			if (entry.key !== key) return true;
 			dropped(entry);
 			return false;
 		});
-		pending.push({
+		let head = pending.findIndex((entry) => !entry.priority);
+		if (head < 0) head = pending.length;
+		const entry = {
 			data,
 			key,
-			onDrop: sendOptions?.onDrop
-		});
+			priority,
+			onDrop: sendOptions.onDrop
+		};
+		if (priority) pending.splice(head++, 0, entry);
+		else pending.push(entry);
 		if (pending.length > queueLimit) {
-			dropped(pending.shift());
+			dropped(pending.splice(head < pending.length ? head : 0, 1)[0]);
 			log(`dropped oldest queued message: queue limit (${queueLimit}) reached`);
 		}
 		return false;
@@ -651,6 +660,8 @@ function createWebSocketLatency(client, options) {
 //#endregion
 //#region src/requests.ts
 const lastIds = /* @__PURE__ */ new WeakMap();
+const VOLATILE$2 = { volatile: true };
+const noop = () => {};
 /**
 * Send requests and await their replies, matched by an id the library generates.
 *
@@ -671,8 +682,8 @@ const lastIds = /* @__PURE__ */ new WeakMap();
 */
 function createWebSocketRequests(client, options) {
 	const waiting = /* @__PURE__ */ new Map();
-	function rejectWhere(test, reason) {
-		for (const entry of [...waiting.values()]) if (test(entry)) entry.reject(reason());
+	function endWhere(test, reason, cancel) {
+		for (const entry of [...waiting.values()]) if (test(entry)) entry.end(true, reason(), cancel);
 	}
 	const offs = [
 		client.on("message", (message) => {
@@ -680,83 +691,137 @@ function createWebSocketRequests(client, options) {
 			const entry = id == null ? void 0 : waiting.get(String(id));
 			if (!entry) return;
 			const error = options.error?.(message);
-			if (error === void 0) entry.resolve(message);
-			else entry.reject(error);
+			if (error === void 0) entry.receive(message);
+			else entry.end(true, error);
 		}),
 		client.on("open", () => {
 			for (const entry of waiting.values()) entry.socket ??= client.socket;
 		}),
 		client.subscribe(() => {
 			const { status } = client.getSnapshot();
-			if (status === "closed" || status === "idle") rejectWhere(() => true, () => /* @__PURE__ */ new Error("WebSocket was closed before the request was answered"));
-			else rejectWhere((entry) => entry.socket !== null && entry.socket !== client.socket, () => /* @__PURE__ */ new Error("WebSocket connection was lost before the request was answered"));
+			if (status === "closed" || status === "idle") endWhere(() => true, () => /* @__PURE__ */ new Error("WebSocket was closed before the request was answered"));
+			else endWhere((entry) => entry.socket !== null && entry.socket !== client.socket, () => /* @__PURE__ */ new Error("WebSocket connection was lost before the request was answered"));
 		})
 	];
+	/**
+	* Send `message` as a new request. `next` gets each reply that isn't an error and returns
+	* whether it was the last; `done` runs once, when the request ends. Returns a function that
+	* ends it from this side and tells the server.
+	*/
+	function start(message, requestOptions, next, done) {
+		const { signal, priority } = requestOptions;
+		if (signal?.aborted) {
+			done(true, signal.reason);
+			return noop;
+		}
+		const id = (lastIds.get(client) ?? 0) + 1;
+		lastIds.set(client, id);
+		const key = String(id);
+		const timeout = requestOptions.timeout ?? options.timeout ?? 1e4;
+		const release = client.acquire();
+		let timer;
+		const onAbort = () => entry.end(true, signal.reason, true);
+		function arm() {
+			clearTimeout(timer);
+			if (timeout > 0 && timeout < Infinity) timer = setTimeout(() => entry.end(true, new DOMException(`Request ${id} timed out after ${timeout}ms`, "TimeoutError"), true), timeout);
+		}
+		const entry = {
+			socket: null,
+			receive(reply) {
+				if (next(reply)) entry.end(false);
+				else arm();
+			},
+			end(failed, reason, cancel) {
+				if (!waiting.delete(key)) return;
+				clearTimeout(timer);
+				signal?.removeEventListener("abort", onAbort);
+				release();
+				done(failed, reason);
+				if (cancel && options.cancel) try {
+					client.send(options.cancel(id), entry.socket ? VOLATILE$2 : { priority });
+				} catch (error) {
+					queueMicrotask(() => {
+						throw error;
+					});
+				}
+			}
+		};
+		waiting.set(key, entry);
+		signal?.addEventListener("abort", onAbort, { once: true });
+		arm();
+		const { status } = client.getSnapshot();
+		if (status === "closed" || status === "idle") entry.end(true, /* @__PURE__ */ new Error(`WebSocket is ${status}: request not sent`));
+		else try {
+			if (client.send(options.send(message, id), {
+				...requestOptions,
+				onDrop() {
+					entry.end(true, /* @__PURE__ */ new Error("Request was dropped from the send queue before it was sent"));
+					requestOptions.onDrop?.();
+				}
+			})) entry.socket = client.socket;
+			else if (client.socket?.readyState === 1) entry.end(true, /* @__PURE__ */ new Error("WebSocket send buffer is full: request dropped"));
+			else if (requestOptions.volatile) entry.end(true, /* @__PURE__ */ new Error("WebSocket is not open: request dropped"));
+		} catch (error) {
+			entry.end(true, error);
+		}
+		return () => entry.end(false, void 0, true);
+	}
 	return {
 		client,
 		request(message, requestOptions = {}) {
-			const { signal } = requestOptions;
-			if (signal?.aborted) return Promise.reject(signal.reason);
-			const id = (lastIds.get(client) ?? 0) + 1;
-			lastIds.set(client, id);
-			const key = String(id);
-			const timeout = requestOptions.timeout ?? options.timeout ?? 1e4;
 			return new Promise((resolve, reject) => {
-				let timer;
-				const release = client.acquire();
-				const onAbort = () => entry.reject(signal.reason);
-				function settle() {
-					waiting.delete(key);
-					clearTimeout(timer);
-					signal?.removeEventListener("abort", onAbort);
-					release();
-				}
-				const entry = {
-					socket: null,
-					resolve(reply) {
-						settle();
-						resolve(reply);
-					},
-					reject(reason) {
-						settle();
-						reject(reason);
-					}
-				};
-				waiting.set(key, entry);
-				signal?.addEventListener("abort", onAbort, { once: true });
-				if (timeout > 0 && timeout < Infinity) timer = setTimeout(() => entry.reject(new DOMException(`Request ${id} timed out after ${timeout}ms`, "TimeoutError")), timeout);
-				const { status } = client.getSnapshot();
-				if (status === "closed" || status === "idle") {
-					entry.reject(/* @__PURE__ */ new Error(`WebSocket is ${status}: request not sent`));
-					return;
-				}
-				let sent;
+				start(message, requestOptions, (reply) => {
+					resolve(reply);
+					return true;
+				}, (failed, reason) => {
+					if (failed) reject(reason);
+				});
+			});
+		},
+		stream(message, requestOptions = {}) {
+			const last = options.done;
+			if (!last) throw new TypeError("stream() needs the `done` option");
+			const replies = [];
+			let ended;
+			let wake = noop;
+			const stop = start(message, requestOptions, (reply) => {
+				replies.push(reply);
+				wake();
+				return last(reply);
+			}, (failed, reason) => {
+				if (requestOptions.signal?.aborted) replies.length = 0;
+				ended = [failed, reason];
+				wake();
+			});
+			async function* read() {
 				try {
-					sent = client.send(options.send(message, id), {
-						...requestOptions,
-						onDrop() {
-							entry.reject(/* @__PURE__ */ new Error("Request was dropped from the send queue before it was sent"));
-							requestOptions.onDrop?.();
-						}
-					});
-				} catch (error) {
-					entry.reject(error);
-					return;
+					for (;;) if (replies.length) yield replies.shift();
+					else if (ended) {
+						if (ended[0]) throw ended[1];
+						return;
+					} else await new Promise((resolve) => wake = resolve);
+				} finally {
+					stop();
 				}
-				if (sent) entry.socket = client.socket;
-				else if (requestOptions.volatile) entry.reject(/* @__PURE__ */ new Error("WebSocket is not open: request dropped"));
-			});
+			}
+			const iterator = read();
+			const close = iterator.return;
+			iterator.return = (value) => {
+				stop();
+				return close.call(iterator, value);
+			};
+			return iterator;
 		},
 		pending: () => waiting.size,
 		dispose() {
 			offs.forEach((off) => off());
-			rejectWhere(() => true, () => /* @__PURE__ */ new Error("Requests were disposed"));
+			endWhere(() => true, () => /* @__PURE__ */ new Error("Requests were disposed"), true);
 		}
 	};
 }
 //#endregion
 //#region src/responder.ts
-const VOLATILE = { volatile: true };
+const VOLATILE$1 = { volatile: true };
 const abortError = (message) => new DOMException(message, "AbortError");
 /**
 * Answer requests the server sends: run a handler for tools that only exist in the browser
@@ -797,9 +862,9 @@ function createWebSocketResponder(client, options) {
 	/** Send a reply, or an `error` reply if building or encoding it throws. */
 	function reply(id, build) {
 		try {
-			return client.send(build(), VOLATILE);
+			return client.send(build(), VOLATILE$1);
 		} catch (error) {
-			return client.send(options.error(id, error), VOLATILE);
+			return client.send(options.error(id, error), VOLATILE$1);
 		}
 	}
 	function receive(incoming) {
@@ -898,6 +963,123 @@ function createWebSocketResponder(client, options) {
 	};
 }
 //#endregion
+//#region src/sendrate.ts
+const VOLATILE = { volatile: true };
+/**
+* Send high-rate state, such as aim, cursor or position, at a rate that adapts to the
+* connection. Messages are coalesced per key between ticks. The rate drops by half when the
+* send buffer fills up or the round trip grows, and climbs back one tick per second at a time
+* when the link keeps up, so players on a poor connection degrade smoothly instead of building
+* up lag.
+*
+* Ticks run only while the socket is open and something is waiting. Messages waiting during a
+* reconnect go out after it; `close()` drops them. It doesn't open the connection by itself.
+*
+* @example
+* ```ts
+* export const stream = createWebSocketSendRate(game, { latency, maxRate: 30 });
+*
+* // On every pointer move: at most 30 a second, fewer on a congested link.
+* stream.send({ type: 'aim', angle }, 'aim');
+* ```
+*/
+function createWebSocketSendRate(client, options = {}) {
+	const { maxBuffered = 1024, latency, maxRttIncrease = 100 } = options;
+	const maxRate = options.maxRate ?? 30;
+	const minRate = Math.min(options.minRate ?? 5, maxRate);
+	const listeners = /* @__PURE__ */ new Set();
+	const pending = /* @__PURE__ */ new Map();
+	let rate = maxRate;
+	let snapshot = {
+		rate: maxRate,
+		congested: false
+	};
+	let last = -Infinity;
+	let best = Infinity;
+	let slow = false;
+	let measured;
+	let timer;
+	let disposed = false;
+	function flush() {
+		for (const [key, message] of pending) {
+			if (!client.send(message, VOLATILE)) return;
+			pending.delete(key);
+		}
+	}
+	function publish(congested) {
+		const rounded = Math.round(rate);
+		if (rounded === snapshot.rate && congested === snapshot.congested) return;
+		snapshot = {
+			rate: rounded,
+			congested
+		};
+		for (const listener of [...listeners]) listener();
+	}
+	function schedule() {
+		if (disposed || timer !== void 0 || !pending.size || client.getSnapshot().status !== "open") return;
+		timer = setTimeout(tick, Math.max(0, last + 1e3 / rate - performance.now()));
+	}
+	function stop() {
+		clearTimeout(timer);
+		timer = void 0;
+	}
+	function tick() {
+		timer = void 0;
+		last = performance.now();
+		const measurement = latency?.getSnapshot();
+		if (measurement !== measured) {
+			measured = measurement;
+			const rtt = measurement?.rtt;
+			if (rtt !== void 0) {
+				best = Math.min(best, rtt);
+				slow = rtt - best > maxRttIncrease;
+				if (slow) rate /= 2;
+			}
+		}
+		const full = (client.socket?.bufferedAmount ?? 0) > maxBuffered;
+		if (full) rate /= 2;
+		else {
+			flush();
+			if (!slow) rate++;
+		}
+		rate = Math.min(maxRate, Math.max(minRate, rate));
+		publish(full || slow);
+		schedule();
+	}
+	const offs = [client.on("open", () => {
+		best = Infinity;
+		slow = false;
+		measured = latency?.getSnapshot();
+		schedule();
+	}), client.subscribe(() => {
+		const { status } = client.getSnapshot();
+		if (status !== "open") stop();
+		if (status === "closed" || status === "idle") pending.clear();
+	})];
+	return {
+		client,
+		send(message, key) {
+			pending.delete(key);
+			pending.set(key, message);
+			schedule();
+		},
+		flush,
+		getSnapshot: () => snapshot,
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		dispose() {
+			disposed = true;
+			stop();
+			pending.clear();
+			offs.forEach((off) => off());
+		}
+	};
+}
+//#endregion
 //#region src/state.ts
 /**
 * Keep state derived from a client's messages, like a reducer that runs on every message.
@@ -918,14 +1100,30 @@ function createWebSocketResponder(client, options) {
 * ```
 */
 function createWebSocketState(client, options) {
-	const { initialState, reduce } = options;
+	const { initialState, reduce, batch } = options;
 	let state = initialState;
+	let notified = state;
+	let frame = false;
 	const listeners = /* @__PURE__ */ new Set();
-	function setState(update) {
-		const next = typeof update === "function" ? update(state) : update;
+	function notify() {
+		if (Object.is(state, notified)) return;
+		notified = state;
+		for (const listener of [...listeners]) listener();
+	}
+	function flush() {
+		frame = false;
+		notify();
+	}
+	function update(change, later) {
+		const next = typeof change === "function" ? change(state) : change;
 		if (Object.is(next, state)) return;
 		state = next;
-		for (const listener of [...listeners]) listener();
+		if (!later) notify();
+		else if (!frame) {
+			frame = true;
+			if (typeof requestAnimationFrame === "function") requestAnimationFrame(flush);
+			else setTimeout(flush, 16);
+		}
 	}
 	return {
 		client,
@@ -937,9 +1135,9 @@ function createWebSocketState(client, options) {
 				listeners.delete(listener);
 			};
 		},
-		setState,
-		reset: () => setState(initialState),
-		dispose: client.on("message", (message) => setState((current) => reduce(current, message)))
+		setState: (change) => update(change),
+		reset: () => update(initialState),
+		dispose: client.on("message", (message) => update((current) => reduce(current, message), batch === "frame"))
 	};
 }
 //#endregion
@@ -1031,6 +1229,7 @@ exports.createWebSocket = createWebSocket;
 exports.createWebSocketLatency = createWebSocketLatency;
 exports.createWebSocketRequests = createWebSocketRequests;
 exports.createWebSocketResponder = createWebSocketResponder;
+exports.createWebSocketSendRate = createWebSocketSendRate;
 exports.createWebSocketState = createWebSocketState;
 exports.createWebSocketTopics = createWebSocketTopics;