Why my client is not receiving data from my socket connection?

I am trying to connect my angular front end to my node - express backend server trough a socket, However when I try to emit an event I am not receiving data into the angular app. I want to emit an event to my client when a user types a command in the chat on Twitch

websocket.js

const socketIO = require('socket.io');
const server = require('http').createServer();
server.listen(4444, () => {
    console.log("Socket IO is lestineng on port 4444");
});

module.exports = socketIO(server);

index.js

const twitchConnection =  require('./Connection/twitch_conn');
const app = express();
const ROOT_URL = "/api/v1/";

// create application/json parser
// create application/x-www-form-urlencoded parser
app.use(express.urlencoded());
app.use(express.json());

// enable cors
const cors = require('cors');
app.use(cors({
    origin: 'http://localhost:4200'
}));

// App configuration
app.use(cookieParser()); // Parsing application/json

// Get environment port
const PORT = process.env.PORT || 3001;

// Start server
app.listen(PORT, function(){
    console.log(`===== SERVER RUNNING ON PORT ${PORT} ====`)
    twitchConnection.init(); // Connect to twitch chat
})

twitch_conn.js

const tmi = require('tmi.js');
const socket = require('../sockets/websocket');

const client = new tmi.Client({
  options: { debug: true },
  connection: {
    secure: true,
    reconnect: true
  },
  identity: {
    username: '<USERNAME>',
    password: '<PASSWORD>'
  },
  channels: ['<CHANNEL_NAME>']
});

exports.init = function(){
    client.connect();

    client.on('message', (channel, tags, message, self) => {

        if(self || !message.startsWith('!')) {
          return;
        }
      
        const args = message.slice(1).split(' ');
        const command = args.shift().toLowerCase();
        console.log(command);
        if(command === 'spin') {
          console.log("spinning wheel")
          socket.sockets.emit('spin', `from server`);
        }
      });
}

socket.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });

  socket.emit('spin', `from server`);

});

spinwheel.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from '../../../environments/environment';
import { Observable } from 'rxjs';
import { SpinWheelOption } from '../../models/games/spinwheel.model';
import { io } from 'socket.io-client';

@Injectable({
  providedIn: 'root'
})
export class SpinWheelService {

  socket: any;
  readonly url = "ws://localhost:4444";
  constructor(private http: HttpClient) { 
    this.socket = io(this.url)
  }

listen(eventName: string){
  return new Observable((subscriber) => {
    this.socket.on(eventName, (data)=> {
      subscriber.next(data);
    })
  })
}
  emit(eventName: string, data: any){
    this.socket.emit(eventName, data);
  }

}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { SpinWheelService } from './services/games/spinwheel.service'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent   {
  title = 'app-skeleton';

  constructor(private socketService: SpinWheelService) {
    this.socketService.listen("spin").subscribe({
      next: this.handleGetAllOptionsResponse.bind(this),
      error: this.handleError.bind(this)
    })
  }
  
  handleGetAllOptionsResponse(response){
    console.log(response)
  }

  handleError(error){
    console.log(error)

  }

}