Vue - Оптимальный способ получения уведомлений от back-end

Я добавляю уведомления, отправляемые с бэкенда, в свое приложение Vue 3.

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

Я пытаюсь решить, какой способ получения таких уведомлений лучше для front-end. В основном, я разрываюсь между двумя вариантами:

  • использовать опрос; что-то вроде setInterval в 20 секунд, который просто делает REST-вызов для получения последних уведомлений для пользователя
  • открыть вебсокет; сервер отправляет сообщение каждый раз, когда появляется новое уведомление

Я склоняюсь немного больше к варианту websocket; однако меня беспокоит следующее:

  1. сложность: необходимость управлять повторными соединениями и всем тем, что может пойти не так с WS
  2. производительность: Я прогнозирую пики в 200-300 пользователей одновременно; является ли наличие такого количества открытых WS-соединений возможной проблемой?

Взвесив эти факторы, какой из них был бы лучшим выбором для моих нужд? И как бы вы смягчили недостатки выбранного подхода?

На мой взгляд, лучшим решением для системы уведомлений будет использование WebScokets, таких как socket.io. Если использовать HTTP-запросы, то сервер будет получать около 300 запросов одновременно каждые несколько десятков секунд, что может утомлять сервер. При этом большинство запросов могут быть не нужны (пользователь не получил никаких уведомлений). Используя сокеты, сервер будет посылать уведомление клиенту только тогда, когда получит уведомление. Еще одним преимуществом сокетов является то, что уведомление будет приходить немедленно, а не через каждый заданный интервал времени. Итак, подведем итоги:

Преимущества WebSockets для системы уведомлений:

  • Меньшая нагрузка на сервер и более эффективная работа (гораздо лучшая производительность)
  • Более комплексная система уведомлений
  • Возможность последующего расширения другими данными "server push"

Недостатки:

<

WebSocket - лучшее решение в вашем случае. Я использовал плагин vue-native-websocket.

Вернуться на верх