Nodejs Angular2和套接字的异常行为

Question

我有一个小应用程序，它使用Nodejs，Angular 2和socket.io。我有一个控制器在连接时通过套接字获取对象数组：

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: '/templates/public.html'
})

export class AppComponent 
{
    public photos: Object[];
    socket = null;

    constructor(){
        var t = this;
        this.socket = io('/public');
        this.socket.on('gallery-listing', function(data) {
            t.photos = data; console.log(data);
        }.bind(this))
    }
}

发送数据的服务器代码

// Sort picture by time
pictures.sort(function(a,b){
    return b.time - a.time;
});

// Emit the result to the socket
socket.emit('gallery-listing', pictures);

我确切地说对象提供图片细节并包含四个键

所以这就是问题：当我用15张照片测试我的应用程序时，一切都很好。但我尝试了249张图片和我的socket.on（＆＃39; gallery-listing＆＃39;）事件监听器被触发124次：第一次使用125个对象的数组，然后每次再次调用它数组长度增加。第二个调用得到一个126对象的数组，第三个调用得到127个对象的数组...直到最后，第249个包含249个对象的数组，如你在chrome开发工具的图片上看到的那样：

所有控制台都是由我的

中的console.log生成的

this.socket.on('gallery-listing', callback)

当然，这应该发生一次。基本上，由于它加载并设置为20000个对象而不是249个对象，因此浪费性能和品牌宽度。原因是什么？