如何在 vuejs 项目中放置服务器操作侦听器？

Question

我正在尝试使用 vuejs 和 socketio 制作一个简单的聊天应用程序。 我想从一个用户向所有其他用户广播一条消息。 我在服务器端有以下代码来做到这一点：

io.on('connection', socket => {
    socket.on('send-message', message => {
        console.log('message sent: ' + message)
        socket.broadcast.emit('receive-message', message)
    })
})

在客户端，我正在通过这种方法收听该操作：

this.socket.on('receive-message', message => {
        this.createMessageHtmlElement(message)
      })

我很难知道在哪里放置该方法。 放入mounted() 或created() 会使其被一遍又一遍地调用。 我只想在服务器实际发送消息时调用它。
在 vuejs 项目中放置服务器操作侦听器的正确方法是什么？

Answer 1

放入mounted() 或created() 会使其被一遍又一遍地调用。

this.socket.on是document.addEventListener （ docs ）的“套接字版本”，因此，您将设置一个 function （回调），将在某个事件发生时执行（在您的情况下receive-message ）。 根据createMessageHtmlElement的实际作用，您可以将this.socket.on放在created()或mounted()中。 假设您有一个简单的应用程序，最好的地方可能是App.vue ，因为在注册App.vue时将注册侦听器（ Vue 生命周期）