feat: Replace socket.io-client

.eslintignore

@@ -1,5 +1,4 @@
 lib/
-socket.io-websocket-only.cjs
 doc/resource
 coverage/
 build/

.gitignore

@@ -59,3 +59,4 @@ package.tgz
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+.DS_Store

package.json

@@ -54,9 +54,11 @@
  },
  "homepage": "http://ftrack.com",
  "dependencies": {
+ "isomorphic-ws": "^5.0.0",
  "loglevel": "^1.8.1",
  "moment": "^2.29.4",
- "uuid": "^9.0.0"
+ "uuid": "^9.0.0",
+ "ws": "^8.13.0"
  },
  "lint-staged": {
  "*.js": "eslint --cache --fix",

source/event.ts

@@ -1,6 +1,6 @@
 // :copyright: Copyright (c) 2016 ftrack
 import { v4 as uuidV4 } from "uuid";
-
+import { EventSource } from "./event_hub";
 /**
  * ftrack API Event class.
  */
@@ -11,7 +11,7 @@ export class Event {
  target: string;
  inReplyToEvent: string | null;
  id: string;
- source?: any;
+ source?: EventSource;
  };
 
  /**
@@ -37,12 +37,12 @@ export class Event {
  }
 
  /** Return event data. */
- getData(): { [key: string]: any } {
+ getData() {
  return this._data;
  }
 
  /** Add source to event data. */
- addSource(source: any): void {
+ addSource(source: EventSource): void {
  this._data.source = source;
  }
 }

source/event_hub.ts

@@ -1,7 +1,7 @@
 // :copyright: Copyright (c) 2016 ftrack
 import { v4 as uuidV4 } from "uuid";
 import loglevel from "loglevel";
-import io, { SocketIO } from "./socket.io-websocket-only.cjs";
+import io from "./simple_socketio";
 import { Event } from "./event";
 import {
  EventServerConnectionTimeoutError,
@@ -72,11 +72,11 @@ export type EventPayload =
  | UpdateEventPayload;
 
 export interface EventSource {
- clientToken: string;
+ clientToken?: string;
  applicationId: string;
  user: {
  username: string;
- id: string;
+ id?: string;
  };
  id: string;
 }
@@ -132,7 +132,7 @@ export class EventHub {
  };
  private _unsentEvents: ConnectionCallback[];
  private _subscribers: Subscriber[];
- private _socketIo: SocketIO | null;
+ private _socketIo: io | null;
 
  /**
  * Construct EventHub instance with API credentials.
@@ -177,16 +177,7 @@ export class EventHub {
 
  /** Connect to the event server. */
  connect(): void {
- this._socketIo = io.connect(this._serverUrl, {
- "max reconnection attempts": Infinity,
- "reconnection limit": 10000,
- "reconnection delay": 5000,
- transports: ["websocket"],
- query: new URLSearchParams({
- api_user: this._apiUser,
- api_key: this._apiKey,
- }).toString(),
- });
+ this._socketIo = new io(this._serverUrl, this._apiUser, this._apiKey);
 
  this._socketIo.on("connect", this._onSocketConnected);
  this._socketIo.on("ftrack.event", this._handle);
@@ -197,7 +188,7 @@ export class EventHub {
  * @return {Boolean}
  */
  isConnected(): boolean {
- return (this._socketIo && this._socketIo.socket.connected) || false;
+ return this._socketIo?.isConnected() || false;
  }
 
  /**
@@ -368,7 +359,7 @@ export class EventHub {
  // Force reconnect socket if not automatically reconnected. This
  // happens for example in Adobe After Effects when rendering a
  // sequence takes longer than ~30s and the JS thread is blocked.
- this._socketIo.socket.reconnect();
+ this._socketIo.reconnect();
  }
  } else {
  callback();

source/simple_socketio.ts

@@ -0,0 +1,207 @@
+// :copyright: Copyright (c) 2023 ftrack
+import WebSocket from "isomorphic-ws";
+import type { Event } from "./event";
+export const PACKET_TYPES = {
+ disconnect: "0",
+ connect: "1",
+ heartbeat: "2",
+ message: "3",
+ json: "4",
+ event: "5",
+ acknowledge: "6",
+ error: "7",
+} as const;
+
+interface EventHandlers {
+ [eventName: string]: ((eventData: Event["_data"]) => void)[];
+}
+
+interface Payload {
+ name: string;
+ args: Event["_data"][];
+}
+
+export default class SimpleSocketIOClient {
+ private ws: WebSocket;
+ private handlers: EventHandlers;
+ private reconnectTimeout: ReturnType<typeof setInterval> | undefined;
+ private heartbeatInterval: ReturnType<typeof setInterval> | undefined;
+ private serverUrl: string;
+ private wsUrl: string;
+ private heartbeatIntervalMs: number;
+ private query: string;
+ private apiUser: string;
+ private apiKey: string;
+ private sessionId?: string;
+
+ // Added socket object with connected, reconnect and transport properties to match current API
+ public socket: {
+ connected: boolean;
+ reconnect: () => void;
+ transport: WebSocket;
+ };
+
+ constructor(
+ serverUrl: string,
+ apiUser: string,
+ apiKey: string,
+ heartbeatIntervalMs: number = 10000
+ ) {
+ // Convert the http(s) URL to ws(s) URL
+ const wsUrl = serverUrl.replace(/^(http)/, "ws");
+ this.serverUrl = serverUrl;
+ this.wsUrl = wsUrl;
+ this.query = new URLSearchParams({
+ api_user: apiUser,
+ api_key: apiKey,
+ }).toString();
+ this.handlers = {};
+ this.heartbeatIntervalMs = heartbeatIntervalMs;
+ this.apiUser = apiUser;
+ this.apiKey = apiKey;
+ this.socket = {
+ connected: false,
+ reconnect: this.reconnect.bind(this),
+ transport: null,
+ };
+ this.initializeWebSocket();
+ }
+ // Fetch the session ID from the ftrack server
+ private async fetchSessionId(): Promise<string> {
+ try {
+ const url = new URL(`${this.serverUrl}/socket.io/1/`);
+ url.searchParams.append("api_user", this.apiUser);
+ const controller = new AbortController();
+ const timeoutId = setTimeout(() => controller.abort(), 7000);
+ const response = await fetch(url, {
+ headers: {
+ "ftrack-api-user": this.apiUser,
+ "ftrack-api-key": this.apiKey,
+ },
+ method: "GET",
+ signal: controller.signal,
+ });
+
+ clearTimeout(timeoutId);
+
+ if (!response.ok) {
+ throw new Error(`Error fetching session ID: ${response.statusText}`);
+ }
+
+ const responseText = await response.text();
+ const sessionId = responseText.split(":")[0];
+ this.sessionId = sessionId;
+ return sessionId;
+ } catch (error) {
+ console.error("Error fetching session ID:", error);
+ throw error;
+ }
+ }
+ private async initializeWebSocket(): Promise<void> {
+ const sessionId = this.sessionId ?? (await this.fetchSessionId());
+ const urlWithQueryAndSession = `${this.wsUrl}/socket.io/1/websocket/${sessionId}?${this.query}`;
+ this.ws = new WebSocket(urlWithQueryAndSession);
+ // Set transport property as a public alias of the websocket
+ this.socket.transport = this.ws;
+ this.addInitialEventListeners();
+ }
+
+ private addInitialEventListeners(): void {
+ this.ws?.addEventListener("message", this.handleMessage.bind(this));
+ this.ws?.addEventListener("open", this.handleOpen.bind(this));
+ this.ws?.addEventListener("close", this.handleClose.bind(this));
+ this.ws?.addEventListener("error", this.handleError.bind(this));
+ }
+
+ private handleError(event: Event): void {
+ this.handleClose();
+ console.error("WebSocket error:", event);
+ }
+ private handleMessage(event: MessageEvent): void {
+ const [packetType, data] = event.data.split(/:::?/);
+ if (packetType === PACKET_TYPES.event) {
+ const parsedData = JSON.parse(data) as Payload;
+ const { name, args } = parsedData;
+ this.handleEvent(name, args[0]);
+ return;
+ }
+ if (packetType === PACKET_TYPES.heartbeat) {
+ // Respond to server heartbeat with a heartbeat
+ this.ws?.send(`${PACKET_TYPES.heartbeat}::`);
+ return;
+ }
+ if (packetType === PACKET_TYPES.error) {
+ // Respond to server heartbeat with a heartbeat
+ console.log("WebSocket message error: ", event);
+ this.handleClose();
+ return;
+ }
+ }
+ private handleOpen(): void {
+ this.startHeartbeat();
+ if (this.reconnectTimeout) {
+ clearTimeout(this.reconnectTimeout);
+ this.reconnectTimeout = undefined;
+ }
+ this.handleEvent("connect", {});
+ // Set connected property to true
+ this.socket.connected = true;
+ }
+
+ private handleClose(): void {
+ this.stopHeartbeat();
+ this.scheduleReconnect();
+ // Set connected property to false
+ this.socket.connected = false;
+ }
+ private handleEvent(eventName: string, eventData?: any): void {
+ this.handlers[eventName]?.forEach((callback) => callback(eventData));
+ }
+ // Setup event callbacks for a given eventName
+ public on(eventName: string, eventCallback: (eventData: any) => void): void {
+ if (!this.handlers[eventName]) {
+ this.handlers[eventName] = [];
+ }
+ this.handlers[eventName].push(eventCallback);
+ }
+ // Emit an event with the given eventName and eventData
+ public emit(eventName: string, eventData: Event["_data"]): void {
+ const payload = {
+ name: eventName,
+ args: [eventData],
+ };
+ const dataString = eventData ? `:::${JSON.stringify(payload)}` : "";
+ this.ws?.send(`${PACKET_TYPES.event}${dataString}`);
+ }
+ // Heartbeat methods, to tell the server to keep the connection alive
+ private startHeartbeat(): void {
+ this.heartbeatInterval = setInterval(() => {
+ this.ws?.send(`${PACKET_TYPES.heartbeat}::`);
+ }, this.heartbeatIntervalMs);
+ }
+
+ private stopHeartbeat(): void {
+ if (this.heartbeatInterval) {
+ clearInterval(this.heartbeatInterval);
+ this.heartbeatInterval = undefined;
+ }
+ }
+
+ public isConnected(): boolean {
+ return this.ws?.readyState === WebSocket.OPEN;
+ }
+ // Reconnect methods, to reconnect to the server if the connection is lost using the same session ID
+ public reconnect(): void {
+ if (this.socket.connected) {
+ this.ws?.close();
+ }
+ this.initializeWebSocket();
+ }
+ private scheduleReconnect(reconnectDelayMs: number = 5000): void {
+ if (!this.reconnectTimeout) {
+ this.reconnectTimeout = setTimeout(() => {
+ this.reconnect();
+ }, reconnectDelayMs);
+ }
+ }
+}