xhr poll error and websocket error on android react native when connecting

[proohit]

Describe the bug Getting an error on connection, xhr poll error both with polling and websocket transports on Android with React Native. cURL and iOS both work without problems. For reference:

curl http://localhost:7777/socket.io/\?EIO\=4\&transport\=polling\&t\=OGBFaH0
0{"sid":"YxIRV8ZykNDYC-G8AAAB","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":20000,"maxPayload":1000000}

I tried to log the underlying xhr error from polling.js and got the following log:

xhr poll error 0 {"DONE": 4, "HEADERS_RECEIVED": 2, "LOADING": 3, "OPENED": 1, "UNSENT": 0, "_aborted": false, "_cachedResponse": undefined, "_hasError": true, "_headers": {"accept": "*/*"}, "_incrementalEvents": false, "_lowerCaseResponseHeaders": {}, "_method": "GET", "_perfKey": "network_XMLHttpRequest_http://localhost:7777/socket.io/?EIO=4&transport=polling&t=OGBFaH0", "_performanceLogger": {"_closed": false, "_extras": {}, "_pointExtras": {}, "_points": {"initializeCore_end": 13975860.034036, "initializeCore_start": 13975724.843112}, "_timespans": {"network_XMLHttpRequest_http://localhost:7777/socket.io/?EIO=4&transport=polling&t=OGBFaH0": [Object]}}, "_requestId": null, "_response": "Failed to connect to localhost/127.0.0.1:7777", "_responseType": "", "_sent": true, "_subscriptions": [], "_timedOut": false, "_trackingName": "unknown", "_url": "http://localhost:7777/socket.io/?EIO=4&transport=polling&t=OGBFaH0", "readyState": 4, "responseHeaders": undefined, "status": 0, "timeout": 0, "upload": {}, "withCredentials": false}

To Reproduce

"@nestjs/platform-socket.io": "^9.1.6" which uses "socket.io": "4.5.3"

Server

import {
  OnGatewayConnection,
  WebSocketGateway,
  WebSocketServer,
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

@WebSocketGateway(7777, { cors: { origin: '*' }})
export class WebSocketService implements OnGatewayConnection
{
  @WebSocketServer()
  server: Server;

  async handleConnection(client: Socket) {
    console.log('new client has connected');
  }
}

Socket.IO client version: 4.5.3

Client

import { io } from "socket.io-client";

const socket = io("ws://localhost:7777/", {});

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

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

Platform:

• Device: Android Emulator (Pixel 3a API 33)

[proohit]

Okay, turned out the issue was that I used localhost as the hostname. Changing it to the local IP address (find out with ifconfig on UNIX and ipconfig on WIN) seemed to work. It makes sense that its' working via cURL since its' on the same machine, but why is it working on iOS as well?

[lgibso34]

I'm having the same issue. Lots of signs point to the use of localhost. I tried 127.0.0.1 but no luck. Using my local IP address did however work.

iOS works fine.

[darrachequesne]

Hi! I think that's because Android is not able to resolve localhost, you should either create a proxy with adb reverse tcp:8080 tcp:8080 or use the local IP address.

[MDileg]

Hey guys, I have problem with socket.io-client, I can not connect to server, (nuxt.js 3), it shows me " Error: xhr poll error " <- like that please help me...

[proohit]

@MDileg how do you connect?

[MDileg]

like this.

[MDileg]

   Access to XMLHttpRequest at 'URL/socket.io/?EIO=4&transport=polling&t=OVmOMnG' from origin 'http://localhost:55377' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Error: xhr poll error at Polling.onError (transport.js:38:37) at Request. (polling.js:235:18) at Emitter.emit (index.mjs:136:20) at Request.onError (polling.js:333:14) at polling.js:307:30

<-Like that error,

whose problem that, backend or front?!

[proohit]

@MDileg sounds like your frontend denies the backend because it is served under another host. Try adding Access-Control-Allow-Origin: * as a header from your backend. Please refer to StackOverflow or StackExchange in order for more details

[MDileg]

thanks proohit i fixed that error,

var socket = io(BASE_URL, { transports: ['websocket'] // <- when i put this, it worked🙂🙂🙂 });

thanks for everything!

[MDileg]

Hello Developers, I have a question, how are u using loading, during fetch data,

methods:{ async fetchHome() { loading.setLoading(true); // some fetching data ... loading.setLoading(false); } }

I am using like this, but loading was false during fetch data, in nuxt3

[darrachequesne]

For future readers:

Please check our guide with React Native here: https://socket.io/how-to/use-with-react-native

Please reopen if needed.

[zju1]

I'm still getting this error in 11 June, 2024. Tried both polling and websocket transports. But didn't work. Keeps saying: xhr poll error, websocket error.

In my AndroidManifest.xml added this line to application tag:

android:usesCleartextTraffic="true"

This is my RN code:

const client = io(envVars.SOCKET_URL, {
        transports: ["websocket", "polling"],
      });
      client.on("connection", console.log);
      client.on("disconnect", console.log);
      client.on("connect", console.log);
      client.on("reconnect_attempt", console.log);
      client.on("reconnect", console.log);
      client.on("connect_error", (err) => {
        console.log(err);
      });

[darrachequesne]

@zju1 are you using plain HTTP? HTTPS? Can you check that your server is actually reachable?

See also: https://socket.io/docs/v4/troubleshooting-connection-issues/