Implementing notification system in VtigerCRM using Websockets and Vue.js

Today we will try to do something unusual and reactive at the same time. We will implement a notification system for VtigerCRM. And we will implement this, relying on our previous knowledge - message system on RabbitMQ, skills of working with Vue.js. For a complete picture, we just need to connect to the Websocket server and display the received notifications for users in a beautiful form.

Why do we need a notification system?

In the video attached to this article, I will show the simplest example. We will notify users in real time that there has been a change in the records in which assigned to. For example, we will implement this functionality with the "Leads" module.

What else can be done using this technology stack?

The set of functionality is very large:

• Display the appearance of new records in the table.
• Show comments without having to reload the page.
• Implement a chat between users.
• Build interactive charts that will refresh data without having to reload the page

As I wrote above, in order to implement all of the above, we need to connect RabbitMQ system in Vtiger, where we will send information about the events that have occurred and Vue.js to add reactivity.

Therefore, before watching this video, I recommend taking my course "Asynchronous Vtiger" and a separate video on how to connect Vue.js to Vtiger

So, how will the implementation of the notification system take place:

1. First, we need to notify third-party systems that an update or record has been created. We will use RabbitMQ for this. We will notify the queue that a record change has occurred.
2. We will install the Websocket server on Node.js (fortunately, we already installed it when connecting Vue.js) and implement an event listener in RabbitMQ.
3. As soon as we receive a message from RabbitMQ, we will send it to our recipients according to the logic we set.
4. After sending messages to recipients, the information will come directly to Vue.js, where, using special libraries, we will display a beautiful popup to users.

As you can see, everything is pretty simple. In this video, we'll just put everything together that we already knew before and add some new information. Let's code with me!