使用带有打字稿的 Socket.io 并做出反应

Question

我正在努力在 Node 应用程序和 React 应用程序之间建立 websocket 连接。但是，我似乎无法让函数 this.io.on() 在类套接字的侦听方法中运行。服务器记录“侦听”但未记录“端口 %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');
          });
      });
  }
}

Answer 1

您可能有错误的this 导致this.io 是undefined。

修复

使用arrow function：

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