WebSockets 不会从 Vue 应用程序发送数据 - 错误状态“发送”未定义，堆栈：Vue Express Mongo WebSockets

Question

这是我的代码不起作用：

connectSocket: function () {
  this.socket = new WebSocket('ws://144.0.0.0:8080'); //IP Changed
  this.socket.onopen = function(event) {
    console.log("Connected to the Web Socket Server");
    this.socket.send("Opponent has joined.");
    };
    alert("You're now connected to the server. Be careful out there.");
  this.socket.onmessage = function(event) {
    console.log("Message Received From Server :", event);
    //This is the time to interact with this specific
  };
}

我引用的代码是我的 vue 中调用身份验证的方法。我只是想向 Web Socket 服务器发送和接收基本数据。然而，这是有缺陷的地方......我该如何解决这个问题并保持身份验证？

Answer 1

您的事件处理程序在声明时会丢失上下文 (this)。使用箭头函数来保存当前上下文，所以那里的 this 引用了 Vue 实例：

connectSocket: function () {
  this.socket = new WebSocket('ws://144.0.0.0:8080'); //IP Changed
  this.socket.onopen = (event) => {               // changed to arrow function
    console.log("Connected to the Web Socket Server");
    this.socket.send("Opponent has joined.");

    alert("You're now connected to the server. Be careful out there.");
  };
  this.socket.onmessage = (event) => {              // changed to arrow function
    console.log("Message Received From Server :", event);
    //This is the time to interact with this specific
  };
}

而且你的大括号似乎不平衡，所以我也改变了它们。但重要的部分确实是箭头函数的使用。