I am working on a project which requires websockets. So far I have set up a websocket server (quarkus) which works perfectly fine when I use insomnia to test it. I can connect and send messages no errors.

But when I try to connect from angular with socket.io-client (v4.7.5) it does not work somehow.
This is my code of the service:

import { Injectable } from "@angular/core"
import { Socket, io } from "socket.io-client"

@Injectable({
  providedIn: "root",
})
export class WebsocketService {
  socket: Socket

  constructor() {
    this.socket = io("http://localhost:8080", {
      path: "/live/angular",
      transports: ["websocket"],
      addTrailingSlash: false,
    }).connect()

    setInterval(() => {
      console.log(this.socket)
    }, 3000)

    this.socket.on("connect", () => {
      console.log("Connected to WebSocket server")
    })

    this.socket.on("disconnect", () => {
      console.log("Disconnected from WebSocket server")
    })

    this.socket.on("connect_error", (err: any) => {
      console.error("Connection error:", err)
    })

    this.socket.on("message", (message: any) => {
      console.log("Received message:", message)
    })
  }

  sendMessage(msg: string): void {
    this.socket.emit(msg)
  }

  onMessage(callback: (message: string) => void): void {
    this.socket.on("message", callback)
  }

  disconnect(): void {
    if (this.socket) {
      this.socket.disconnect()
    }
  }
}

Here you can see that I want to connect to localhost where the websocket server runs. This works apparently because I log when somebody connects to the websocket server.

However when I log the current socket connection (the socket object to be exact), it always says that it is not connected. And the onConnect also does not fire.

The next thing is when I want to emit a message it also does not work. I assume because the connection is not established or terminated somehow.

I have tried multiple version of the socket.io-client and even different libs like ngx-socket-io which resulted in the same errors. The problem has to be somewhere in the frontend angular part because every test with insomnia did work perfectly.