使用websocket和vue将布尔值更改为true和false

Question

我是websockets的新手，对于我的项目，我正在使用websocket，我想要实现的是有两个水龙头，当用户单击按钮时，蓝色的div将显示给所有连接的用户，如果用户单击停止，红色的div将显示给所有连接的用户。我只能使用服务器将变量display设置为true，但我不能将其设置为false，我认为问题是在服务器端使用我的if语句。

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>

我的Node.js Websocket服务器

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

在收到您的连接消息时，您正在引用此。在回调函数的作用域内创建一个新的变量

标准做法是创建一个self变量并将其设置为方法中的this，然后您可以在回调函数的范围内引用self。

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

编辑我认为把自我放在上面是不正确的。

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