Странное поведение websocket

Question

Я впервые использую эти инструменты, поэтому код может содержать основные c ошибки ...

Вот в чем дело:

В Vue есть веб-розетка . js компонент. Все работало нормально, пока я не пошел дальше и не сделал некоторый рефакторинг. Сервер обрабатывает файлы и отправляет событие каждый раз, когда файл обрабатывается, и каждый раз, когда работа выполняется. Обработка файлов многопоточная, как и запуск событий. Теперь на веб-странице (из того, что я вижу, сервер, по-видимому, корректно генерирует события), веб-сокет, похоже, запускает только первую партию сообщений, затем останавливается и запускает все последние сообщения сразу, когда все сделано.

Итак, вот компонент vue. js (обратите внимание, что есть некоторые неиспользуемые переменные, поскольку я избавился от некоторых функций, пытающихся решить мою проблему):

    Vue.component("card-preset",{
    props: ['preset'],
    data: function() {
        return {
            overlayshow:false,
            show_closeoverlay_button: false,
            title: "",
            max: 0,
            working: 0,
            finished: 0
        }
    },
    methods:{
        startPreset: function() {
            var messageObj = new Object();
            messageObj.action = "start";
            messageObj.type = this.preset.presetCode;
            this.max = 0;
            this.working = 0;
            this.finished = 0;
            this.overlayshow = false;
            this.show_closeoverlay_button=false;
            if(this.preset.webSocket.readyState === WebSocket.OPEN){
                this.preset.webSocket.send(JSON.stringify(messageObj));
            }
        },
        onWsMessage(event) {        
            var message = JSON.parse(event.data);
            //console.log(message);
            if(message.key ==="PRESET_START"){
                this.overlayshow=true;
            } else if (message.key ==="PRESET_DONE"){
                this.show_closeoverlay_button=true;
            } else if(message.key === "LISTFILES"){
              this.setMax(message.indicatorValue);
            } else if(message.key === "STARTREADFILE"){
              this.readFile(message.textLog);
            } else if(message.key === "ENDREADFILE"){
              this.update(message.textLog);
            }
        },
        readFile(strLabel) {
            this.title = strLabel;
            console.log("reading :"+strLabel);
            this.working++;
            this.value++;
        },
        update(strLabel) {
            this.working--;
            this.finished++;
        },
        setMax(intValue) {
            this.max += intValue;
        },
        closeOverlay(){
            this.overlayshow = false;
            this.show_closeoverlay_button = false;
        }
    },
    mounted: function(){
        this.preset.webSocket.addEventListener('message',this.onWsMessage);
    },
    template: 
           `        <b-card
                    :img-src="preset.imgPath"
                    img-top
                    tag="article"
                    style="max-width: 20rem;"
                    class="mb-2 m-1">
                        <b-card-title>{{ preset.name }}</b-card-title>
                        <b-card-text>{{ preset.description }}<hr/>{{title}}</b-card-text>
                        <b-button href="#" variant="primary" v-on:click="startPreset()">{{preset.mainActionName}}</b-button>
                </b-card>   `
});

Vue.component("card-deck", {
        props: ['cards'],
        data: function(){
            return {
                cards:[]
            }
        },
        template:
            `<div>
             <b-card-group>
                <card-preset v-for="item in cards" v-bind:preset="item" v-bind:key="item.presetCode"/>
             </b-card-group>
            </div>`});

The Компонент называется следующим образом:

  <div id="app">
         <card-deck :cards="presetlist"/>
   </div>

И набор пресетов инициализируется следующим образом:

var main = new Vue({
        el:'#app',
        data: function() {
           return {
               host: "localhost",
               port: 85,
               presetlist : []
           }
        },
        mounted: function(){
            $.get("http://"+this.host+":"+this.port+"/presetlist",function(data){ main.loadPresetList(data);} );
        },
        methods: {
            loadPresetList(data) {
                for(const element of data){
                    element.webSocket = new WebSocket("ws://"+this.host+":"+this.port+element.channelPath);
                    element.webSocket.onopen = function(event) {
                        console.log(element.presetCode+" websocket opened!");
                    };
                    element.webSocket.onclose = function(event) {
                        console.log(element.presetCode+" websocket closed.");
                    };
                    element.webSocket.onerror = function(event) {
                        console.log(element.presetCode+" websocket error.");
                        console.log(event);
                    };
                    this.presetlist.push(element);
                }
                console.log("Presets loaded :"+this.presetlist.length);
            }
        }
 });

Я знаю, что здесь много возможных проблем, но если поведение, которое складывает веб-сокет (или блокировать) сообщения в определенной точке), а затем сразу же все они звонят в звонок, это действительно может быть полезно.

Я использую: Vue. js, bootstrapvue, веб-сервер загружен.

Я пробовал на chrome и firefox и получил ту же проблему.

Спасибо