fix: add isows (#485)

* fix: add isows

* fix tests

* fix error event

Author: Guilherme Souza

package-lock.json

@@ -40,8 +40,7 @@
   "dependencies": {
     "@supabase/node-fetch": "^2.6.13",
     "@types/phoenix": "^1.6.6",
-    "@types/ws": "^8.18.1",
-    "ws": "^8.18.2"
+    "isows": "^1.0.7"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.16.4",
@@ -62,22 +61,5 @@
     "typescript": "^5.8.3",
     "vitest": "^3.1.4",
     "web-worker": "1.2.0"
-  },
-  "exports": {
-    ".": {
-      "deno": "./dist/main/index.js",
-      "types": "./dist/module/index.d.ts",
-      "import": "./dist/module/index.js",
-      "browser": "./dist/module/index.js",
-      "require": "./dist/main/index.js",
-      "node": "./dist/main/index.js",
-      "default": "./dist/main/index.js"
-    },
-    "./websocket": {
-      "types": "./dist/WebSocket.d.ts",
-      "browser": "./dist/WebSocket.native.js",
-      "node": "./dist/WebSocket.js",
-      "default": "./dist/WebSocket.native.js"
-    }
   }
-}
+}

package.json

@@ -1,4 +1,4 @@
-import WebSocket from './WebSocket'
+import { WebSocket } from 'isows'
 
 import {
   CHANNEL_EVENTS,
@@ -44,18 +44,16 @@ export type HeartbeatStatus =
   | 'timeout'
   | 'disconnected'
 
-const noop = () => {}
+const noop = () => { }
 
 export interface WebSocketLikeConstructor {
-  new (
+  new(
     address: string | URL,
     _ignored?: any,
     options?: { headers: Object | undefined }
-  ): WebSocketLike
+  ): WebSocket
 }
 
-export type WebSocketLike = WebSocket | WSWebSocketDummy
-
 export interface WebSocketLikeError {
   error: any
   message: string
@@ -109,7 +107,7 @@ export default class RealtimeClient {
   encode: Function
   decode: Function
   reconnectAfterMs: Function
-  conn: WebSocketLike | null = null
+  conn: WebSocket | null = null
   sendBuffer: Function[] = []
   serializer: Serializer = new Serializer()
   stateChangeCallbacks: {
@@ -118,11 +116,11 @@ export default class RealtimeClient {
     error: Function[]
     message: Function[]
   } = {
-    open: [],
-    close: [],
-    error: [],
-    message: [],
-  }
+      open: [],
+      close: [],
+      error: [],
+      message: [],
+    }
   fetch: Fetch
   accessToken: (() => Promise<string | null>) | null = null
   worker?: boolean
@@ -176,13 +174,13 @@ export default class RealtimeClient {
     this.reconnectAfterMs = options?.reconnectAfterMs
       ? options.reconnectAfterMs
       : (tries: number) => {
-          return [1000, 2000, 5000, 10000][tries - 1] || 10000
-        }
+        return [1000, 2000, 5000, 10000][tries - 1] || 10000
+      }
     this.encode = options?.encode
       ? options.encode
       : (payload: JSON, callback: Function) => {
-          return callback(JSON.stringify(payload))
-        }
+        return callback(JSON.stringify(payload))
+      }
     this.decode = options?.decode
       ? options.decode
       : this.serializer.decode.bind(this.serializer)
@@ -212,25 +210,11 @@ export default class RealtimeClient {
     if (!this.transport) {
       this.transport = WebSocket
     }
-    if (this.transport) {
-      // Detect if using the native browser WebSocket
-      const isBrowser =
-        typeof window !== 'undefined' && this.transport === window.WebSocket
-      if (isBrowser) {
-        this.conn = new this.transport(this.endpointURL())
-      } else {
-        this.conn = new this.transport(this.endpointURL(), undefined, {
-          headers: this.headers,
-        })
-      }
-      this.setupConnection()
-      return
-    }
-    this.conn = new WSWebSocketDummy(this.endpointURL(), undefined, {
-      close: () => {
-        this.conn = null
-      },
-    })
+
+    this.conn = new this.transport(this.endpointURL(), undefined, {
+      headers: this.headers,
+    }) as WebSocket
+    this.setupConnection()
   }
 
   /**
@@ -252,7 +236,7 @@ export default class RealtimeClient {
    */
   disconnect(code?: number, reason?: string): void {
     if (this.conn) {
-      this.conn.onclose = function () {} // noop
+      this.conn.onclose = function () { } // noop
       if (code) {
         this.conn.close(code, reason ?? '')
       } else {
@@ -519,8 +503,7 @@ export default class RealtimeClient {
     if (this.conn) {
       this.conn.binaryType = 'arraybuffer'
       this.conn.onopen = () => this._onConnOpen()
-      this.conn.onerror = (error: WebSocketLikeError) =>
-        this._onConnError(error as WebSocketLikeError)
+      this.conn.onerror = (error: Event) => this._onConnError(error)
       this.conn.onmessage = (event: any) => this._onConnMessage(event)
       this.conn.onclose = (event: any) => this._onConnClose(event)
     }
@@ -541,8 +524,7 @@ export default class RealtimeClient {
 
       this.log(
         'receive',
-        `${payload.status || ''} ${topic} ${event} ${
-          (ref && '(' + ref + ')') || ''
+        `${payload.status || ''} ${topic} ${event} ${(ref && '(' + ref + ')') || ''
         }`,
         payload
       )
@@ -603,8 +585,8 @@ export default class RealtimeClient {
   }
 
   /** @internal */
-  private _onConnError(error: WebSocketLikeError) {
-    this.log('transport', error.message)
+  private _onConnError(error: Event) {
+    this.log('transport', `${error}`)
     this._triggerChanError()
     this.stateChangeCallbacks.error.forEach((callback) => callback(error))
   }
@@ -639,25 +621,4 @@ export default class RealtimeClient {
     }
     return result_url
   }
-}
-
-class WSWebSocketDummy {
-  binaryType: string = 'arraybuffer'
-  close: Function
-  onclose: Function = () => {}
-  onerror: Function = () => {}
-  onmessage: Function = () => {}
-  onopen: Function = () => {}
-  readyState: number = SOCKET_STATES.connecting
-  send: Function = () => {}
-  url: string | URL | null = null
-
-  constructor(
-    address: string,
-    _protocols: undefined,
-    options: { close: Function }
-  ) {
-    this.url = address
-    this.close = options.close
-  }
-}
+}

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 import assert from 'assert'
 import { describe, beforeEach, afterEach, test, vi, expect } from 'vitest'
 import { Server, WebSocket as MockWebSocket } from 'mock-socket'
-import WebSocket from 'ws'
+import { WebSocket } from 'isows'
 import sinon from 'sinon'
 import crypto from 'crypto'
 
@@ -64,8 +64,8 @@ describe('constructor', () => {
   })
 
   test('overrides some defaults with options', () => {
-    const customLogger = function logger() {}
-    const customReconnect = function reconnect() {}
+    const customLogger = function logger() { }
+    const customReconnect = function reconnect() { }
 
     socket = new RealtimeClient(`wss://${projectRef}/socket`, {
       timeout: 40000,
@@ -642,7 +642,7 @@ describe('flushSendBuffer', () => {
 
   test('empties sendBuffer', () => {
     vi.spyOn(socket.conn!, 'readyState', 'get').mockReturnValue(1) // open
-    socket.sendBuffer.push(() => {})
+    socket.sendBuffer.push(() => { })
 
     socket.flushSendBuffer()