reactjs - การใช้ Socket.io กับ typescript และ react

ฉันกำลังทำงานเกี่ยวกับการสร้างการเชื่อมต่อ websocket ระหว่างแอป Node และแอป React อย่างไรก็ตามฉันดูเหมือนจะไม่สามารถเรียกใช้ฟังก์ชัน this.io.on() ในเมธอด listen ของคลาส socket ได้ เซิร์ฟเวอร์บันทึก "listen" แต่ไม่บันทึก 'Connected client on port %s.', this.port คำถามของฉันคือทำไมมันถึงไม่ทำงาน?

ไฟล์ index.ts ในแอปพลิเคชันเซิร์ฟเวอร์

/// <reference types="@types/node" />

// Imports.
import * as http from 'http';
import App from './App';
import * as socketIo from 'socket.io';
import { SocketIO, Server } from 'socket.io';

const port = process.env.PORT || 3000;
const server = http.createServer(App);

// Start the server.
App.listen(port, (err) => {
  if (err) {
  return console.error(err);
}
  new socket(server);

  return console.log(`Server is listening on ${port}`);
});


class socket {

  private server: Server;
  private io: SocketIO.Server;
  private port = 3000;

  constructor(server) {
      this.createServer(server);
      this.sockets();
      this.listen();
  }

  private createServer(server: any): void {
      this.server = server;
  }

  private sockets(): void {
      this.io = socketIo(this.server);
  }

  private listen(): void {
      console.log("listen");
      this.io.on('connect', (socket: any) => {
          console.log('Connected client on port %s.', this.port);
          socket.on('message', (m: any) => {
              console.log('[server](message): %s', JSON.stringify(m));
              this.io.emit('message', m);
          });

          socket.on('disconnect', () => {
              console.log('Client disconnected');
          });
      });
  }
}

คำตอบ #1

คุณอาจจะใช้ this ผิด ทำให้ this.io เป็น undefined

แก้ไข

ใช้ฟังก์ชันลูกศร:

  private listen = (): void => { // ARROW
      console.log("listen");
      this.io.on('connect', (socket: any) => {