angular - 套接字io在重载时创建多个连接

Question

我正在尝试将套接字io推送日志发送到客户端UI。
这是 Angular 2中的代码

ngAfterViewInit(){
this.socket=io('http://localhost:9999')
    this.socket.on('send-log-data-'+this.labName,function(data){
                this.loaddata(data)
}.bind(this))
}
@HostListener('window:beforeunload', ['$event'])
doSomething($event) {
// if(this.hasChanges) $event.returnValue='Your data will be lost!';
this.socket.emit('disconnect',"")
}
}

查看服务器端后，我可以在每次重新加载网页时看到创建两个新连接，并且关闭一个连接。

第一次重装

new connection made
new connection made
Reloading
Reloading
disonnect request came.Disconnecting

二次装弹

Reloading
new connection made
new connection made
new connection made
new connection made
Reloading
Reloading
disonnect request came.Disconnecting
disonnect request came.Disconnecting

要求的服务器端代码是

    var Tail=require('tail').Tail
module.exports = {

io_connect_disconnect : (labName,io) => {

io.on('connection',function(socket){
    console.log("new connection made")
        filename="output.log"
    var options= {fromBeginning: true}
    tail = new Tail(filename,options)

    console.log("new connection made")
    tail.on("line", function(data) {
        console.log("triggering")
        console.log(data)
io.sockets.emit('send-log-data-'+labName,data)
})
socket.on('disconnect',function(){
    tail.unwatch()
    console.log("disonnect request came.Disconnecting")
    socket.disconnect();
})
})
}
}

有人能帮助我解决这种奇怪的情况吗？

Answer 1

问题在于，每次重新加载页面时，您都在注册一个新的事件处理程序。这将导致数据被发送多次。我遇到了同样的问题，并且通过在服务器中使用io.once()而不是io.on()解决了问题。

io.once('connection',function(socket){
console.log("new connection made")
...
}

这将导致连接监听器在被调用后立即被注销，并且数据仅发送一次。