Как реализовать ООП на VUE?

Question

[Дмитрий]

Всем привет. Написал на js учебное приложение, которое сканирует сеть на предмет открытых websocket соединений, получает данные и визуализирует их. Работает так: сканируется сеть, если есть открытое websocket соединение c readyState === 1, создается инстанст класса CreateDataCard в этом инстансе создается инстанс класса CreateViewCard. Ну и на выходе получаем столько карточек с данными, сколько открыто websocket соединений, ну и соответственно у каждой карточки свои данные и свое представление. Как такое же реализовать на Vue? Ведь у Vue одна data на все приложение.

Comments

[Сергей Соколов]

создается инстанст класса CreateDataCard
в этом инстансе создается инстанс класса CreateViewCard

Для чего такая вложенность?

[Дмитрий]

Сергей Соколов, А как вы предлагаете работать с websocket серверами?

[Сергей Соколов]

Дмитрий, да как угодно. В вопросе не описаны детали. Допустим, сканируете все IP подсети и все порты. В цикле создаёте очередной инстанс класса, который создаёт новый WS и ломится по очередному адресу. Тикает таймаут, слушаются события. Если подключился - ура - нашли пару IP:port. Положили в массив в data. Отобразился ещё один элемент списка.

[Дмитрий]

Сергей Соколов, Одно websocket соединение - это один инстанс CreateDataCardи один инстанс CreateViewCard, в которых происходит обработка событий websocket(onmessage, onclose и т.д.) запрос данных ws.send и их отрисовка. Если вы знаете как более оптимально с этим всем работать - буду рад почитать.

[Сергей Соколов]

Дмитрий, с очередным сокетом вам же надо только понять, установилось ли соединение, или нет — и всё?
Я бы разделил задачи: Поиск сокетов и отображение.
Класс для поиска – при создании получает адрес-порт, которые пробовать, и коллбек, куда отдать результат. Хотя тут не нужен класс, больше подходит Promise:

const makePortScanner = (address, port) => new Promise((resolve, reject) => {
  const ws = new WebSocket(`ws://${address}:${port}`);
  ws.onopen = () => {
    ws.close();
    resolve([address, port]);
  };
  ws.onclose = () => {
    reject("no connection");
  }
});

const found = []; // сюда складывать найденные

