shared-persistent-connection 0.1.0

package/README-zh.md

@@ -0,0 +1,11 @@
+# 共享持久连接
+[中文](./README-zh.md) | [English](./README.md)
+
+解决浏览器多标签页使用同一长连接SSE，占用多个TCP连接（HTTP 1.1）的问题
+
+需要浏览器支持
+- [navigator.locks](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/locks)
+- [BroadcastChannel](https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel)
+
+特色
+- SSE支持多种请求（GET，POST等），自定义头部，错误重试策略

package/README.md

@@ -0,0 +1,8 @@
+# shared-persistent-connection
+[中文](./README-zh.md) | [English](./README.md)
+
+Using the same connection (SSE, WebSocket) for multiple browser tabs solves the problem of multiple connections occupying multiple TCP connections
+
+Features
+- [x] SSE
+- [x] WebSocket

package/dist/index.cjs.js

@@ -0,0 +1,305 @@
+'use strict';
+
+async function getBytes(stream, onChunk) {
+    const reader = stream.getReader();
+    let result;
+    while (!(result = await reader.read()).done) {
+        onChunk(result.value);
+    }
+}
+function getLines(onLine) {
+    let buffer;
+    let position;
+    let fieldLength;
+    let discardTrailingNewline = false;
+    return function onChunk(arr) {
+        if (buffer === undefined) {
+            buffer = arr;
+            position = 0;
+            fieldLength = -1;
+        }
+        else {
+            buffer = concat(buffer, arr);
+        }
+        const bufLength = buffer.length;
+        let lineStart = 0;
+        while (position < bufLength) {
+            if (discardTrailingNewline) {
+                if (buffer[position] === 10) {
+                    lineStart = ++position;
+                }
+                discardTrailingNewline = false;
+            }
+            let lineEnd = -1;
+            for (; position < bufLength && lineEnd === -1; ++position) {
+                switch (buffer[position]) {
+                    case 58:
+                        if (fieldLength === -1) {
+                            fieldLength = position - lineStart;
+                        }
+                        break;
+                    case 13:
+                        discardTrailingNewline = true;
+                    case 10:
+                        lineEnd = position;
+                        break;
+                }
+            }
+            if (lineEnd === -1) {
+                break;
+            }
+            onLine(buffer.subarray(lineStart, lineEnd), fieldLength);
+            lineStart = position;
+            fieldLength = -1;
+        }
+        if (lineStart === bufLength) {
+            buffer = undefined;
+        }
+        else if (lineStart !== 0) {
+            buffer = buffer.subarray(lineStart);
+            position -= lineStart;
+        }
+    };
+}
+function getMessages(onId, onRetry, onMessage) {
+    let message = newMessage();
+    const decoder = new TextDecoder();
+    return function onLine(line, fieldLength) {
+        if (line.length === 0) {
+            onMessage === null || onMessage === void 0 ? void 0 : onMessage(message);
+            message = newMessage();
+        }
+        else if (fieldLength > 0) {
+            const field = decoder.decode(line.subarray(0, fieldLength));
+            const valueOffset = fieldLength + (line[fieldLength + 1] === 32 ? 2 : 1);
+            const value = decoder.decode(line.subarray(valueOffset));
+            switch (field) {
+                case 'data':
+                    message.data = message.data
+                        ? message.data + '\n' + value
+                        : value;
+                    break;
+                case 'event':
+                    message.event = value;
+                    break;
+                case 'id':
+                    onId(message.id = value);
+                    break;
+                case 'retry':
+                    const retry = parseInt(value, 10);
+                    if (!isNaN(retry)) {
+                        onRetry(message.retry = retry);
+                    }
+                    break;
+            }
+        }
+    };
+}
+function concat(a, b) {
+    const res = new Uint8Array(a.length + b.length);
+    res.set(a);
+    res.set(b, a.length);
+    return res;
+}
+function newMessage() {
+    return {
+        data: '',
+        event: '',
+        id: '',
+        retry: undefined,
+    };
+}
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+const EventStreamContentType = 'text/event-stream';
+const DefaultRetryInterval = 1000;
+const LastEventId = 'last-event-id';
+function fetchEventSource(input, _a) {
+    var { signal: inputSignal, headers: inputHeaders, onopen: inputOnOpen, onmessage, onclose, onerror, openWhenHidden, fetch: inputFetch } = _a, rest = __rest(_a, ["signal", "headers", "onopen", "onmessage", "onclose", "onerror", "openWhenHidden", "fetch"]);
+    return new Promise((resolve, reject) => {
+        const headers = Object.assign({}, inputHeaders);
+        if (!headers.accept) {
+            headers.accept = EventStreamContentType;
+        }
+        let curRequestController;
+        function onVisibilityChange() {
+            curRequestController.abort();
+            if (!document.hidden) {
+                create();
+            }
+        }
+        if (!openWhenHidden) {
+            document.addEventListener('visibilitychange', onVisibilityChange);
+        }
+        let retryInterval = DefaultRetryInterval;
+        let retryTimer = 0;
+        function dispose() {
+            document.removeEventListener('visibilitychange', onVisibilityChange);
+            window.clearTimeout(retryTimer);
+            curRequestController.abort();
+        }
+        inputSignal === null || inputSignal === void 0 ? void 0 : inputSignal.addEventListener('abort', () => {
+            dispose();
+            resolve();
+        });
+        const fetch = inputFetch !== null && inputFetch !== void 0 ? inputFetch : window.fetch;
+        const onopen = inputOnOpen !== null && inputOnOpen !== void 0 ? inputOnOpen : defaultOnOpen;
+        async function create() {
+            var _a;
+            curRequestController = new AbortController();
+            try {
+                const response = await fetch(input, Object.assign(Object.assign({}, rest), { headers, signal: curRequestController.signal }));
+                await onopen(response);
+                await getBytes(response.body, getLines(getMessages(id => {
+                    if (id) {
+                        headers[LastEventId] = id;
+                    }
+                    else {
+                        delete headers[LastEventId];
+                    }
+                }, retry => {
+                    retryInterval = retry;
+                }, onmessage)));
+                onclose === null || onclose === void 0 ? void 0 : onclose();
+                dispose();
+                resolve();
+            }
+            catch (err) {
+                if (!curRequestController.signal.aborted) {
+                    try {
+                        const interval = (_a = onerror === null || onerror === void 0 ? void 0 : onerror(err)) !== null && _a !== void 0 ? _a : retryInterval;
+                        window.clearTimeout(retryTimer);
+                        retryTimer = window.setTimeout(create, interval);
+                    }
+                    catch (innerErr) {
+                        dispose();
+                        reject(innerErr);
+                    }
+                }
+            }
+        }
+        create();
+    });
+}
+function defaultOnOpen(response) {
+    const contentType = response.headers.get('content-type');
+    if (!(contentType === null || contentType === void 0 ? void 0 : contentType.startsWith(EventStreamContentType))) {
+        throw new Error(`Expected content-type to be ${EventStreamContentType}, Actual: ${contentType}`);
+    }
+}
+
+function getSelfKey(key, type) {
+    return `shared-persistent-connection:${key}:${type}`;
+}
+var ConnectionState;
+(function (ConnectionState) {
+    ConnectionState["Closed"] = "closed";
+    ConnectionState["Connecting"] = "connecting";
+    ConnectionState["Open"] = "open";
+})(ConnectionState || (ConnectionState = {}));
+const instances = new Map();
+class SharedPersistentConnection {
+    url;
+    config;
+    isLeader = false;
+    releaseLock = null;
+    channel;
+    state;
+    abortController = null;
+    constructor(url, config = {}) {
+        this.url = url;
+        this.config = config;
+        if (!navigator.locks || !window.BroadcastChannel) {
+            throw new Error('SharedPersistentConnection is not supported in this browser');
+        }
+        if (instances.has(url)) {
+            console.warn(`[SharedPersistentConnection] Duplicate connection for url "${url}".
+          Only one instance per page is allowed.
+          Drop the old instance.
+          `);
+            instances.get(url).close();
+        }
+        instances.set(url, this);
+        this.channel = new BroadcastChannel(getSelfKey(this.url, 'channel'));
+        this.channel.onmessage = (ev) => {
+            this.config.onmessage?.(ev.data);
+        };
+        this.state = ConnectionState.Connecting;
+        this.attemptToBeLeader();
+    }
+    abortConnection() {
+        this.abortController && this.abortController.abort();
+    }
+    launch() {
+        if (!this.isLeader || this.isClosed()) {
+            return;
+        }
+        this.abortConnection();
+        this.abortController = new AbortController();
+        try {
+            fetchEventSource(this.url, {
+                ...this.config,
+                signal: this.abortController.signal,
+                onmessage: (event) => {
+                    this.config.onmessage?.(event);
+                    this.channel.postMessage(event);
+                },
+                onopen: (response) => {
+                    this.state = ConnectionState.Open;
+                    if (this.config.onopen) {
+                        return this.config.onopen?.(response);
+                    }
+                    return Promise.resolve();
+                },
+                onclose: () => {
+                    this.config.onclose?.();
+                    this.close();
+                },
+                onerror: (err) => {
+                    this.config.onerror?.(err);
+                }
+            });
+        }
+        catch (e) {
+            this.config.onerror?.(e);
+        }
+    }
+    isClosed() {
+        return this.state === ConnectionState.Closed;
+    }
+    attemptToBeLeader() {
+        const lockKey = getSelfKey(this.url, 'lock');
+        navigator.locks.request(lockKey, async () => {
+            if (this.isClosed()) {
+                return;
+            }
+            this.isLeader = true;
+            this.launch();
+            await new Promise(resolve => {
+                this.releaseLock = resolve;
+            });
+            this.isLeader = false;
+        });
+    }
+    close() {
+        if (this.isClosed()) {
+            return;
+        }
+        this.state = ConnectionState.Closed;
+        this.releaseLock?.();
+        this.abortConnection();
+        this.channel.close();
+    }
+}
+
+module.exports = SharedPersistentConnection;

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import { type FetchEventSourceInit } from "@microsoft/fetch-event-source";
+type FetchEventSourceInitConfig = FetchEventSourceInit & {
+    retryWhenError?: boolean;
+};
+export default class SharedPersistentConnection {
+    readonly url: string;
+    readonly config: FetchEventSourceInitConfig;
+    private isLeader;
+    private releaseLock;
+    private channel;
+    private state;
+    private abortController;
+    constructor(url: string, config?: FetchEventSourceInitConfig);
+    private abortConnection;
+    private launch;
+    private isClosed;
+    private attemptToBeLeader;
+    close(): void;
+}
+export {};

