fix: properly handle ws browser export (#474) (#476)

Author: filipecabaco

package-lock.json

@@ -38,29 +38,29 @@
     "ci": "run-s test coverage"
   },
   "dependencies": {
-    "@supabase/node-fetch": "^2.6.14",
+    "@supabase/node-fetch": "^2.6.13",
     "@types/phoenix": "^1.6.6",
-    "@types/ws": "^8.5.14",
-    "ws": "^8.18.0"
+    "@types/ws": "^8.18.1",
+    "ws": "^8.18.2"
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "^0.16.2",
-    "@types/sinon": "^17.0.3",
-    "@vitest/coverage-v8": "^2.1.9",
-    "eslint": "^7.0.0",
+    "@arethetypeswrong/cli": "^0.16.4",
+    "@types/sinon": "^17.0.4",
+    "@vitest/coverage-v8": "^3.1.4",
+    "eslint": "^9.27.0",
     "esm": "^3.2.25",
     "jsdom": "^16.7.0",
     "jsdom-global": "3.0.0",
     "jsonwebtoken": "^9.0.2",
     "mock-socket": "^9.3.1",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
-    "prettier": "^2.1.2",
+    "prettier": "^2.8.8",
     "semantic-release-plugin-update-version-in-files": "^1.1.0",
-    "sinon": "^18.0.0",
-    "typedoc": "^0.27.6",
-    "typescript": "^5.7.3",
-    "vitest": "^2.1.9",
+    "sinon": "^18.0.1",
+    "typedoc": "^0.27.9",
+    "typescript": "^5.8.3",
+    "vitest": "^3.1.4",
     "web-worker": "1.2.0"
   },
   "exports": {
@@ -69,8 +69,10 @@
       "require": "./dist/main/index.js"
     },
     "./websocket": {
-      "node": "./src/node.js",
-      "default": "./src/native.js"
+      "node": "./dist/WebSocket.js",
+      "browser": "./dist/WebSocket.native.js",
+      "types": "./dist/WebSocket.d.ts",
+      "default": "./dist/WebSocket.native.js"
     }
   }
 }

package.json

@@ -17,7 +17,6 @@ import Timer from './lib/timer'
 import { httpEndpointURL } from './lib/transformers'
 import RealtimeChannel from './RealtimeChannel'
 import type { RealtimeChannelOptions } from './RealtimeChannel'
-import Push from './lib/push'
 
 type Fetch = typeof fetch
 
@@ -214,9 +213,16 @@ export default class RealtimeClient {
       this.transport = WebSocket
     }
     if (this.transport) {
-      this.conn = new this.transport(this.endpointURL(), undefined, {
-        headers: this.headers,
-      })
+      // 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
     }

pnpm-lock.yaml

@@ -0,0 +1,4 @@
+// Browser WebSocket implementation
+const WebSocketImpl = window.WebSocket
+
+export default WebSocketImpl

src/RealtimeClient.ts

@@ -1,4 +1,4 @@
-// Native/browser WebSocket entry point
-const NativeWebSocket = typeof WebSocket !== 'undefined' ? WebSocket : undefined
+// React Native/Expo WebSocket implementation
+const WebSocketImpl = global.WebSocket
 
-export default NativeWebSocket
+export default WebSocketImpl

src/WebSocket.browser.ts

@@ -0,0 +1,7 @@
+// Node.js WebSocket implementation
+let WebSocketImpl: any
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+WebSocketImpl = require('ws')
+
+export default WebSocketImpl

src/WebSocket.native.ts

@@ -1,4 +1,14 @@
 // Node.js WebSocket entry point
-import WebSocket from 'ws'
 
-export default WebSocket
+let WebSocketImpl: any
+
+if (typeof window === 'undefined') {
+  // Node.js environment
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  WebSocketImpl = require('ws')
+} else {
+  // Browser environment
+  WebSocketImpl = window.WebSocket
+}
+
+export default WebSocketImpl