socket.io + capacitor

[alanxp]

Well, i use socket.io and i dont know if it works with capacitor. I've tryed putting the url under server.hostname or server.allowNavigation[] and nothing, android scheme is also "ws" because its a websocket. So how could i make it connect with my server? As a static website it works, however it doesnt connect with capacitor. Do i have to use a capacitor-Socket plugin for that?

I've tryed with both, Capacitor v2 (latest) or v3 (beta)

[alanxp]

i managed it to work ...........

if anyone needs an idea about whats wrong, just add this to the AndroidManifest.xml ...........

    android:usesCleartextTraffic="true"

[matus86309]

Hey, would you mind explaining a bit closer how to use this in the manifest because I tried to both insert it in the original tag (didn't work) and create another but then it was complaining about multiple root tags, so I would appreciate any hints

[matus86309]

I figured it out, so as alanxp mentioned, inside android studio, find a file capacitor-android/manifests/AndroidManifest.xml and inside the manifest tag, like in between, add:

<application android:usesCleartextTraffic="true">
</application>"

This worked for me

[alabora33]

I converted my reactjs project to capacitor. I want to connect it with socketio server. that you use

I added this but it didn't work.
How do I use capacitor android app as socketio-client?
Can you give an example?
@matus86309 @alanxp

[MohamadSalman11]

Make sure to set the origin to '*' in your Server. If you're deploying your server, consider using platforms like Render. Keep in mind that Vercel does not support WebSockets.

Here is my code example:

Client:

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

const socket = io("https://my-first-socket.onrender.com"); // Put the url where your socket.io server is deployed

socket.on("connect", () => {
  alert("Client connected");
});

Server:

const express = require("express");
const app = express();
const http = require("http").Server(app);
const cors = require("cors");

const io = require("socket.io")(http, {
  cors: {
    origin: "*", // This is a importend step
  },
});

app.use(cors());

io.on("connection", (socket) => {
  console.log("A user is connected");

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


http.listen(8000);

[klauss194]

Hey guys, did you manage to make it work ?

[DaliuSinger]

Same problem, nothing works it just ignores all tries... Very dissapointed...

[DaliuSinger]

After digging around and working with AI, I finally made it work!
The issue was that Capacitor runs the app always at HTTPS, while my socket.io setup is always on HTTP. For this reason, we get a mixed content error.
First I tried to setup HTTPS Socket.io, but that ended up with other issues (connection refused, etc)

Then finally AI suggested modifying the MainActivity.java file, to let the app allow mixed content, in android/app/src/main/java/<package_name>/MainActivity.java even tho I did have android:usesCleartextTraffic="true" in AndroidManifest.xml as well and .
I have even added server: { cleartext: true } to capacitor.config.ts

But only editing the MainActivity.java method worked.

Mine was:

package <package_name>;

import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {}

I had to alter it like this:

package <package_name>;

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Access the WebView and set mixed content mode
        WebView webView = getBridge().getWebView();
        if (webView != null) {
            WebSettings settings = webView.getSettings();
            settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }
    }
}

Seems that this allowed Mixed contents to work and after I ran sync and built the app on the phone I could get a working Socket.io connection with my local server!

I am also using CORS with origin: * to allow all connections on the server.

I hope this will help anyone with this problem.