change booleans to true and false with if using websocket and vue

Question

I am new to websockets and for my project I'm using websocket what I'm trying to achieve is having two taps and when a user clicks the button Start the div with Blue color will be displayed to all connected users and if the user clicks Stop the div with Red color will be displayed to all connected users. I only can set the variable display to true using the server but I can't set it back to false I think the problem is with my if statement on the server side.

Vue componenet

<template>
<div style="background-color: #4d00ff; width:200px;height: 200px " v-if="display">Blue</div>
<div style="background-color: #ff0000; width:200px;height: 200px " v-else>Red</div>
<div></div>

  <button @click="startBtn(this.display)">Start</button>
  <button @click="stopBtn(this.display)">Stop</button>


</template>

<script>
// import io from "socket.io-client";

export default {
  data() {
    return {
     
      display:false,
      currentUser: "",
      text: "",
      messages: [],
      connection:null
    };
  },

  methods: {

    startBtn(message){
      console.log(this.connection);
      console.log("message is sent " + message.toString());
      this.connection.send(this.display);


    },
    stopBtn(message){
      console.log(this.connection);
      console.log("message is sent " + message.toString());
      this.display=false;
      this.connection.send(this.display);



    }
  },
  mounted() {
    // this.join();
  },
  created() {
    console.log("Starting connection")
    this.connection = new WebSocket("ws://localhost:8082")
    this.connection.onopen = function (event) {
      console.log(event)
      console.log("Successfully Connected")

    }
    this.connection.onmessage = (event) =>{

      console.log("message recieved from the server " + event.data.toString())
      this.display= event.data.toString()
    }

  },
  beforeCreate () {
    if (this.$store.state.isLogged) {
      this.$router.push({ name: 'login' })
    }
  },
  name: "So-Test"
}
</script>

<style scoped>

</style>

My Node.js Websocket server

const WebSocket = require("ws");
const wss = new WebSocket.Server({port:8082});
var joined = null;
wss.on("connection", ws =>{
    console.log("1 New client connected");

    ws.on("message", message=>{
       //joined = message;
       console.log("0 message received from client " + message.toString())
        wss.clients.forEach(function each(client){
            client.send("hii all client")
        })
        if (message===true){
            console.log("1 message is true")
            message = false;
            console.log(message.toString())



            ws.send(message.toString());
            console.log(`2 Client has received: ${message}`);
        }
        else {
            message = false;
            console.log("1 else message was false");
            console.log(`2 Client has received: ${message}`);

            ws.send(message.toString());
        }

    })



    ws.on("close", ()=>{
        console.log("Client has disconnected");
    })
})

Answer 1

On receipt of your connection message you are referencing this.display which is out of scope and therefore creates a new variable inside the scope of your callback function.

It is standard practice to create a self variable and to set it to this within a method and then you can reference self in the scope of the callback function.

   this.connection.onmessage = (event) =>{
    var self = this;
      console.log("message recieved from the server " + event.data.toString())
      self.display= event.data.toString()
    }

EDIT The placement of the self above I believe is incorrect.

<template>
<div style="background-color: #4d00ff; width:200px;height: 200px " v-if="display">Blue</div>
<div style="background-color: #ff0000; width:200px;height: 200px " v-else>Red</div>
<div></div>

  <button @click="startBtn(this.display)">Start</button>
  <button @click="stopBtn(this.display)">Stop</button>


</template>

<script>
// import io from "socket.io-client";

export default {
  data() {
    return {
     
      display:false,
      currentUser: "",
      text: "",
      messages: [],
      connection:null
    };
  },

  methods: {

    startBtn(message){
      console.log(this.connection);
      console.log("message is sent " + message.toString());
      this.connection.send(this.display);


    },
    stopBtn(message){
      console.log(this.connection);
      console.log("message is sent " + message.toString());
      this.display=false;
      this.connection.send(this.display);



    }
  },
  mounted() {
    // this.join();
  },
  created() {
    var self = this;
    console.log("Starting connection")
    self.connection = new WebSocket("ws://localhost:8082")
    this.connection.onopen = function (event) {
      console.log(event)
      console.log("Successfully Connected")

    }
    this.connection.onmessage = (event) =>{
      console.log("message recieved from the server " + event.data.toString())
      // *** THIS IS THE REFERENCT TO SELF ***//
      self.display= event.data.toString();
    }

  },
  beforeCreate () {
    if (this.$store.state.isLogged) {
      this.$router.push({ name: 'login' })
    }
  },
  name: "So-Test"
}
</script>

<style scoped>

</style>