the sockets not working :(

Describe the bug The client is not connecting when I run the socket.io script with html (<script> tag) but when I try to connect socket.io from the console it does connect (dev tools). when I get the variable of the connection it appears to me that it is disconnected

My code

Server

// file index.ts
import app from "./app";
var server = new app();
// file app.ts
import express, { Application } from "express";
import { Server } from "http";
import cookie_parser from "cookie-parser";
import { urlencoded, json } from "body-parser";
import routes from "./routes/index";
import sokets from "./sokets/soket.io";
import { resolve } from "path";
import { createServer } from "http";

export default class classApp {
    app: Application = express();
    constructor(private port?: string) {
        this.config();
        this.midlewares();
        this.routes();
    }
    private config(): void {
        this.app.set("port", process.env.PORT || this.port || 3000);
        this.app.set("view engine", "ejs");
        this.app.set("views", resolve("../sources/views"));
        this.app.disable('x-powered-by');
    }
    private midlewares(): void {
        this.app.use(urlencoded({ extended: true, }));
        this.app.use(json());
        this.app.use(express.query({}));
        this.app.use(cookie_parser("super"));
    }
    private routes(): void {
        this.app.use("/static", express.static(resolve("../sources/public")));
        new routes(this.app);
    }
    /**
     * listen on the port
     * 
     */
    public listen(callback: () => void): Server {
        var http = createServer(this.app)
        var server = http.listen(this.app.get("port"), () => {
            console.log(`Server on port ${this.app.get("port")}`);
            callback();
        });
        new sokets(http);
        return server;
    }
}
// file socket.io.ts
import { Server } from "http";
import socketIO from "socket.io";

export default class ServerSocket {
    public io: socketIO.Server;
    constructor(server: Server) {
        this.io = new socketIO.Server(server);
        this.listeners();
    };
    public listeners() {
        this.io.on("connection", (socket) => {
            socket.on("connect_error", (err) => {
                console.log(`connect_error due to ${err.message}`);
            });
            console.log("i got a connection !");
            socket.on("error", ()=>{
                console.log("error in socket")
            })
            socket.on("disconnect", ()=>{
                console.log("disconnected")
            })
            socket.onAny((args) => {
                console.log("i get a event");
            });
            socket.emit("serv:ping", Date.now());
            socket.on("first event", (args) => {  
                console.log("i get the first event");
            });
            console.log(socket.eventNames());
        });
    };
}

Client

var sockets_connection = io();
sockets_connection.onconnect = () => {
    emitEvent();
    console.log("Connected to socket.io server!"); // this works 
}
function emitEventl() {
   sockets_connection.emit("fisrt event"); // this not works
}
//! when i get sockets_connection var, i get this: 
Object { receiveBuffer: (2) […], sendBuffer: (3) […], ids: 0, acks: {}, flags: {}, io: {…}, nsp: "/", connected: false, disconnected: true, subs: (4) […], … }

Platform:

• Device: Laptop
• OS: Windows 10 with wsl (Ubuntu 20.04.2 LTS)

[el-zorab]

sockets_connection.emit("fisrt event"); // this not works

fisrt is a typo. It is really likely that this is the only issue.

[darrachequesne]

Closed due to inactivity, please reopen if needed.