Моя цель - открыть веб-сокет и получить соответствующие данные, которые возвращаются.До сих пор я успешно выполнял первые пару запросов, которые мне нужно сделать, чтобы затем иметь возможность делать последующие запросы (API, из которого я берусь, требует, чтобы вы запрашивали определенные данные по порядку).
// dashboard component (parent)
<div class="dashboard">
<header class="dashboard-header">
<div class="dashboard-header__title">{{dashboardTitle}}</div>
<div class="dashboard-header__controls">
<select class="dashboard-header__select-dashboard" v- model="selectedDashboard" @change="getHosts">
<option
class="dashboard-header__select-dashboard-option"
:value="dashboard"
v-for="dashboard in dashboards"
:key="dashboard.key">
{{dashboard}}
</option>
</select>
</div>
</header>
<host
:host-name="host"
:dkrmonWs="dkrmonWs"
:selected-dashboard="selectedDashboard"
:host-health="hostHealth"
containerTitle="Container"
v-for="host in hosts" :key="host.key">
</host>
</div>
<script>
import host from './host.vue'
export default {
name: 'dashboard',
data() {
return {
dkrmonWs: {},
dkrmonApi: 'wss://api.io:8000',
selectedDashboard: '',
dashboards: [],
hosts: [],
hostHealth: false
}
},
created() {
// allows function calls inside if statement
var that = this;
// Create the websocket
this.dkrmonWs = new WebSocket(this.dkrmonApi);
console.log('Created', this.dkrmonWs);
// Receives message from server. Parses it. Checks conditions.
this.dkrmonWs.onmessage = function(e) {
var response = JSON.parse(e.data)
console.log('Received Data:', response.responseData);
// Checks the request
switch (response.requestData.request) {
case 'getDashboards':
console.log('**Populate Dashboards**');
that.populateDashboard(response);
break;
case 'getHosts':
console.log('**Populate Hosts**');
that.populateHosts(response);
break;
case 'agentHealth':
console.log('Received Agent Health', response);
console.log('I am updating', response.requestData.host, response.responseData.data);
// assign the response data to the hostHealth data property
this.hostHealth = response.responseData.data;
break;
}
}
// When the websocket has opened...
this.dkrmonWs.onopen = () => {
console.log('Websocket Opened!');
// Sends request when Websocket opens to get Dashboards
var getDashboards = {
'request': 'getDashboards'
};
// Log the request
console.log('Sending Data to GET DASHBOARDS ', getDashboards);
// Stringify for server
var dashboardsRequest = JSON.stringify(getDashboards)
// send the request
this.dkrmonWs.send(dashboardsRequest);
}
},
methods: {
getHosts() {
// Build the request for Hosts
var getHost = {
'request': 'getHosts',
'dashboard': this.selectedDashboard
};
// Log the request
console.log('Sending Data to GET HOSTS', getHost);
// Stringify for server
var hostRequest = JSON.stringify(getHost);
// Send the request
this.dkrmonWs.send(hostRequest);
},
populateDashboard(response) {
// Assisgning Dashboard object to vue data property (to be used in for loop)
console.log('Building Dashboards with ', response.responseData.data);
this.dashboards = response.responseData.data
},
populateHosts(response) {
// Assigning Hosts object to vue data property (to be used in for loop)
console.log('Building Hosts with', response.responseData.data);
this.hosts = response.responseData.data
}
},
components: {
host
},
props: {
dashboardTitle: String
}
}
</script>
Это мой родитель - dashboard.vue, а мой ребенок - host.vue.Я получаю данные сводная панель , а затем данные для каждого хоста в зависимости от панели, которую пользователь выбирает из раскрывающегося списка.Это пока работает, как задумано.Проблема, когда я делаю запрос на здоровье хоста .Я делаю запрос и получаю ответ, как раньше.Ведение журнала работоспособности хоста в консоли Я получаю верные данные.Это отлично.Я не могу связать данные с правильным значением (возвращаемые данные являются логическими значениями).Я использую опору, чтобы отображать состояние host в компоненте host .Но я не уверен, как нацелиться на конкретный хост и привязать его значение к себе.Похоже, веб-сокет просто отправляет обратно 3 логических значения без отношения к каждому хосту.
Как вы можете заметить, я использую цикл for для отображения моих хостов на экране.Я использую 1 on.message для своей веб-розетки.Должен ли я реализовать несколько веб-сокетов для разных компонентов, чтобы я мог знать, что всегда получу ответ, который мне нужен?Когда я впервые пытался заставить это работать, {{hostHealth}} отображался 3 раза (3 хоста отображались из цикла for), но только последний был установлен в значение true.Другие 2 были такими, какими я установил свойство данных в компоненте.
// host component (child)
<template>
<div class="host">
<h2 class="host__title">{{hostName}}</h2>
<div class="host__health">{{hostHealth}}</div>
<div class="host__containers">
<div class="host__containers-header">
<div class="host__containers-title">{{containerTitle}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'host',
data() {
return {
images: [],
containers: [],
volumes: []
}
},
props: {
hostName: String,
containerTitle: String,
selectedDashboard: String,
dkrmonWs: {},
hostHealth: Boolean
},
created() {
// allows function calls inside if statement
var that = this;
// log some details
console.log('hostName:', this.hostName, '!', 'containerTitle:', this.containerTitle, '!', 'selectedDashboard:', this.selectedDashboard, '!', 'dkrmonWs:', this.dkrmonWs);
// call method
this.getAgentHealth();
},
methods: {
getAgentHealth() {
// Build the request for Agent Health
var healthObject = {
'request': 'agentHealth',
'dashboard': this.selectedDashboard,
'host': this.hostName
};
console.log('Sending Data to GET AGENT HEALTH', healthObject);
var healthRequest = JSON.stringify(healthObject);
//send request
this.dkrmonWs.send(healthRequest);
}
}
}
</script>
Любая помощь будет оценена.Чтобы быть ясно .Я знаком с реквизитом и провел много часов за чтением, но, похоже, что-то упустил что-то очень очевидное, или моя базовая структура приложения нуждается в переосмыслении.