The specified socket. binaryType='arraybuffer 'is invalid, still returning Blob type data

[ShaoGongBra]

Problem Description

const socket = new WebSocket(url, [websocketSubProtocol]);
socket.binaryType = 'arraybuffer';
socket.addEventListener('message', ({ data }) => {

})

Steps To Reproduce

Use mqtt ws link

Expected Results

No response

CLI version

0.72.6

Environment

System:
  OS: Windows 11 10.0.22621
  CPU: "(16) x64 AMD Ryzen 7 7735HS with Radeon Graphics        "
  Memory: 6.89 GB / 15.23 GB
Binaries:
  Node:
    version: 18.17.1
    path: ~\AppData\Local\Temp\yarn--1701586952610-0.3240875104797012\node.CMD
  Yarn:
    version: 1.22.19
    path: ~\AppData\Local\Temp\yarn--1701586952610-0.3240875104797012\yarn.CMD
  npm:
    version: 9.6.7
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK:
    Android NDK: 22.1.7171670
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
IDEs:
  Android Studio: AI-223.8836.35.2231.11090377
  Visual Studio:
    - 17.8.34322.80 (Visual Studio Community 2022)
Languages:
  Java:
    version: 11.0.21
    path: C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE        
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.7
    wanted: ^0.72.6
  react-native-windows:
    installed: 0.72.20
    wanted: 0.72.20
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Target Platform Version

10.0.19041

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2022

Build Configuration

None

Snack, code example, screenshot, or link to a repository

No response

[JunielKatarn]

@ShaoGongBra regarding the steps to reproduce, what is the mqtt link?

Can you please share it here?

[ShaoGongBra]

mqtt.connect('ws://8.130.113.209:4083/mqtt', {
      clientId: "{12c0f68e-5a57-f5d4-0afb-14fe6bf2c840}",
      password: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJzY3JlZW4iLCJpYXQiOjE3MDIwMDk4NzMsImV4cCI6MTczMzU0NTg3MywiaWQiOjl9.VOxKK7hsxeUoO75G7p7LBq1UfG1BOH2xwwZSvN3Ghmc",
      username: "test"
    })

Specify type： https://github.com/mqttjs/MQTT.js/blob/main/src/lib/connect/ws.ts#L136 Receive Data： https://github.com/mqttjs/MQTT.js/blob/main/src/lib/connect/ws.ts#L256

[ShaoGongBra]

If you want to run mqtt normally in ReactNative, you still need to perform the following steps

yarn add buffer

import { Buffer } from 'buffer'
global.process = global.process || {}
global.process.nextTick = cb => setTimeout(cb, 0)

global.Buffer = global.Buffer || Buffer

[ShaoGongBra]

This is the patch file that can run normally now

diff --git a/node_modules/mqtt/build/lib/client.js b/node_modules/mqtt/build/lib/client.js
index 6b49409..dcb203d 100644
--- a/node_modules/mqtt/build/lib/client.js
+++ b/node_modules/mqtt/build/lib/client.js
@@ -37,11 +37,9 @@ const debug_1 = __importDefault(require("debug"));
 const store_1 = __importDefault(require("./store"));
 const handlers_1 = __importDefault(require("./handlers"));
 const TypedEmitter_1 = require("./TypedEmitter");
-const nextTick = process
-    ? process.nextTick
-    : (callback) => {
-        setTimeout(callback, 0);
-    };
+const nextTick = (callback) => {
+    setTimeout(callback, 0);
+};
 const setImmediate = global.setImmediate ||
     ((...args) => {
         const callback = args.shift();
diff --git a/node_modules/mqtt/build/lib/connect/ws.js b/node_modules/mqtt/build/lib/connect/ws.js
index fe37036..db55046 100644
--- a/node_modules/mqtt/build/lib/connect/ws.js
+++ b/node_modules/mqtt/build/lib/connect/ws.js
@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const base64_1 = require('base64-js');
 const buffer_1 = require("buffer");
 const ws_1 = __importDefault(require("ws"));
 const debug_1 = __importDefault(require("debug"));
@@ -183,11 +184,26 @@ const browserStreamBuilder = (client, opts) => {
     }
     function onMessage(event) {
         let { data } = event;
-        if (data instanceof ArrayBuffer)
+        if (data instanceof Blob) {
+            const reader = new FileReader();
+            reader.readAsDataURL(data);
+            reader.onload = function () {
+                let base64 = reader.result.split(',')[1];
+                const length = base64.length % 4;
+                if (length !== 0) {
+                    base64 += ''.padEnd(4 - length, '===');
+                }
+                const { buffer } = base64_1.toByteArray(base64);
+                data = buffer_1.Buffer.from(buffer);
+                proxy.push(data);
+            }
+        } else if (data instanceof ArrayBuffer) {
             data = buffer_1.Buffer.from(data);
-        else
+            proxy.push(data);
+        } else {
             data = buffer_1.Buffer.from(data, 'utf8');
-        proxy.push(data);
+            proxy.push(data);
+        }
     }
     function socketWriteBrowser(chunk, enc, next) {
         if (socket.bufferedAmount > bufferSize) {

[ShaoGongBra]

Are you making progress

[ShaoGongBra]

Are you making progress