Implementing notification system in VtigerCRM using Websockets and Vue.js

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!


Popular Posts

My most popular posts

Maximum productivity on remote job

Maximum productivity on remote job

I started my own business and intentionally did my best to work from anywhere in the world. Sometimes I sit with my office with a large 27-inch monitor in my apartment in Cheboksary. Sometimes I’m in the office or in some cafe in another city.

Hello! I am Sergey Emelyanov and I am hardworker
Business PHP

Hello! I am Sergey Emelyanov and I am hardworker

I am a programmer. I am an entrepreneur in my heart. I started making money from the age of 11, in the harsh 90s, handing over glassware to a local store and exchanging it for sweets. I earned so much that was enough for various snacks.

Hire Professional CRM developer for $25 per hour

I will make time for your project. Knowledge of Vtiger CRM, SuiteCRM, Laravel, and Vue.js. I offer cooperation options that will help you take advantage of external experience, optimize costs and reduce risks. Full transparency of all stages of work and accounting for time costs. Pay only development working hours after accepting the task. Accept PayPal and Payoneer payment systems. How to hire professional developer? Just fill in the form