javascript - 如果我将套接字连接分配给属性，将事件侦听器应用于该属性，然后分配另一个套接字，侦听器是否仍然有效？

Question

在下面的代码中，我在 上创建一个套接字连接mounted()，并将其分配给socket属性，然后创建一个this.socket.on侦听器来侦听messageToClient来自服务器的事件。

如果我要更改分配给this.socket使用@click事件的套接字div，是否会开始在新套接字上this.socket.on('messageToClient', (message) => {})侦听事件？messageToClient或者它会继续监听messageToClient旧的原始套接字上的事件吗？

<template>
    <div @click="socket = io('http://localhost:3000/test2')"></div>
</template>

<script>
export default {
    data(){
        return {
            socket: ''
        }
    },
    mounted(){
        this.socket = io('http://localhost:3000/test1')

        this.socket.on('messageToClient', (message) => {
            console.log(message)
        })

    }
}
</script>

标签： javascriptvue.jsvuejs2socket.io

Answer 1

socket不，在-handler中新创建的click不会自动监听事件，所以处理程序应该设置新的socket. 您可以声明一个创建和初始化 的方法socket，然后从 -handler 调用相同的mounted()方法click：

<template>
  <div @click="setupSocket('http://localhost:30000/test2')">Setup socket</div>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
    }
  },
  mounted() {
    this.setupSocket('http://localhost:30000/test1')
  },
  methods: {
    setupSocket(url) {
      this.socket = io(url)
      this.socket.on(...)
    }
  },
}
</script>