package/dist/index.esm.js

@@ -0,0 +1,303 @@
+async function getBytes(stream, onChunk) {
+    const reader = stream.getReader();
+    let result;
+    while (!(result = await reader.read()).done) {
+        onChunk(result.value);
+    }
+}
+function getLines(onLine) {
+    let buffer;
+    let position;
+    let fieldLength;
+    let discardTrailingNewline = false;
+    return function onChunk(arr) {
+        if (buffer === undefined) {
+            buffer = arr;
+            position = 0;
+            fieldLength = -1;
+        }
+        else {
+            buffer = concat(buffer, arr);
+        }
+        const bufLength = buffer.length;
+        let lineStart = 0;
+        while (position < bufLength) {
+            if (discardTrailingNewline) {
+                if (buffer[position] === 10) {
+                    lineStart = ++position;
+                }
+                discardTrailingNewline = false;
+            }
+            let lineEnd = -1;
+            for (; position < bufLength && lineEnd === -1; ++position) {
+                switch (buffer[position]) {
+                    case 58:
+                        if (fieldLength === -1) {
+                            fieldLength = position - lineStart;
+                        }
+                        break;
+                    case 13:
+                        discardTrailingNewline = true;
+                    case 10:
+                        lineEnd = position;
+                        break;
+                }
+            }
+            if (lineEnd === -1) {
+                break;
+            }
+            onLine(buffer.subarray(lineStart, lineEnd), fieldLength);
+            lineStart = position;
+            fieldLength = -1;
+        }
+        if (lineStart === bufLength) {
+            buffer = undefined;
+        }
+        else if (lineStart !== 0) {
+            buffer = buffer.subarray(lineStart);
+            position -= lineStart;
+        }
+    };
+}
+function getMessages(onId, onRetry, onMessage) {
+    let message = newMessage();
+    const decoder = new TextDecoder();
+    return function onLine(line, fieldLength) {
+        if (line.length === 0) {
+            onMessage === null || onMessage === void 0 ? void 0 : onMessage(message);
+            message = newMessage();
+        }
+        else if (fieldLength > 0) {
+            const field = decoder.decode(line.subarray(0, fieldLength));
+            const valueOffset = fieldLength + (line[fieldLength + 1] === 32 ? 2 : 1);
+            const value = decoder.decode(line.subarray(valueOffset));
+            switch (field) {
+                case 'data':
+                    message.data = message.data
+                        ? message.data + '\n' + value
+                        : value;
+                    break;
+                case 'event':
+                    message.event = value;
+                    break;
+                case 'id':
+                    onId(message.id = value);
+                    break;
+                case 'retry':
+                    const retry = parseInt(value, 10);
+                    if (!isNaN(retry)) {
+                        onRetry(message.retry = retry);
+                    }
+                    break;
+            }
+        }
+    };
+}
+function concat(a, b) {
+    const res = new Uint8Array(a.length + b.length);
+    res.set(a);
+    res.set(b, a.length);
+    return res;
+}
+function newMessage() {
+    return {
+        data: '',
+        event: '',
+        id: '',
+        retry: undefined,
+    };
+}
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+const EventStreamContentType = 'text/event-stream';
+const DefaultRetryInterval = 1000;
+const LastEventId = 'last-event-id';
+function fetchEventSource(input, _a) {
+    var { signal: inputSignal, headers: inputHeaders, onopen: inputOnOpen, onmessage, onclose, onerror, openWhenHidden, fetch: inputFetch } = _a, rest = __rest(_a, ["signal", "headers", "onopen", "onmessage", "onclose", "onerror", "openWhenHidden", "fetch"]);
+    return new Promise((resolve, reject) => {
+        const headers = Object.assign({}, inputHeaders);
+        if (!headers.accept) {
+            headers.accept = EventStreamContentType;
+        }
+        let curRequestController;
+        function onVisibilityChange() {
+            curRequestController.abort();
+            if (!document.hidden) {
+                create();
+            }
+        }
+        if (!openWhenHidden) {
+            document.addEventListener('visibilitychange', onVisibilityChange);
+        }
+        let retryInterval = DefaultRetryInterval;
+        let retryTimer = 0;
+        function dispose() {
+            document.removeEventListener('visibilitychange', onVisibilityChange);
+            window.clearTimeout(retryTimer);
+            curRequestController.abort();
+        }
+        inputSignal === null || inputSignal === void 0 ? void 0 : inputSignal.addEventListener('abort', () => {
+            dispose();
+            resolve();
+        });
+        const fetch = inputFetch !== null && inputFetch !== void 0 ? inputFetch : window.fetch;
+        const onopen = inputOnOpen !== null && inputOnOpen !== void 0 ? inputOnOpen : defaultOnOpen;
+        async function create() {
+            var _a;
+            curRequestController = new AbortController();
+            try {
+                const response = await fetch(input, Object.assign(Object.assign({}, rest), { headers, signal: curRequestController.signal }));
+                await onopen(response);
+                await getBytes(response.body, getLines(getMessages(id => {
+                    if (id) {
+                        headers[LastEventId] = id;
+                    }
+                    else {
+                        delete headers[LastEventId];
+                    }
+                }, retry => {
+                    retryInterval = retry;
+                }, onmessage)));
+                onclose === null || onclose === void 0 ? void 0 : onclose();
+                dispose();
+                resolve();
+            }
+            catch (err) {
+                if (!curRequestController.signal.aborted) {
+                    try {
+                        const interval = (_a = onerror === null || onerror === void 0 ? void 0 : onerror(err)) !== null && _a !== void 0 ? _a : retryInterval;
+                        window.clearTimeout(retryTimer);
+                        retryTimer = window.setTimeout(create, interval);
+                    }
+                    catch (innerErr) {
+                        dispose();
+                        reject(innerErr);
+                    }
+                }
+            }
+        }
+        create();
+    });
+}
+function defaultOnOpen(response) {
+    const contentType = response.headers.get('content-type');
+    if (!(contentType === null || contentType === void 0 ? void 0 : contentType.startsWith(EventStreamContentType))) {
+        throw new Error(`Expected content-type to be ${EventStreamContentType}, Actual: ${contentType}`);
+    }
+}
+
+function getSelfKey(key, type) {
+    return `shared-persistent-connection:${key}:${type}`;
+}
+var ConnectionState;
+(function (ConnectionState) {
+    ConnectionState["Closed"] = "closed";
+    ConnectionState["Connecting"] = "connecting";
+    ConnectionState["Open"] = "open";
+})(ConnectionState || (ConnectionState = {}));
+const instances = new Map();
+class SharedPersistentConnection {
+    url;
+    config;
+    isLeader = false;
+    releaseLock = null;
+    channel;
+    state;
+    abortController = null;
+    constructor(url, config = {}) {
+        this.url = url;
+        this.config = config;
+        if (!navigator.locks || !window.BroadcastChannel) {
+            throw new Error('SharedPersistentConnection is not supported in this browser');
+        }
+        if (instances.has(url)) {
+            console.warn(`[SharedPersistentConnection] Duplicate connection for url "${url}".
+          Only one instance per page is allowed.
+          Drop the old instance.
+          `);
+            instances.get(url).close();
+        }
+        instances.set(url, this);
+        this.channel = new BroadcastChannel(getSelfKey(this.url, 'channel'));
+        this.channel.onmessage = (ev) => {
+            this.config.onmessage?.(ev.data);
+        };
+        this.state = ConnectionState.Connecting;
+        this.attemptToBeLeader();
+    }
+    abortConnection() {
+        this.abortController && this.abortController.abort();
+    }
+    launch() {
+        if (!this.isLeader || this.isClosed()) {
+            return;
+        }
+        this.abortConnection();
+        this.abortController = new AbortController();
+        try {
+            fetchEventSource(this.url, {
+                ...this.config,
+                signal: this.abortController.signal,
+                onmessage: (event) => {
+                    this.config.onmessage?.(event);
+                    this.channel.postMessage(event);
+                },
+                onopen: (response) => {
+                    this.state = ConnectionState.Open;
+                    if (this.config.onopen) {
+                        return this.config.onopen?.(response);
+                    }
+                    return Promise.resolve();
+                },
+                onclose: () => {
+                    this.config.onclose?.();
+                    this.close();
+                },
+                onerror: (err) => {
+                    this.config.onerror?.(err);
+                }
+            });
+        }
+        catch (e) {
+            this.config.onerror?.(e);
+        }
+    }
+    isClosed() {
+        return this.state === ConnectionState.Closed;
+    }
+    attemptToBeLeader() {
+        const lockKey = getSelfKey(this.url, 'lock');
+        navigator.locks.request(lockKey, async () => {
+            if (this.isClosed()) {
+                return;
+            }
+            this.isLeader = true;
+            this.launch();
+            await new Promise(resolve => {
+                this.releaseLock = resolve;
+            });
+            this.isLeader = false;
+        });
+    }
+    close() {
+        if (this.isClosed()) {
+            return;
+        }
+        this.state = ConnectionState.Closed;
+        this.releaseLock?.();
+        this.abortConnection();
+        this.channel.close();
+    }
+}
+
+export { SharedPersistentConnection as default };

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "shared-persistent-connection",
+  "author": "Monkey-D-sj",
+  "license": "ISC",
+  "version": "0.1.0",
+  "main": "./dist/index.js",
+  "description": "multi browser tabs use one sse connection",
+  "repository": "https://github.com/Monkey-D-sj/shared-persistent-connection",
+  "type": "module",
+  "scripts": {
+    "build": "rimraf dist && rollup -c rollup.config.ts",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "share persistent connection",
+    "sse"
+  ],
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "README-zh.md"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "packageManager": "pnpm@10.28.0",
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "rimraf": "^6.1.2",
+    "rollup": "^4.55.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "@microsoft/fetch-event-source": "^2.0.1"
+  },
+  "volta": {
+    "node": "25.3.0"
+  }
+}