WebSockets won't Send data from Vue app - error states 'send' is undefined, Stack: Vue Express Mongo WebSockets

Question

Here is my code that is not working:

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
  };
}

The code I am referencing is a method in my vue called upon authentication. I am merely trying to send and receive basic data to the Web Socket Server. However somewhere this is flawed... How could I fix this and maintain authentication?

acdcjunior · Accepted Answer · 2018-04-21 03:59:36Z

3

Your event handlers are losing context (this) when declared. Use arrow functions to preserve the current context, so the this there references the Vue instance:

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
  };
}

Also it seemed you had unbalanced curly brackets, so I changed them too. But the important part is really the use of arrow functions.

answered Apr 21, 2018 at 3:59

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Trent N Over a year ago

Thanks! This is just what I needed,I don't quite understand it but looked it up here developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… . Does the => work because it doesn't have its own "this" whereas if I create a new function that function it has its own "this" associated to it so the parent "this" won't work?

Collectives™ on Stack Overflow

WebSockets won't Send data from Vue app - error states 'send' is undefined, Stack: Vue Express Mongo WebSockets

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related