mkdir socketio-numberOfOnlineUser-ts
cd socketio-numberOfOnlineUser-ts

npm init -y

npm i express rxjs socket.io
npm i -D @types/express @types/socket.io nodemon ts-node tslint typescript

  "scripts": {
    "dev": "nodemon",
    "start": "ts-node src/index.ts",
  }

touch nodemon.json

{
  "ignore": ["**/*.test.ts", "**/*.spec.ts", "node_modules"],
  "watch": ["src"],
  "exec": "npm start",
  "ext": "ts"
}

npx tsc --init --rootDir src --outDir dist --module commonjs --lib es2015  --sourceMap true --target es6 --esModuleInterop true

mkdir src src/models src/services

touch src/index.ts src/index.html src/models/index.ts src/models/Socket.ts src/services/index.ts src/services/Socket.ts

import express from "express"; // We import express as listener, you know.
import * as http from "http"; // We import http for init the server
// Anyway, if we don't do it, express does it secretly

const app =  express(); // Init express
const server = http.createServer(app); // Init server avec use express as listener
const port =  3000;

app.get("/", (req, res) => {
res.sendFile(__dirname +  "/index.html"); // We Will use the index.html file to see our work
});

server.listen(port, () => {
return console.log(`server is listening on ${port}`); // No need to comment that, no?
});

<div>
    <p>Number of users : <span id="numberOfUsers"></span></p>
</div>
<script src="/socket.io/socket.io.js"></script>
<script>

var socket = io("localhost:3000");
var numberOfUsers = document.getElementById("numberOfUsers");

socket.on("dataChange", function (data) {
  numberOfUsers.textContent = data.numberOfUser;
});
</script>

export interface SocketData {
  numberOfUser?: number;
}

export * from "./Socket";

import * as socketio from "socket.io";
import * as http from "http"; // Just for typing, we like typing !
import { BehaviorSubject } from "rxjs";

import { SocketData } from "../models/Socket"; // Here our model, cause we like typing things !

export class SocketService {
  private store: BehaviorSubject<SocketData> = new BehaviorSubject<SocketData>({
    numberOfUser: 0,
  }); // Here's our "Observable" data.
  private io!: socketio.Server; // Our Socket instance

  constructor(server: http.Server) {
    this.io = new socketio.Server(server, { cors: { origin: "*" } }); // We init our Socket instance with the server as parameter
  }

  public listenStore() {
    this.store.subscribe((store) => {
      // subscribe is called at each store value change !
      this.io.emit("dataChange", store); // So at each value change, we emit this value to the client with the event name "dataChange"
    });
  }

  public listenUserActivity() {
    this.io.on("connection", (client) => {
      const storeData = this.store.getValue(); // we get the actual value of our "Observable"
      // When a user do a connection at our socket, the "connection" event is called. It's a default event from socket.io.
      this.store.next({ numberOfUser: storeData.numberOfUser + 1 }); // so we change the data of the store with the function "next"
      client.once("disconnect", () => {
        const storeData = this.store.getValue(); // we get the actual value of our "Observable"
        // When a user do a disconnection, the "disconnect" event is called. It's a default event from socket.io.
        if (storeData.numberOfUser !== 0) {
          // A check just by security.
          this.store.next({ numberOfUser: storeData.numberOfUser - 1 }); // You know what next do now.
        }
      });
    });
  }
}

import express from "express";
import * as http from "http";
import { SocketService } from "./services"; // We import our SocketService, Thanks to the index.ts file, we don't need to specify where exactly the Socket.ts file is located.

const app = express();
const server = http.createServer(app);
const port = 3000;

const socketService = new SocketService(server); // We instantiate our SocketService

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html");
});

socketService.listenStore(); // We ask to our service to listen the change of the "Observable" data and emit the change to our socket by the "dataChange" event.

socketService.listenUserActivity(); // We listen the activity of the socket and change the state of the "Observable" data when a desired event is triggered ("connection" or "disconnect")

server.listen(port, () => {
  return console.log(`server is listening on ${port}`);
});

import { io, Socket } from "socket.io-client";
import { Observable, BehaviorSubject } from "rxjs";

export interface SocketData {
  numberOfUser?: number;
}

export class SocketService {
  private socket!: Socket;

  private store: BehaviorSubject<SocketData> = new BehaviorSubject<SocketData>({
    numberOfUser: 0,
  });
  private store$: Observable<SocketData> = this.store.asObservable();

  constructor() {
    this.socket = io("YOUR_BACKEND_URL");
    this.socket.on("dataChange", (data) => {
      this.emit(data); // At each "dataChange" event we modify our "Observable" data.
    });
  }

  public emit(store: SocketData): void {
    this.store.next(store);
  }

  public listen(): Observable<SocketData> {
    return this.store$; // You will be able to use this.socketService.listen().subscribe(), it's the same logic as we see above !
  }
}