Socket.io client dont receive binary buffer in react native

[joelzavala]

Describe the bug When the server emit some event with binary payload the react native socket io client receive the event but the payload or data is empty

To Reproduce

1. Create a React Native App with react-native-cli
2. Copy and paste the following code in your server or react-native project

Please fill the following code example:

Socket.IO server version: 4.2.0

Server

import { Server } from "socket.io";

const io = new Server(3000, {});

io.on("connection", (socket) => {
  console.log(`connect ${socket.id}`);

  socket.emit("binary_test", Uint8Array.from([0, 1, 2, 3])

  socket.on("disconnect", () => {
    console.log(`disconnect ${socket.id}`);
  });
});

Socket.IO client version: 4.2.0

Client

import React , { useEffect } from 'react'
import { io } from "socket.io-client";

const socket = io("ws://localhost:3000/", { autoConnect: false });

const App = () => {

  useEffect(() => {
   socket.on("connect", () => {
       console.log(`connect ${socket.id}`);
   });

    socket.on("disconnect", () => {
        console.log("disconnect");
    });

    socke.on("binary_test", data => {
       console.log("Binary data", data)
    })
  })

   return <View>
      <Text>Hello word</Text>
   </View>
}

Expected behavior LOG: Binary data <Buffer 00 01 02 03 >

Current behavior LOG: Binary data []

Platform:

• Device: Samsung A9 2018
• OS: android 10

Additional context I´m trying to receive the binary data from a camera ( esp32 cam ) and display it in an Image in react-native

[guoyw]

Describe the bug When the server emit some event with binary payload the react native socket io client receive the event but the payload or data is empty

To Reproduce

1. Create a React Native App with react-native-cli
2. Copy and paste the following code in your server or react-native project

Please fill the following code example:

Socket.IO server version: 4.2.0

Server

import { Server } from "socket.io";

const io = new Server(3000, {});

io.on("connection", (socket) => {
  console.log(`connect ${socket.id}`);

  socket.emit("binary_test", Uint8Array.from([0, 1, 2, 3])

  socket.on("disconnect", () => {
    console.log(`disconnect ${socket.id}`);
  });
});

Socket.IO client version: 4.2.0

Client

import React , { useEffect } from 'react'
import { io } from "socket.io-client";

const socket = io("ws://localhost:3000/", { autoConnect: false });

const App = () => {

  useEffect(() => {
   socket.on("connect", () => {
       console.log(`connect ${socket.id}`);
   });

    socket.on("disconnect", () => {
        console.log("disconnect");
    });

    socke.on("binary_test", data => {
       console.log("Binary data", data)
    })
  })

   return <View>
      <Text>Hello word</Text>
   </View>
}

Expected behavior LOG: Binary data <Buffer 00 01 02 03 >

Current behavior LOG: Binary data []

Platform:

• Device: Samsung A9 2018
• OS: android 10

Additional context I´m trying to receive the binary data from a camera ( esp32 cam ) and display it in an Image in react-native

Is this problem solved? I have the same problem.

[smfunder]

Here I have the same problem.

[guoyw]

Here I have the same problem.

I found that the problem was caused by base64-js decoding failure

[darrachequesne]

I was not able to reproduce the issue: https://github.com/socketio/socket.io/tree/main/examples/react-native

Does it happen on some specific platforms (phone, android version)?

[guoyw]

I was not able to reproduce the issue: https://github.com/socketio/socket.io/tree/main/examples/react-native

Does it happen on some specific platforms (phone, android version)?

https://github.com/guoyw/Example/tree/main/Socket

[darrachequesne]

For future readers:

I was not able to reproduce the issue, the client should properly receive the binary data as a ArrayBuffer.

See also: https://socket.io/how-to/use-with-react-native

Please reopen if needed.