import { WebSocket } from 'isows'; import { CHANNEL_EVENTS, CONNECTION_STATE, DEFAULT_VERSION, DEFAULT_TIMEOUT, SOCKET_STATES, TRANSPORTS, VSN, WS_CLOSE_NORMAL, } from './lib/constants'; import Serializer from './lib/serializer'; import Timer from './lib/timer'; import { httpEndpointURL } from './lib/transformers'; import RealtimeChannel from './RealtimeChannel'; const noop = () => { }; const WORKER_SCRIPT = ` addEventListener("message", (e) => { if (e.data.event === "start") { setInterval(() => postMessage({ event: "keepAlive" }), e.data.interval); } });`; export default class RealtimeClient { /** * Initializes the Socket. * * @param endPoint The string WebSocket endpoint, ie, "ws://example.com/socket", "wss://example.com", "/socket" (inherited host & protocol) * @param httpEndpoint The string HTTP endpoint, ie, "https://example.com", "/" (inherited host & protocol) * @param options.transport The Websocket Transport, for example WebSocket. This can be a custom implementation * @param options.timeout The default timeout in milliseconds to trigger push timeouts. * @param options.params The optional params to pass when connecting. * @param options.headers Deprecated: headers cannot be set on websocket connections and this option will be removed in the future. * @param options.heartbeatIntervalMs The millisec interval to send a heartbeat message. * @param options.logger The optional function for specialized logging, ie: logger: (kind, msg, data) => { console.log(`${kind}: ${msg}`, data) } * @param options.logLevel Sets the log level for Realtime * @param options.encode The function to encode outgoing messages. Defaults to JSON: (payload, callback) => callback(JSON.stringify(payload)) * @param options.decode The function to decode incoming messages. Defaults to Serializer's decode. * @param options.reconnectAfterMs he optional function that returns the millsec reconnect interval. Defaults to stepped backoff off. * @param options.worker Use Web Worker to set a side flow. Defaults to false. * @param options.workerUrl The URL of the worker script. Defaults to https://realtime.supabase.com/worker.js that includes a heartbeat event call to keep the connection alive. */ constructor(endPoint, options) { var _a; this.accessTokenValue = null; this.apiKey = null; this.channels = new Array(); this.endPoint = ''; this.httpEndpoint = ''; /** @deprecated headers cannot be set on websocket connections */ this.headers = {}; this.params = {}; this.timeout = DEFAULT_TIMEOUT; this.heartbeatIntervalMs = 25000; this.heartbeatTimer = undefined; this.pendingHeartbeatRef = null; this.heartbeatCallback = noop; this.ref = 0; this.logger = noop; this.conn = null; this.sendBuffer = []; this.serializer = new Serializer(); this.stateChangeCallbacks = { open: [], close: [], error: [], message: [], }; this.accessToken = null; /** * Use either custom fetch, if provided, or default fetch to make HTTP requests * * @internal */ this._resolveFetch = (customFetch) => { let _fetch; if (customFetch) { _fetch = customFetch; } else if (typeof fetch === 'undefined') { _fetch = (...args) => import('@supabase/node-fetch').then(({ default: fetch }) => fetch(...args)); } else { _fetch = fetch; } return (...args) => _fetch(...args); }; this.endPoint = `${endPoint}/${TRANSPORTS.websocket}`; this.httpEndpoint = httpEndpointURL(endPoint); if (options === null || options === void 0 ? void 0 : options.transport) { this.transport = options.transport; } else { this.transport = null; } if (options === null || options === void 0 ? void 0 : options.params) this.params = options.params; if (options === null || options === void 0 ? void 0 : options.timeout) this.timeout = options.timeout; if (options === null || options === void 0 ? void 0 : options.logger) this.logger = options.logger; if ((options === null || options === void 0 ? void 0 : options.logLevel) || (options === null || options === void 0 ? void 0 : options.log_level)) { this.logLevel = options.logLevel || options.log_level; this.params = Object.assign(Object.assign({}, this.params), { log_level: this.logLevel }); } if (options === null || options === void 0 ? void 0 : options.heartbeatIntervalMs) this.heartbeatIntervalMs = options.heartbeatIntervalMs; const accessTokenValue = (_a = options === null || options === void 0 ? void 0 : options.params) === null || _a === void 0 ? void 0 : _a.apikey; if (accessTokenValue) { this.accessTokenValue = accessTokenValue; this.apiKey = accessTokenValue; } this.reconnectAfterMs = (options === null || options === void 0 ? void 0 : options.reconnectAfterMs) ? options.reconnectAfterMs : (tries) => { return [1000, 2000, 5000, 10000][tries - 1] || 10000; }; this.encode = (options === null || options === void 0 ? void 0 : options.encode) ? options.encode : (payload, callback) => { return callback(JSON.stringify(payload)); }; this.decode = (options === null || options === void 0 ? void 0 : options.decode) ? options.decode : this.serializer.decode.bind(this.serializer); this.reconnectTimer = new Timer(async () => { this.disconnect(); this.connect(); }, this.reconnectAfterMs); this.fetch = this._resolveFetch(options === null || options === void 0 ? void 0 : options.fetch); if (options === null || options === void 0 ? void 0 : options.worker) { if (typeof window !== 'undefined' && !window.Worker) { throw new Error('Web Worker is not supported'); } this.worker = (options === null || options === void 0 ? void 0 : options.worker) || false; this.workerUrl = options === null || options === void 0 ? void 0 : options.workerUrl; } this.accessToken = (options === null || options === void 0 ? void 0 : options.accessToken) || null; } /** * Connects the socket, unless already connected. */ connect() { if (this.conn) { return; } if (!this.transport) { this.transport = WebSocket; } if (!this.transport) { throw new Error('No transport provided'); } this.conn = new this.transport(this.endpointURL()); this.setupConnection(); } /** * Returns the URL of the websocket. * @returns string The URL of the websocket. */ endpointURL() { return this._appendParams(this.endPoint, Object.assign({}, this.params, { vsn: VSN })); } /** * Disconnects the socket. * * @param code A numeric status code to send on disconnect. * @param reason A custom reason for the disconnect. */ disconnect(code, reason) { if (this.conn) { this.conn.onclose = function () { }; // noop if (code) { this.conn.close(code, reason !== null && reason !== void 0 ? reason : ''); } else { this.conn.close(); } this.conn = null; // remove open handles this.heartbeatTimer && clearInterval(this.heartbeatTimer); this.reconnectTimer.reset(); this.channels.forEach((channel) => channel.teardown()); } } /** * Returns all created channels */ getChannels() { return this.channels; } /** * Unsubscribes and removes a single channel * @param channel A RealtimeChannel instance */ async removeChannel(channel) { const status = await channel.unsubscribe(); if (this.channels.length === 0) { this.disconnect(); } return status; } /** * Unsubscribes and removes all channels */ async removeAllChannels() { const values_1 = await Promise.all(this.channels.map((channel) => channel.unsubscribe())); this.channels = []; this.disconnect(); return values_1; } /** * Logs the message. * * For customized logging, `this.logger` can be overridden. */ log(kind, msg, data) { this.logger(kind, msg, data); } /** * Returns the current state of the socket. */ connectionState() { switch (this.conn && this.conn.readyState) { case SOCKET_STATES.connecting: return CONNECTION_STATE.Connecting; case SOCKET_STATES.open: return CONNECTION_STATE.Open; case SOCKET_STATES.closing: return CONNECTION_STATE.Closing; default: return CONNECTION_STATE.Closed; } } /** * Returns `true` is the connection is open. */ isConnected() { return this.connectionState() === CONNECTION_STATE.Open; } channel(topic, params = { config: {} }) { const realtimeTopic = `realtime:${topic}`; const exists = this.getChannels().find((c) => c.topic === realtimeTopic); if (!exists) { const chan = new RealtimeChannel(`realtime:${topic}`, params, this); this.channels.push(chan); return chan; } else { return exists; } } /** * Push out a message if the socket is connected. * * If the socket is not connected, the message gets enqueued within a local buffer, and sent out when a connection is next established. */ push(data) { const { topic, event, payload, ref } = data; const callback = () => { this.encode(data, (result) => { var _a; (_a = this.conn) === null || _a === void 0 ? void 0 : _a.send(result); }); }; this.log('push', `${topic} ${event} (${ref})`, payload); if (this.isConnected()) { callback(); } else { this.sendBuffer.push(callback); } } /** * Sets the JWT access token used for channel subscription authorization and Realtime RLS. * * If param is null it will use the `accessToken` callback function or the token set on the client. * * On callback used, it will set the value of the token internal to the client. * * @param token A JWT string to override the token set on the client. */ async setAuth(token = null) { let tokenToSend = token || (this.accessToken && (await this.accessToken())) || this.accessTokenValue; if (this.accessTokenValue != tokenToSend) { this.accessTokenValue = tokenToSend; this.channels.forEach((channel) => { const payload = { access_token: tokenToSend, version: DEFAULT_VERSION, }; tokenToSend && channel.updateJoinPayload(payload); if (channel.joinedOnce && channel._isJoined()) { channel._push(CHANNEL_EVENTS.access_token, { access_token: tokenToSend, }); } }); } } /** * Sends a heartbeat message if the socket is connected. */ async sendHeartbeat() { var _a; if (!this.isConnected()) { this.heartbeatCallback('disconnected'); return; } if (this.pendingHeartbeatRef) { this.pendingHeartbeatRef = null; this.log('transport', 'heartbeat timeout. Attempting to re-establish connection'); this.heartbeatCallback('timeout'); (_a = this.conn) === null || _a === void 0 ? void 0 : _a.close(WS_CLOSE_NORMAL, 'hearbeat timeout'); return; } this.pendingHeartbeatRef = this._makeRef(); this.push({ topic: 'phoenix', event: 'heartbeat', payload: {}, ref: this.pendingHeartbeatRef, }); this.heartbeatCallback('sent'); await this.setAuth(); } onHeartbeat(callback) { this.heartbeatCallback = callback; } /** * Flushes send buffer */ flushSendBuffer() { if (this.isConnected() && this.sendBuffer.length > 0) { this.sendBuffer.forEach((callback) => callback()); this.sendBuffer = []; } } /** * Return the next message ref, accounting for overflows * * @internal */ _makeRef() { let newRef = this.ref + 1; if (newRef === this.ref) { this.ref = 0; } else { this.ref = newRef; } return this.ref.toString(); } /** * Unsubscribe from channels with the specified topic. * * @internal */ _leaveOpenTopic(topic) { let dupChannel = this.channels.find((c) => c.topic === topic && (c._isJoined() || c._isJoining())); if (dupChannel) { this.log('transport', `leaving duplicate topic "${topic}"`); dupChannel.unsubscribe(); } } /** * Removes a subscription from the socket. * * @param channel An open subscription. * * @internal */ _remove(channel) { this.channels = this.channels.filter((c) => c.topic !== channel.topic); } /** * Sets up connection handlers. * * @internal */ setupConnection() { if (this.conn) { this.conn.binaryType = 'arraybuffer'; this.conn.onopen = () => this._onConnOpen(); this.conn.onerror = (error) => this._onConnError(error); this.conn.onmessage = (event) => this._onConnMessage(event); this.conn.onclose = (event) => this._onConnClose(event); } } /** @internal */ _onConnMessage(rawMessage) { this.decode(rawMessage.data, (msg) => { let { topic, event, payload, ref } = msg; if (topic === 'phoenix' && event === 'phx_reply') { this.heartbeatCallback(msg.payload.status == 'ok' ? 'ok' : 'error'); } if (ref && ref === this.pendingHeartbeatRef) { this.pendingHeartbeatRef = null; } this.log('receive', `${payload.status || ''} ${topic} ${event} ${(ref && '(' + ref + ')') || ''}`, payload); Array.from(this.channels) .filter((channel) => channel._isMember(topic)) .forEach((channel) => channel._trigger(event, payload, ref)); this.stateChangeCallbacks.message.forEach((callback) => callback(msg)); }); } /** @internal */ _onConnOpen() { this.log('transport', `connected to ${this.endpointURL()}`); this.flushSendBuffer(); this.reconnectTimer.reset(); if (!this.worker) { this._startHeartbeat(); } else { if (!this.workerRef) { this._startWorkerHeartbeat(); } } this.stateChangeCallbacks.open.forEach((callback) => callback()); } /** @internal */ _startHeartbeat() { this.heartbeatTimer && clearInterval(this.heartbeatTimer); this.heartbeatTimer = setInterval(() => this.sendHeartbeat(), this.heartbeatIntervalMs); } /** @internal */ _startWorkerHeartbeat() { if (this.workerUrl) { this.log('worker', `starting worker for from ${this.workerUrl}`); } else { this.log('worker', `starting default worker`); } const objectUrl = this._workerObjectUrl(this.workerUrl); this.workerRef = new Worker(objectUrl); this.workerRef.onerror = (error) => { this.log('worker', 'worker error', error.message); this.workerRef.terminate(); }; this.workerRef.onmessage = (event) => { if (event.data.event === 'keepAlive') { this.sendHeartbeat(); } }; this.workerRef.postMessage({ event: 'start', interval: this.heartbeatIntervalMs, }); } /** @internal */ _onConnClose(event) { this.log('transport', 'close', event); this._triggerChanError(); this.heartbeatTimer && clearInterval(this.heartbeatTimer); this.reconnectTimer.scheduleTimeout(); this.stateChangeCallbacks.close.forEach((callback) => callback(event)); } /** @internal */ _onConnError(error) { this.log('transport', `${error}`); this._triggerChanError(); this.stateChangeCallbacks.error.forEach((callback) => callback(error)); } /** @internal */ _triggerChanError() { this.channels.forEach((channel) => channel._trigger(CHANNEL_EVENTS.error)); } /** @internal */ _appendParams(url, params) { if (Object.keys(params).length === 0) { return url; } const prefix = url.match(/\?/) ? '&' : '?'; const query = new URLSearchParams(params); return `${url}${prefix}${query}`; } _workerObjectUrl(url) { let result_url; if (url) { result_url = url; } else { const blob = new Blob([WORKER_SCRIPT], { type: 'application/javascript' }); result_url = URL.createObjectURL(blob); } return result_url; } } //# sourceMappingURL=RealtimeClient.js.map