How to implement http4s web socket with socket.io front end app

Question

          def server[F[_]: Async: Files: Network](q: Queue[F, OutputMessage],
                                              t: Topic[F, OutputMessage],
                                              im: InputMessage[F],
                                              protocols: Protocols[F],
                                              routes :HttpRoutes[F]) ={
        EmberServerBuilder
          .default[F]
          .withHost(ipv4"0.0.0.0")
          .withPort(port"8080")
          .withHttpWebSocketApp(wsb => new WebSocketRoutes().service(wsb,q,t, im, protocols, routes))
          .build
          .useForever
          .void
    
      }
    
    
    class WebSocketRoutes[F[_]: Files: Temporal] extends Http4sDsl[F] {
      def service(
                   wsb: WebSocketBuilder[F],
                   q: Queue[F, OutputMessage],
                   t: Topic[F, OutputMessage],
                   im: InputMessage[F],
                   protocol: Protocols[F],
                   r: HttpRoutes[F]
                 ): HttpApp[F] = {
        val routes = HttpRoutes.of[F] {
          case GET -> Root / "ws" =>
            for {
              uRef <- Ref.of[F, Option[User]](None)
              uQueue <- Queue.unbounded[F, OutputMessage]
              // Send a message upon WebSocket connection
              _ <- uQueue.offer(Connect("Hello from server on connect event"))
              ws <- wsb.build(
                send(t, uQueue, uRef),
                receive(protocol, im, uRef, q, uQueue)
              )
            } yield ws
        }
        val combinedRoutes = (routes <+> r).orNotFound
        combinedRoutes
      }

 //front-end code 

    const io = require('socket.io-client');

const socket = io(""http://localhost:8080/ws""); // not working

//const socket = io(""ws://localhost:8080/ws""); // not working

socket.on("connect", () => {
  console.log("Connection established");
});

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

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

const socket1 = new WebSocket("ws://localhost:8080/ws"); // working with vanila js

It scala http4s backend for web socket it connects fine with Vanilla Java script web socket but when I try with socket.io I get transport error Error: write EPROTO 004F0000:error:0A00010B:SSL routines:ssl3_get_record:wrong version number:c:\ws\deps\openssl\openssl\ssl\record\ssl3_record.c:355:\n' + '\n' + ' at WriteWrap.onWriteComplete [as oncomplete] (node:internal/stream_base_commons:94:16)