Внедряем систему уведомлений в VtigerCRM с помощью Websockets и Vue.js

Сегодня мы попробуем сделать что-то необячное и реактивное одновременно. Мы внедрим систему уведомлений для VtigerCRM. И реализуем мы это, опираясь на наши предыдущие знания - систему сообщений на RabbitMQ, навыках работы с Vue.js. Для полной картины нам остаётся только подключиться к Websocket серверу и в красивой форму отображаться полученные уведоиления пользователям.

Для чего нам может понадобиться система уведомлений?

В видео, прикреплённым к данной статье я покажу простейший пример. Мы будем уведомлять пользователей в режиме реального времени о том, что произошло изменение тех записей, в которых он назначен ответственным. Для примера мы реализуем этот функционал с модулем "Обращения".

Что ещё можно реализовать с использованием этого стека технологий?

Набор функционала очень большой:

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

Как я уже писал выше, чтобы реализовать всё вышеописанное, нам потребуется подключить к Vtiger систему очередей RabbitMQ, куда мы будем отправлять информацию о произошедших событиях и Vue.js, для добавления настоящий реактивности.

Поэтому, перед просмотром данного видео, рекомендую пройти мой курс "Асинхронный Vtiger" и отдельное видео о том, как подключить Vue.js к Vtiger

Итак, как будет происходить внедрение системы уведомлений:

1. Для начала нам нужно уведомить сторонние системы о том, что произошло обновление или создание записи. Для этого мы будем использовать RabbitMQ. Мы будем уведомлять очередь о том, что произошло изменение записи.
2. Мы установим Websocket сервер на Node.js (к счастью, мы его уже установили при подключении Vue.js) и реализуем прослушку событий в RabbitMQ.
3. Как только мы получим сообщение из RabbitMQ, мы по заданной нами логике будем высылать его нашим получателям.
4. После отправки сообщений получателям, информация будет приходить непосредственно во Vue.js, где с помощью уже готовых библиотек мы будем выводить красивое окошко пользователям.

Как видите, всё довольно просто. В этом видео мы просто соберём всё воедино, что уже знали до этого и добавим немного новой информации. Приятного просмотра!