Всем привет. Написал на js учебное приложение, которое сканирует сеть на предмет открытых websocket соединений, получает данные и визуализирует их. Работает так: сканируется сеть, если есть открытое websocket соединение c readyState === 1, создается инстанст класса CreateDataCard в этом инстансе создается инстанс класса CreateViewCard. Ну и на выходе получаем столько карточек с данными, сколько открыто websocket соединений, ну и соответственно у каждой карточки свои данные и свое представление. Как такое же реализовать на Vue? Ведь у Vue одна data на все приложение.
Дмитрий, да как угодно. В вопросе не описаны детали. Допустим, сканируете все 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 с установленным соединением и работает с ним.
При чём тут ООП?
JS поддерживает классы. Создай сколько хочешь, инстанциируй объекты сколько влезет.
Vue - это фреймворк, написанный на js, представляющий возможности создания реактивных ui-компонентов с поддержкой темплейтов.
Вот тебе инструменты, дальше - как захочешь.
Хочешь, хоть на каждый класс со своими сокетами создавай инстанс нового Vue app.
Не хочешь - просто обновляй своими объектами реактивную модель Vue (надеюсь Vue 3 используешь?). Классы отдельно (модель), Vue отдельно (view). Подключаешь модель в Vue-компонент и получаешь правильно разделенный функционал. Завтра эту же модель взял и вместо Vue к реакту прицепил.
Вообще ООП придуман не для того, чтобы создать 1-2 класса и везде писать, что "я пишу на ООП". ООП помогает решать класс задач, где есть абстракции близкие к физическому миру (объекты), у которых есть набор свойств и действий над ними, где объекты имеют много общего, но ведут себя часто по-разному. Для таких задач ООП даёт целый ряд крутых возможностей вытекающих из наследования и полиморфизма.
В задаче, которую ты описал, ООП как бы притянут "ну чтобы было". Одно дело, когда привык на каждую мелочь рисовать класс. Другое дело, когда за неимением четкого понимания "что я делаю" рисую классы потому что "так круто вроде".
Есть целый ряд задач, который проще и оптимальнее решается функциональным программированием (часто это асинхронные потоки, см rxjs, но не только они).
Комплексная задача часто включает гибридную модель, где классы описывают сложные абстракции, о которых легче думать как об объектах, но в имплементации некоторых методов внутри класса (а может и главный алгоритм снаружи класса) используется чистый функциональный подход.
Дмитрий, сорри, я должен был понять из самой формулировки вопроса "как реализовать ООП на Vue", что автор, скорее всего, не понимает ни в ООП, ни в Vue. Но что-то пошло не так и я написал слишком сложный ответ, непосильный для осмысления автором. Каюсь. Правильно отвечали выше: разберись с props и компонентами в Vue. Я лишь могу добавить: "разберись с ООП", хотя и понимаю, что это слишком сложно.
mav-rik, Ответы мне уже написали адекватные люди выше. А к чему твой малограмотный словесный понос из неточных определений что такое ООП и Vue - непонятно.
Дмитрий, я, наверное, был таким же обидчивым в подростковом возрасте.
Я не писал определение ООП, я описал ряд задач, для которых ООП хорошо подходит. Дашь лучше определение для Vue? - welcome. Если видишь неточность, укажи конкретно и поправь. Все те мерзкие эпитеты, которые ты используешь, чтобы выразить свою обиду и убедить кого-то, что ты большой и умный мальчик, не добавляют смысла в твою речь. Если есть возражения по теме, пожалуйста, пиши.
А вообще обижаться в данном случае - глупо. Это тебе нужна помощь, это ты задал вопрос, это у тебя возникли проблемы с пониманием как решить твою задачу. Дальше либо ты принимаешь советы, либо нет. Ничего обидного я не написал.
Конечно, ты, как начинающий "фронтендер" не можешь знать и понимать многие вещи и это нормально. Все мы учимся. Вырастешь поймёшь.
data основного Vue инстанса будет содержать массив объектов данных обнаруженных сокетов.
Из этого массива рендерить список компонентов представления сокета.
Разберитесь с компонентами во Vue. Хотя может, получится обойтись просто строками HTML списка.
Хороший заезженный пример для похожей задачи — Todo App
Дмитрий, вероятно, я не понял проблемы из вопроса. Что именно у вас не получается?
Создать класс – чего, какой сути приложения? Сложить инстансы класса в массив? Передать через пропсы Vue в компонент не примитив, а объект?
Сергей Соколов, Давайте на вашем todo листе попробую объяснить: Как создать 50 todo листов на одной странице не создавая 50 раз один и тот же код? Я просто хочу сделать 50 раз new ToDoList() только во Vue.
Сергей Соколов, Ок, еще раз, классическая задача которую решает ООП: Я хочу создать на странице 50 todo листов, в каждом из которых я смогу создавать сколь угодное количество задач
Дмитрий, нашли сокет – положили инстанс объекта в массив в data.
В темплейте у вас цикл, который для каждого элемента массива рендерит инстанс Компонента.
Объект передаёте в Компонент через props.
Дмитрий, Vue это UI фреймворк, основную логику обычно выносят в сервисы. В 3.2 версии, если использовать новый script setup синтаксис, импортируя необходимые сервисы код становится более прозрачным и читаемым.
А вообще никто не мешает вам передавать в качестве props из компонента в компонент объекты определённой вами структуры.
