Question

我正在使用socket.io和打字稿构建一个应用程序。与往常一样，我已经创建了服务器和客户端，但是现在我的服务器代码遇到了奇怪的问题。我的服务器正在监听“连接”事件，并在回调创建新类实例并调用其onConnect方法时使用。在此函数中，它调用另一个方法-'bindHandlers'。在此函数中，套接字监听他的事件。

这是我的问题：如果我将回调作为匿名函数传递给'draw'事件，它将按预期工作，但是如果我使用我的class方法，它将事件发送回客户端，而不是广播事件。我想使我的代码更具模块化，这个问题目前使我无法使用。

主文件：

io.on("connection", SocketService.createInstance(db).onConnect);

简化的套接字文件：

export class SocketService {
  private socket: Socket | null = null;

  constructor(private db: DB) {}

  static createInstance = (db: DB) => {
    return new SocketService(db);
  };

 onConnect = (socket: Socket) => {
   this.socket = socket;
   const username = socket.handshake.query.user;

   console.log(`${username} connected ${socket.id}`);

   this.bindHandlers(socket);
 };

  private bindHandlers = (socket: Socket) => {
   if (!this.socket) return console.log("socket is undefined");


   socket.on("draw", this.onDraw);
   // if I swap with code below it works properly
   // socket.on("draw", data => {
   //   socket.broadcast.emit("draw", data);
   // });
  };

 private onDraw = (data: DrawingPoint) => {
   const username = this.socket!.handshake.query.user;
   const { group } = data;

   this.socket!.broadcast.emit("draw", data);
 };

Answer 1

它与之合作的原因：

socket.on("draw", data => {
  socket.broadcast.emit("draw", data);
});

是因为您使用的箭头功能对于上下文（this）将具有周围的上下文，但是在定义事件处理程序时，例如：socket.on("draw", this.onDraw);上下文将不再是{{1}的实例}。稍微玩一下并调试它，看看在用它进行调用的情况下上下文是什么。

一种解决方案是显式设置上下文，例如： SocketService

请记住，JS中方法/函数的上下文取决于方法的调用方式。

调用从类方法发出时的不同行为

1 个答案: