481 lines
18 KiB
JavaScript
481 lines
18 KiB
JavaScript
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
|