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 ?