@webdevep/noty-modul-vue NPM

Фронтенд модуль нотификации

Ссылка на модуль https://modules.dev-webdevep.ru/noty-front-moduls/

Установка npm модуля

Для установки через npm, выполните команду:

npm i @webdevep/noty-modul-vue

Работа с модулем

import { doNoty } from "@webdevep/noty-modul-vue";

doNoty.success("Success message");
doNoty.error("Error message");
doNoty.warning("Warning message");
doNoty.info("Info message");

Использование модуля в компонентах:

<template>
  <button @click="$doNoty.success('Message');">Notify</button>
</template>

Получение уведомлений вебсокетов (vuex store)

// store/index.js
//...
import { getNotification } from "@webdevep/noty-modul-vue";

const store = createStore({
  modules: {
    notification: getNotification(notificationsApiUrl, notificationsWsUrl),
  },
});

// App.vue
//...
async function initMessages() {
  await store.dispatch("notification/init");
  await store.dispatch("notification/getUnreadMessagesCount");
};

initMessages();

Получение уведомлений вебсокетов (pinia)

// store/index.js
//...
import { getNotificationPinia } from "@webdevep/noty-modul-vue";
import { ref } from "vue";

export const useNotificationStore = defineStore("notification", getNotificationPinia({ apiUrl, notificationsUrl, vueRef: ref }));

// App.vue
//...
const notificationStore = useNotificationStore();
async function initMessages() {
  await notificationStore.init();
  await notificationStore.getUnreadMessagesCount();
};

initMessages();

Получение уведомлений вебсокетов (class)

// store/index.js
//...
import { NotificationModule } from "@webdevep/noty-modul-vue";

const notificationModule =  new NotificationModule(notificationsApiUrl, notificationsWsUrl);

// App.vue
//...
async function initMessages() {
  await notificationModule.init();
  await notificationModule.getUnreadMessagesCount();
};

initMessages();

Методы модуля

constructor(apiUrl, notificationsUrl)
async init() - Инициализация модуля
async getUnreadMessagesCount(): number - Возвращает количество непрочитанных уведомлений
async getInboxMessages({ outputMessages = true, unreadOnly = true, displayNotifications = true }): array - Обновляет список уведомлений и возвращает его
outputMessages - если true полученные уведомления выводятся с помощью doNotymessage.sub, либо doNoty.info
async markMessageRead(data) - Отмечает уведомление просмотренным

Свойства модуля

notificationsUrl - string
notificationApi - экземпляр NotificationApi
ws - экземпляр WS
unreadMessagesCount - number количество непрочитанных сообщений
inboxMessages - array список сообщений, полученных с помощью метода getInboxMessages

класс `NotificationApi`

constructor(apiUrl) - promise
getUnreadMessagesCount(data) - promise
getInboxMessages(data) - promise
markMessageRead(data) - promise

класс `WS`

Класс наследует EventTarget

constructor(wsUrl, accessToken) -
connect(): promise - инициализация, работа с сокетом

События `WS`

Для обработки событий использовать методы EventTarget

Сообщение с type === "inbox" - генерируется событие "notification:new_inbox_message"
Сообщение с type === "msg" и прочими - генерируется событие (message.sub || message.type || "info")