Echtzeit-Benachrichtigungen in VtigerCRM mit WebSockets und Vue.js

Echtzeit-Benachrichtigungen in VtigerCRM mit WebSockets und Vue.js

In diesem Artikel kombiniere ich drei Schlüsseltechnologien – RabbitMQ, WebSockets und Vue.js –, um ein reaktives Benachrichtigungssystem in VtigerCRM zu implementieren. Sie lernen, wie Sie Nutzer in Echtzeit über Änderungen an zugewiesenen Datensätzen informieren – ohne Page-Reloads!

Anwendungsfälle

Das System eignet sich für:

1. Live-Updates bei neuen Tickets oder Kommentaren.
2. Chat-Funktionen zwischen Benutzern.
3. Dynamische Dashboards (z. B. aktualisierte Verkaufsdiagramme).
4. Collaborative Editing (Sperren von Datensätzen bei paralleler Bearbeitung).

Architektur-Überblick

1. Vtiger publiziert Events (z. B. „Ticket aktualisiert“) an RabbitMQ.
2. Ein Node.js-WebSocket-Server abonniert die Queue und leitet Events an Clients weiter.
3. Die Vue.js-UI empfängt Updates via WebSocket und zeigt Benachrichtigungen an.

Schritt 1: Events in RabbitMQ publizieren

Erweitern Sie Ihr Vtiger-Modul (z. B. HelpDesk), um Änderungen an RabbitMQ zu senden:

// vtiger/modules/HelpDesk/HelpDesk.php  
public function save() {  
    parent::save();  

    // Event an RabbitMQ senden  
    $message = [  
        'event' => 'ticket_updated',  
        'ticket_id' => $this->getId(),  
        'assigned_user_id' => $this->get('assigned_user_id'),  
        'changes' => $this->getModifiedFields()  
    ];  

    $connection = new AMQPStreamConnection('localhost', 5672, 'user', 'pass');  
    $channel = $connection->channel();  
    $channel->basic_publish(  
        new AMQPMessage(json_encode($message)),  
        'vtiger_events',  
        'notifications'  
    );  
    $channel->close();  
}  

Schritt 2: WebSocket-Server erstellen (Node.js)

Installieren Sie erforderliche Pakete:
npm install ws amqplib

Implementieren Sie den Server (`server.js`):

const WebSocket = require('ws');  
const amqp = require('amqplib');  

const wss = new WebSocket.Server({ port: 8080 });  

// RabbitMQ verbinden  
amqp.connect('amqp://localhost').then(connection => {  
  return connection.createChannel().then(channel => {  
    channel.assertQueue('notifications', { durable: true });  

    // Nachrichten an alle WebSocket-Clients senden  
    channel.consume('notifications', (msg) => {  
      const message = msg.content.toString();  
      wss.clients.forEach(client => {  
        if (client.readyState === WebSocket.OPEN) {  
          client.send(message);  
        }  
      });  
      channel.ack(msg);  
    });  
  });  
});  

console.log('WebSocket-Server läuft auf ws://localhost:8080');

---

Schritt 3: Vue.js-Komponente für Benachrichtigungen

Erstellen Sie `components/NotificationCenter.vue`:

<template>  
  <div class="notification-center">  
    <div v-for="(note, index) in notifications" :key="index" class="notification">  
      🚨 Ticket #{{ note.ticket_id }} wurde aktualisiert: {{ note.changes }}  
    </div>  
  </div>  
</template>  

<script>  
import { ref, onMounted } from 'vue';  

export default {  
  setup() {  
    const notifications = ref([]);  

    onMounted(() => {  
      const ws = new WebSocket('ws://localhost:8080');  

      ws.onmessage = (event) => {  
        const message = JSON.parse(event.data);  
        if (message.assigned_user_id === currentUserId) {  
          notifications.value.unshift(message);  
          // Auto-Entfernen nach 10 Sekunden  
          setTimeout(() => {  
            notifications.value.pop();  
          }, 10000);  
        }  
      };  
    });  

    return { notifications };  
  }  
};  
</script>  

<style scoped>  
.notification {  
  background: #f8f9fa;  
  border-left: 4px solid #007bff;  
  padding: 1rem;  
  margin: 0.5rem 0;  
}  
</style>  

---

Schritt 4: Komponente in Vtiger einbinden

1. Fügen Sie die Vue-App in Ihr Vtiger-Template ein:

   // vtiger/modules/Home/templates/DashBoard.tpl  
   <div id="notification-center"></div>  
   <script src="path/to/compiled-vue-app.js"></script> 

2. Stellen Sie sicher, dass currentUserId (aus Vtiger-Session) an die Vue-Komponente übergeben wird.

Best Practices

• Sicherheit:
• Nutzen Sie wss:// (WebSocket Secure) in Produktion.
• Authentifizieren Sie Clients über JWT-Tokens.
• Skalierung:
• Nutzen Sie Redis für horizontale Skalierung des WebSocket-Servers.
• Begrenzen Sie die Anzahl der gespeicherten Benachrichtigungen im Frontend.
• Fehlerbehandlung:
• Implementieren Sie Reconnect-Logik in Vue.js.

Im Video zeige ich:

• Debugging von WebSocket-Verbindungen.
• Erweiterte Filter (z. B. Benachrichtigungen nur für bestimmte Module).
• Animationen für eingehende Benachrichtigungen.

Warum dieses Setup?

• Echtzeit-Reaktivität: Keine Polling-Intervalle – Updates landen sofort im UI.
• Entkoppelte Architektur: Vtiger, RabbitMQ und WebSocket-Server laufen unabhängig.
• Flexibilität: Leicht erweiterbar für neue Event-Typen (z. B. Chat, Tasks).

Nächste Schritte:

• Teil 2: Benutzerdefinierte Sound-Benachrichtigungen hinzufügen.
• Teil 3: Priorisierte Alarme für kritische Tickets (z. B. SLA-Überschreitungen).

Fragen? Stellen Sie sie in den Kommentaren – ich helfe gern! 🚀

„Mit WebSockets wird Ihre CRM-Plattform zum lebendigen Organismus – jedes Ereignis pulsiert in Echtzeit durch das System.“