Facing CapacitorHttp Issues - HTTP vs WebSocket

Capacitor
1

Hello everyone,
It’s my second full day of debugging and still can’t find a solution for my problem.

My application iOS/Android:

  • CapacitorJS v.5
  • Vue3

consider capacitor.config.json:

"CapacitorHttp": { "enabled": true }

I am using CapacitorHttp to intercept XMLHttpRequest and make it natively, because it’s the way it works all my API consuming, Apple Sign In, Google Sign In, etc… so I can’t really just disabled it.

Said that, my problem comes now trying to have a Socket.IO connection for a chatbot.

Server is configured:

python-socketio==5.3.0
python-engineio==4.2.1
eventlet==0.31.0
flask==2.0.2
aiohttp==3.8.1
flask-cors==3.0.10

sio = socketio.Server(
    cors_allowed_origins='*',
    cors_credentials=True,
    transports=['websocket', 'polling']
)

Client is configured:

"socket.io-client": "^4.7.5" //package.json

//socketService.ts

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

export const socket = io('wss://my-server.com', { withCredentials: true });

Running on browser it works correct!
Connection is successful… client and server communicates perfectly!

Running on Native App (simulator and real device | iOS and Android) I get HTTP 400 from server with this message:

The client is using an unsupported version of the Socket.IO or Engine.IO protocols

Considering that browser works fine, I can assume that problem here isn’t really the version of my Socket.IO on client package.json… but some interference of capacitorHttp intercepting my WS request and, using inner dependencies that I haven’t access, conflicts with server and fail my request.

If I set “CapacitorHttp”: { “enabled”: false } then Socket connection works on native App, but all my other APIs and Native Logins request fail.

  • I have investigate about deactivating CapacitorHttp plugin ONLY for ws:// requests, but couldn’t make it (accordingly to documentation isn’t even possible).

Does anyone have an idea what I can do here?
Any help is welcome :slight_smile:

2

This sounds like a bug with the Capacitor HTTP plugin. You might want to open an issue on the repo - GitHub - ionic-team/capacitor: Build cross-platform Native Progressive Web Apps for iOS, Android, and the Web ⚡️

3

Thanks for the suggestion @twestrick, I have done that…
Meanwhile it, in case someone has any clue I’d be glad to “hear”, since a fix could take ages, or even never come :frowning:

Quite weird that an App technology has limitation on server communication which is the base of most of mobile Applications!
I still hope there’s something I can do right now to get it working.

4

I see in the issue you created, you are running Capacitor 5 (I guess you did mention it in the OP too). I would upgrade to Capacitor 6 and see if it works. Quite a few improvements were made to the HTTP plugin.

1 Like
5

@twestrick you’re right!
I checked changelog and there are a lot of mentions about HTTP bugfixes and optimizations!

For sure the best solution is upgrading to v6.
Unfortunately I have many dependencies to solve before upgrade it, so I could solve by upgrading only:

"@capacitor/core": "^5.7.6"

and defining the transport method to only websocket:

transports: ['websocket']

And I have it working properly for iOS…
Android is still pending a proper test, and I update here as soon it works there too!

1 Like