// TODO: продумать логику пула задач,
// одновременно не более N параллельных попыток
for (let octet = 0x0; octet < 0xFF; octet++) { // не запускать так!
  for (let port = 1024; port < 9000; port++) {
    makePortScanner(`192.168.1.${octet}`, port)
      .then((pair) => found.push(pair))
      .catch((err) => void err)
      .finally(() => {
        // TODO: тут создаётся следующий Promise
      }
  }
}

Примерно так, только надо не сразу весь диапазон зарядить, а умно, не более 10 скажем одновременных — в finally() создавать следующую задачу.

[Сергей Соколов]

Так идёт поиск открытых сокетов в сети в заданном диапазоне.
Процесс долгий, и можно показывать его сразу, динамически, по мере нахождения.
Вместо статичного массива found пихать прямо в data.found основного инстанса Vue.

[Дмитрий]

Сергей Соколов,

с очередным сокетом вам же надо только понять, установилось ли соединение, или нет — и всё?

Ну естественно нет, я же все описал. Каждое websocket соединение - это отдельная каточка на странице, со своими данными, управлением и т.д.

Вот тут каждая карточка - это открытое websocket соединение, данные мелким шрифтом обновляются и перерисовываются каждые 0.5 сек.

[Сергей Соколов]

Дмитрий, ага, понял.
Можно разделить так:
Простой объект с WebSocket соединением – он может соединится, а может нет.
Если соединился — его класть в массив, из которого он реактивно попадает в созданный для него инстанс Компонента. Это уже вот карточка со всей логикой управления.
Компонент-Карточка получает через props объект WS с установленным соединением и работает с ним.

[mav-rik]

При чём тут ООП?
JS поддерживает классы. Создай сколько хочешь, инстанциируй объекты сколько влезет.
Vue - это фреймворк, написанный на js, представляющий возможности создания реактивных ui-компонентов с поддержкой темплейтов.
Вот тебе инструменты, дальше - как захочешь.
Хочешь, хоть на каждый класс со своими сокетами создавай инстанс нового Vue app.
Не хочешь - просто обновляй своими объектами реактивную модель Vue (надеюсь Vue 3 используешь?). Классы отдельно (модель), Vue отдельно (view). Подключаешь модель в Vue-компонент и получаешь правильно разделенный функционал. Завтра эту же модель взял и вместо Vue к реакту прицепил.
Вообще ООП придуман не для того, чтобы создать 1-2 класса и везде писать, что "я пишу на ООП". ООП помогает решать класс задач, где есть абстракции близкие к физическому миру (объекты), у которых есть набор свойств и действий над ними, где объекты имеют много общего, но ведут себя часто по-разному. Для таких задач ООП даёт целый ряд крутых возможностей вытекающих из наследования и полиморфизма.
В задаче, которую ты описал, ООП как бы притянут "ну чтобы было". Одно дело, когда привык на каждую мелочь рисовать класс. Другое дело, когда за неимением четкого понимания "что я делаю" рисую классы потому что "так круто вроде".
Есть целый ряд задач, который проще и оптимальнее решается функциональным программированием (часто это асинхронные потоки, см rxjs, но не только они).
Комплексная задача часто включает гибридную модель, где классы описывают сложные абстракции, о которых легче думать как об объектах, но в имплементации некоторых методов внутри класса (а может и главный алгоритм снаружи класса) используется чистый функциональный подход.

[Дмитрий]

mav-rik, вот это высер, с бодуна что ли?

[mav-rik]

Дмитрий, сорри, я должен был понять из самой формулировки вопроса "как реализовать ООП на Vue", что автор, скорее всего, не понимает ни в ООП, ни в Vue. Но что-то пошло не так и я написал слишком сложный ответ, непосильный для осмысления автором. Каюсь. Правильно отвечали выше: разберись с props и компонентами в Vue. Я лишь могу добавить: "разберись с ООП", хотя и понимаю, что это слишком сложно.

[Дмитрий]

mav-rik, Ответы мне уже написали адекватные люди выше. А к чему твой малограмотный словесный понос из неточных определений что такое ООП и Vue - непонятно.

[mav-rik]

Дмитрий, я, наверное, был таким же обидчивым в подростковом возрасте.
Я не писал определение ООП, я описал ряд задач, для которых ООП хорошо подходит. Дашь лучше определение для Vue? - welcome. Если видишь неточность, укажи конкретно и поправь. Все те мерзкие эпитеты, которые ты используешь, чтобы выразить свою обиду и убедить кого-то, что ты большой и умный мальчик, не добавляют смысла в твою речь. Если есть возражения по теме, пожалуйста, пиши.
А вообще обижаться в данном случае - глупо. Это тебе нужна помощь, это ты задал вопрос, это у тебя возникли проблемы с пониманием как решить твою задачу. Дальше либо ты принимаешь советы, либо нет. Ничего обидного я не написал.
Конечно, ты, как начинающий "фронтендер" не можешь знать и понимать многие вещи и это нормально. Все мы учимся. Вырастешь поймёшь.

Answer 1

[Сергей Соколов]

data основного Vue инстанса будет содержать массив объектов данных обнаруженных сокетов.
Из этого массива рендерить список компонентов представления сокета.

Разберитесь с компонентами во Vue. Хотя может, получится обойтись просто строками HTML списка.

Хороший заезженный пример для похожей задачи — Todo App

Comments

[Дмитрий]

Вы кажется вообще не поняли о чем речь. Причем тут todo лист и где там реализация классов и их инстансов?

[Сергей Соколов]

Дмитрий, вероятно, я не понял проблемы из вопроса. Что именно у вас не получается?
Создать класс – чего, какой сути приложения? Сложить инстансы класса в массив? Передать через пропсы Vue в компонент не примитив, а объект?

[Дмитрий]

Сергей Соколов, Давайте на вашем todo листе попробую объяснить: Как создать 50 todo листов на одной странице не создавая 50 раз один и тот же код? Я просто хочу сделать 50 раз new ToDoList() только во Vue.

[Сергей Соколов]

Дмитрий, не понял, для чего нужен массив-массивов (список-списков), если вроде бы, задача одного списка. Не 50 листов, а 50 задач в одном листе. Не?

[Дмитрий]

Сергей Соколов, Ок, еще раз, классическая задача которую решает ООП: Я хочу создать на странице 50 todo листов, в каждом из которых я смогу создавать сколь угодное количество задач

[Сергей Соколов]

Дмитрий, ответ: компоненты.

[Сергей Соколов]

Дмитрий, нашли сокет – положили инстанс объекта в массив в data.
В темплейте у вас цикл, который для каждого элемента массива рендерит инстанс Компонента.
Объект передаёте в Компонент через props.

[Дмитрий]

Сергей Соколов, Попробую.

Answer 2

[Роман Ямчук]

https://class-component.vuejs.org/

Comments

[Дмитрий]

Спасибо, посмотрю. А нативно во vue получается ооп нет?

[Роман Ямчук]

Дмитрий, Vue это UI фреймворк, основную логику обычно выносят в сервисы. В 3.2 версии, если использовать новый script setup синтаксис, импортируя необходимые сервисы код становится более прозрачным и читаемым.

А вообще никто не мешает вам передавать в качестве props из компонента в компонент объекты определённой вами структуры.